[3주차] 김상준 학습 PR 제출합니다.

week2/김상준/[2주차] 김상준.md

@@ -0,0 +1,100 @@
+# 📚 2주차 학습  
+
+## 리액트(React) 핵심 동작 방식 
+
+### 1. 리액트란 무엇인가? 어떤 일을 하는가?  
+
+UI 개발에 혁신을 가져온 **선언형 웹 라이브러리**, 리액트는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다.  
+단순히 HTML을 조작하는 것을 넘어, 개발자가 UI의 **상태(State)** 를 선언하면 리액트가 가장 효율적인 방식으로 화면을 재구성합니다.  
+
+- **선언형(Declarative)**  
+  개발자는 특정 상태일 때 UI가 *무엇(What)* 을 보여줄지만 선언하면 됩니다.  
+  "어떻게(How)" 변경할지는 리액트가 처리하기 때문에 코드의 가독성이 높아지고 버그가 줄어듭니다.  
+
+- **컴포넌트 기반(Component-Based)**  
+  UI를 작고 독립적이며 재사용 가능한 컴포넌트 단위로 나누어 조립합니다. 복잡한 UI를 레고 블록처럼 체계적으로 구축할 수 있습니다.  
+
+- **Virtual DOM**  
+  실제 DOM 대신 메모리에 가상의 DOM을 만들어 관리합니다.  
+  변경이 생기면 새 Virtual DOM을 만들고 이전과 비교하여 달라진 부분만 실제 DOM에 반영합니다.  
+  이 방식은 성능을 크게 향상시킵니다.  
+
+
+---
+
+### 2. 컴포넌트(Component)와 JSX  
+
+리액트 앱은 **컴포넌트**라는 기본 단위로 구성되며, 그 구조와 모습은 **JSX**라는 문법으로 정의됩니다.  
+
+- **컴포넌트 = 함수**  
+  현대 리액트에서 컴포넌트는 JSX를 반환하는 JavaScript 함수입니다. 함수 하나가 UI의 한 조각을 담당합니다.  
+
+- **JSX (JavaScript XML)**  
+  JavaScript 코드 안에서 HTML과 유사한 문법으로 UI 구조를 작성할 수 있는 확장 문법입니다.  
+  `React.createElement()`의 복잡한 호출을 대신하는 직관적인 설계도 역할을 합니다.  
+
+- **조립(Composition)**  
+  컴포넌트 안에 다른 컴포넌트를 포함하여 더 큰 UI를 만들 수 있습니다.  
+  페이지(Page) 역시 여러 컴포넌트가 조합된 하나의 큰 컴포넌트입니다.  
+
+- **동적 표현**  
+  JSX 내에서는 중괄호 `{}`를 통해 변수나 표현식을 삽입할 수 있어, 정적인 UI 대신 동적인 UI 구현이 가능합니다.  
+
+
+---
+
+### 3. State (상태)  
+
+State는 컴포넌트의 **내부 기억 장치**입니다.  
+사용자의 행동이나 시간의 흐름에 따라 값이 변하며, 그 변화는 곧 UI의 업데이트로 이어집니다.  
+
+- **반응성(Reactivity)**  
+  `useState`의 setter로 State를 변경하면 리액트는 이를 감지하고 컴포넌트를 리렌더링하여 화면을 갱신합니다.  
+
+- **캡슐화(Encapsulation)**  
+  State는 기본적으로 해당 컴포넌트 내부에서만 접근 및 수정할 수 있는 비공개 데이터입니다.  
+
+- **불변성(Immutability)**  
+  State 업데이트 시 기존 데이터를 직접 수정하지 않고 새로운 객체나 배열을 생성해 교체해야 합니다.  
+  이는 리액트가 변경 사항을 효율적으로 감지하고 예측 가능하게 동작할 수 있도록 돕습니다.  
+
+
+---
+
+### 4. Props (속성)  
+
+Props는 **부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터 통로**입니다. 이를 통해 데이터가 컴포넌트 간에 흐릅니다.  
+
+- **단방향 데이터 흐름(Unidirectional Data Flow)**  
+  데이터는 항상 부모 → 자식으로 전달됩니다. 이 규칙 덕분에 데이터 흐름이 예측 가능합니다.  
+
+- **읽기 전용(Read-Only)**  
+  자식 컴포넌트는 props를 직접 수정할 수 없습니다.  
+  이를 위반하면 데이터 흐름이 깨지고 버그가 발생합니다.  
+
+- **함수 전달**  
+  props로 데이터뿐만 아니라 함수도 전달할 수 있습니다.  
+  부모의 state를 자식이 변경해야 할 경우, 부모는 state를 수정하는 함수를 props로 넘겨주고 자식은 해당 함수를 호출합니다.  
+  (*Data flows down, Actions flow up*)  
+
+- **전역 상태 관리의 필요성**  
+  props만으로는 형제나 멀리 떨어진 컴포넌트 간 데이터 공유가 어렵습니다.  
+  이를 해결하기 위해 **Context API**나 **Redux** 같은 전역 상태 관리 도구를 활용합니다.  
+
+
+---
+
+### 5. 리액트의 전체 동작 흐름 요약  
+
+리액트는 개발자가 선언한 **상태(State)** 를 바탕으로, **JSX(설계도)** 를 통해 UI를 정의하고,  
+상태 변화가 생기면 Virtual DOM을 활용해 변경된 부분만 실제 DOM에 효율적으로 반영합니다.  
+
+#### 단계별 흐름
+1. **구성**: UI는 독립적인 컴포넌트들의 조합으로 이루어집니다.  
+2. **정의**: 각 컴포넌트는 State와 Props를 기반으로 JSX를 반환합니다.  
+3. **변경 발생**: 사용자의 행동 등으로 State가 변경됩니다.  
+4. **리렌더링 & Virtual DOM 생성**: 리액트는 변경을 감지하고 새로운 Virtual DOM을 생성합니다.  
+5. **비교(Reconciliation)**: 이전 Virtual DOM과 새 Virtual DOM을 비교하여 달라진 부분을 찾습니다.  
+6. **반영**: 변경된 부분만 실제 DOM에 반영하여 화면을 업데이트합니다.  
+
+이러한 **선언적이고 효율적인 방식** 덕분에, 개발자는 복잡한 UI 상태를 손쉽게 관리하며 사용자에게 빠르고 부드러운 경험을 제공합니다.

week2/김상준/todo/.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?

week2/김상준/todo/README.md

@@ -0,0 +1,16 @@
+# 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) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

week2/김상준/todo/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

week2/김상준/todo/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>todo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>