["clo-or”] "front-end” 2주차 미션 제출합니다.

mission1/WIL.md

@@ -0,0 +1,46 @@
+## HTTP Response와 Request
+HTTP는 프론트엔드(클라이언트)와 백엔드(서버) 간의 통신을 위한 프로토콜입니다. 클라이언트는 HTTP 요청을 통해 서버에 필요한 리소스를 요청하고, 서버는 이에 대한 응답을 HTTP 응답 형태로 반환합니다.
+
+## HTTP Method (GET, POST, DELETE, PATCH 등)
+HTTP 메서드는 클라이언트가 서버에서 어떤 작업을 수행하고자 하는지를 나타냅니다. 주요 메서드는 아래와 같습니다:
+
+1. GET
+- 서버에서 리소스를 가져오기 위한 요청입니다.
+2. POST
+- 서버에 데이터를 전송하여 새로운 리소스를 생성하거나 서버의 상태를 변경합니다.
+3. PUT
+- 서버에 데이터를 전송하여 리소스를 업데이트하거나 새로 생성합니다.
+4. DELETE
+- 서버의 특정 리소스를 삭제합니다.
+5. PATCH
+- 리소스의 일부를 업데이트합니다.
+
+## HTTP Status (200, 404 등)
+HTTP 상태 코드는 서버가 클라이언트 요청을 처리한 결과를 나타냅니다. 숫자로 된 3자리 코드로 구성되며, 상태에 따라 다음과 같이 구분됩니다:
+
+1. 1xx: 정보성 응답 (Informational Responses)
+: 클라이언트의 요청을 처리 중임을 나타냅니다.
+- 100 Continue: 클라이언트가 요청을 계속 진행할 수 있음을 나타냅니다.
+- 101 Switching Protocols: 프로토콜 전환이 진행 중임을 알립니다.
+2. 2xx: 성공 (Successful Responses)
+: 요청이 성공적으로 처리되었음을 나타냅니다.
+- 200 OK: 요청이 성공적으로 처리되었습니다.
+- 201 Created: 요청에 의해 리소스가 성공적으로 생성되었습니다.
+- 204 No Content: 요청은 성공했지만 반환할 콘텐츠가 없습니다.
+3. 3xx: 리디렉션 (Redirection Responses)
+: 요청한 리소스가 다른 위치로 이동되었음을 나타냅니다.
+- 301 Moved Permanently: 리소스가 영구적으로 이동되었음을 알립니다.
+- 302 Found: 임시로 다른 URI로 리소스를 제공함을 나타냅니다.
+- 304 Not Modified: 클라이언트가 캐시된 버전을 사용할 수 있음을 나타냅니다.
+4. 4xx: 클라이언트 오류 (Client Error Responses)
+: 클라이언트의 요청이 잘못되었음을 나타냅니다.
+- 400 Bad Request: 잘못된 요청입니다.
+- 401 Unauthorized: 인증이 필요합니다.
+- 403 Forbidden: 권한이 없어 접근할 수 없습니다.
+- 404 Not Found: 요청한 리소스를 찾을 수 없습니다.
+5. 5xx: 서버 오류 (Server Error Responses)
+: 서버가 요청을 처리하는 데 실패했음을 나타냅니다.
+- 500 Internal Server Error: 서버 내부에서 오류가 발생했습니다.
+- 502 Bad Gateway: 게이트웨이 또는 프록시 서버가 잘못된 응답을 받았습니다.
+- 503 Service Unavailable: 서버가 현재 요청을 처리할 수 없습니다.
+- 504 Gateway Timeout: 게이트웨이 또는 프록시 서버가 응답을 기다리다 시간이 초과되었습니다.

mission2/WIL.md

@@ -0,0 +1,50 @@
+# 동기 처리와 비동기 처리의 차이점
+- 동기 (직렬적) 
+```
+aa
+  aa
+    aaa
+```
+응답을 받은 후에야 다음 동작이 이루어짐
+// 나머지 태스크는 대기
+전체적인 효율 저하
+
+- 비동기 (병렬적)
+```
+aa
+aaa
+aaa
+```
+
+응답 수락 여부와 상관 없이 다음 태스크 동작
+여러 개가 중첩되어 복잡도가 높아질 수 있음
+
+
+### 콜백 함수 (Callback Function)
+콜백 함수는 특정 작업이 완료된 후 실행되도록 설계된 함수로, 비동기 처리를 위해 자주 사용되는 패턴입니다.  
+콜백 함수는 주로 다음과 같은 특징을 가집니다
+
+1. 함수 객체를 매개변수로 전달 : 어떤 함수에 다른 함수를 매개변수로 전달할 수 있습니다.  
+
+2. 매개변수로 전달된 함수 실행 : 전달받은 콜백 함수는 호출 함수 내에서 적절한 시점에 실행됩니다.  
+
+
+### Promise가 작동하는 방식
+Promise는 비동기 작업의 처리 상태와 결과를 관리하는 객체입니다. 콜백 패턴의 단점을 보완하며, 코드를 더 읽기 쉽게 구성할 수 있습니다.  
+
+#### Promise의 상태
+1. Pending: Promise가 생성되고 아직 작업이 완료되지 않은 상태.
+2. Resolved(Fulfilled): 작업이 성공적으로 완료된 상태. `resolve` 메소드가 호출됩니다.
+3. Rejected: 작업이 실패한 상태. `reject` 메소드가 호출됩니다.
+
+
+### fetch로 받아오는 JSON
+fetch는 비동기 HTTP 요청을 통해 데이터를 가져올 때 사용되는 JavaScript의 내장 함수입니다. 주로 REST API 호출에 사용됩니다.  
+
+#### JSON 데이터 형식
+- JSON은 키-값 쌍으로 이루어진 경량 데이터 교환 형식입니다.
+- 데이터를 `fetch`로 가져온 후, `.json()` 메소드를 호출하면 JavaScript 객체로 변환됩니다.  
+
+
+
+

mission2/asynchronous.js

@@ -0,0 +1,17 @@
+async function fetchAndPrintTitles() {
+    try {
+        const response = await fetch('https://jsonplaceholder.typicode.com/posts/');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        data.forEach(post => {
+            console.log(post.title);
+        });
+    } catch (error) {
+        console.error('Error fetching data:', error);
+    }
+}
+
+fetchAndPrintTitles();

mission3/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

mission3/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `yarn build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

mission3/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "mission3",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

mission3/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

mission3/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

mission3/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

mission3/src/App.css

@@ -0,0 +1,14 @@
+
+button {
+            background-color: #007bff;
+            padding: 10px 20px;
+            margin: 10px;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 20px;
+}
+*{
+    padding: 5px;
+    margin: 5px;
+}

mission3/src/App.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './page/home';
+import Velog from './page/velog';
+import Picture from './page/picture';
+import './App.css';
+
+const App = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/Velog" element={<Velog />} />
+        <Route path="/Picture" element={<Picture />} />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;

mission3/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

mission3/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}