Merge pull request #42 from KOOMINSEOK/main

[3주차/민] 키워드 제출합니다

keyword/chapter03/keyword.md

@@ -0,0 +1,80 @@
+Styled-Component 문법
+    1.사용 방법
+        styled.태그명 다음 백틱(``)를 활용해서 스타일을 지정
+        ex
+           import styled from "styled-components";
+
+            const CustomButton = () => {
+                return (
+                    <FirstStyledSweetPotato>
+                        커스텀 고구마 버튼
+                    </FirstStyledSweetPotato>
+                );
+            };
+
+            export default CustomButton;
+
+            const FirstStyledSweetPotato = styled.button`
+                background-color: purple;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+            `
+        만든 컴포넌트 명을 import 해서 일반 태그처럼 사용
+
+    2. CSS 의사 클래스(가상 클래스) 선택자 적용 방법
+        자신을 선택하는 & 문자를 사용하여, 아래와 같이 정의
+        ex
+            const StyledHoverButton = styled.button`
+                &:hover {
+                    text-decoration: underline;
+                }
+            `
+    3. props에 전달된 속성에 따른, 스타일링 분리
+         props를 활용해서, 하나의 컴포넌트에서 props로 속성값을 받아 더 dynamic한 컴포넌트 생성 가능
+        ex
+            import styled from "styled-components";
+
+            const CustomButton = () => {
+                return (
+                    <>
+                        <FirstStyledSweetPotato color={'purple'}>
+                            고구마
+                        </FirstStyledSweetPotato>
+                        <FirstStyledSweetPotato>
+                            고구마
+                        </FirstStyledSweetPotato>
+                    </>
+                );
+            };
+
+            export default CustomButton;
+
+            const FirstStyledSweetPotato = styled.button`
+                background-color: ${props => props.color || 'purple'};
+                border: none;
+                border-radius: 10px;
+                padding: 20px;
+                cursor: pointer;
+                color: white;
+            `
+        연산자 ||을 통해서 props에 value가 전달되지 않았을 경우 기본값을 설정해줄 수 있음
+
+
+
+React Router
+    1.React Router란?
+        -Routing 이란?
+
+             유저가 주소창에 url 입력시 요청된 url에 해당하는 데이터를 보내주는 것 을 의미한다.
+            새로운 URL을 요청하면 그 URL에 맞는 데이터를 받아오는 것을 Routing이라고 한다
+            우리가 새로운 URL 경로를 입력하면, 그 URL에 해당하는 새로운 페이지를 네트워크 서버상에 요청하고,
+             서버에서 새로운 html을 받아와서, 페이지 전체가 업데이트 되는 것을 Routing이라고 한다.
+
+        - Client Side Rendering (CSR)
+
+            새로운 링크를 클릭할 떄 Page URL이 업데이트는 되나, 로딩 스피너는 돌지 않고,
+            페이지가 새롭게 refresh 되는게 아니고, Navbar나 Sidebar는 유지되고, main body 부분의 데이터만 바꿔지는 현상.
+
+
+

mission/chapter03/mission01/.gitignore

@@ -0,0 +1,25 @@
+# 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?
+.env

mission/chapter03/mission01/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

mission/chapter03/mission01/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

mission/chapter03/mission01/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>