Merge pull request #2 from Yeonseo-Jo/week4

Week4 과제 배포를 위한 머지

README.md

@@ -1,7 +1,16 @@
 <img width="2000" alt="조연서 웰컴 키트" src="https://github.com/DO-SOPT-WEB/YeonseoJo/assets/97084864/20c307e0-14ff-419d-b69f-f12ef02c43e8">
 
-| 🗓 주차 | 📚 과제명 | 🔗 링크                                                                                                                            |
-| ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| week1  | assign3   | [[ 1주차 기본/심화 ] 웨비의 사진관 😋](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/1) |
-| week1  | assign4   | [[ 1주차 기본/심화 과제 ] 가계부 💸](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/2)                           |
-| week1  | 생각과제  | [[ 1주차 생각 과제 ] 🖤 웹 접근성과 검색엔진 최적화(SEO)](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/3)                                               |
+<div align="center">
+
+| 🗓 주차 | 📚 과제명 | 🔗 PR 링크                                                                                                                            | 🔗 배포 링크 |
+| ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------- |------------------------------------------------------------------------------ |
+| week1  | assign3   | [[ 1주차 기본/심화 ] 웨비의 사진관 😋](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/1) | <p align="center"> N/A </p> |
+| week1  | assign4   | [[ 1주차 기본/심화 과제 ] 가계부 💸](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/2) | <p align="center"> N/A </p> |
+| week1  | 생각과제  | [[ 1주차 생각 과제 ] 🖤 웹 접근성과 검색엔진 최적화(SEO)](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/3)  | <p align="center"> N/A </p> |
+| week2  | assign1 | [[ 2주차 기본/심화 ] 웨비의 사진관 😋](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/6)  | <a href="https://do-sopt-web.github.io/YeonseoJo/week2/aissgn1/"><img src="https://img.shields.io/badge/📸 연서의 갤러리 📸-A9BCF5?style=flat-square&logo=Undertale&logoColor=black&link=https://do-sopt-web.github.io/YeonseoJo/week2/aissgn1/"/></a>|
+| week2  | assign2 | [[ 2주차 기본/심화 ] 가계부 ](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/7) |<a href="https://do-sopt-web.github.io/YeonseoJo/week2/assign2/"><img src="https://img.shields.io/badge/💰 연또의 가계부 💰-A9BCF5?style=flat-square&logo=Undertale&logoColor=black&link=https://do-sopt-web.github.io/YeonseoJo/week2/assign2/"/></a> |
+| week2  | 생각과제 | [ [ 2주차 생각 과제 ] 명령형 프로그래밍과 선언형 프로그래밍 ](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/9)| <p align="center"> N/A </p> |
+| week3  | 기본/심화/생각과제 | [[ 3주차 기본/심화/생각 과제 ] 연서의 점메추🍚 ](https://github.com/DO-SOPT-WEB/YeonseoJo/pull/10)| <a href="https://recommend-menu-by-yeonseo.vercel.app/"><img src="https://img.shields.io/badge/🍱 오늘의 점메추 🍱-A9BCF5?style=flat-square&logo=Undertale&logoColor=black&link=https://recommend-menu-by-yeonseo.vercel.app/"/></a> |
+
+
+</div>

seminar/week4/api-practice-project/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

seminar/week4/api-practice-project/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

seminar/week4/api-practice-project/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

seminar/week4/api-practice-project/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

seminar/week4/api-practice-project/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "api-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-reset": "^4.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "styled-components": "^6.1.1",
+    "vite": "^4.4.5"
+  }
+}

seminar/week4/api-practice-project/src/App.jsx

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import { GlobalStyle } from "./style/GlobalStyle";
+
+import { useState } from "react";
+import Post from "./components/Post";
+
+import axios from "axios";
+import { useEffect } from "react";
+
+function App() {
+  const [data, setData] = useState(null);
+
+  // 초기 렌더링 시에만 해주도록 useEffect로 감싸주기
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await axios.get(
+        "https://jsonplaceholder.typicode.com/posts"
+      );
+      setData(data.data);
+    };
+
+    fetchData();
+  }, []);
+  // GET
+
+  // POST
+  const postData = async () => {
+    try {
+      await axios.post("https://jsonplaceholder.typicode.com/posts", {
+        title: "제목",
+        body: "앙농~",
+        userId: 3,
+      });
+      console.log("성공했당 ~");
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const postList = data ? (
+    data.map((item) => {
+      return <Post key={item.id} title={item.title} body={item.body} />;
+    })
+  ) : (
+    <p>loading..</p>
+  );
+
+  return (
+    <>
+      <GlobalStyle />
+      <AppContainer>
+        <CreateButton onClick={postData}>새로운 글 생성</CreateButton>
+        {postList}
+      </AppContainer>
+    </>
+  );
+}
+
+export default App;
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100vw;
+  background-color: beige;
+`;
+
+const CreateButton = styled.button`
+  font-size: 20px;
+`;

seminar/week4/api-practice-project/src/components/Post.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const Post = ({ title, body }) => {
+  return (
+    <PostContainer>
+      <Title>{title}</Title>
+      <Body>{body}</Body>
+    </PostContainer>
+  );
+};
+
+export default Post;
+
+const PostContainer = styled.article`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+
+  background-color: white;
+  width: 90vw;
+  height: 100px;
+
+  border-radius: 10px;
+`;
+
+const Title = styled.p`
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+const Body = styled.p`
+  font-size: 15px;
+`;

seminar/week4/api-practice-project/src/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

seminar/week4/api-practice-project/src/style/GlobalStyle.jsx

@@ -0,0 +1,22 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+
+export const GlobalStyle = createGlobalStyle`
+${reset}
+#root, body, html {
+    width:100%;
+    height: 100vh;
+    margin: 0 auto;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+button {
+    cursor: pointer;
+}
+
+* {
+    box-sizing: border-box;
+}`;

seminar/week4/api-practice-project/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})