[2주차] 박규빈 학습&TodoList 제출

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "githubPullRequests.ignoredPullRequestBranches": ["main"]
+}

week1/박규빈/[1주차] 박규빈.md

@@ -46,8 +46,6 @@ Virtual DOM은 실제 DOM을 추상화한 가벼운 자바스크립트 객체다
 
 이 방식을 통해 불필요한 DOM 조작을 최소화하여 렌더링 성능을 크게 향상시킬 수 있다.
 
-![Virtual DOM Diffing Process](Virtual%20DOM%20Diffing%20Process.png)
-
 <div align="center">
   <img src="Virtual DOM Diffing Process.png" alt="Virtual DOM">
 </div>

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,76 @@
+# 심플 Todo List 프로젝트 📝
+
+**React**와 **Vite**를 사용하여 구축한 Todo List 웹 애플리케이션입니다.
+
+이 프로젝트는 먼저 html, css, js 구조로 만들어본 다음, React의 핵심 개념인 **컴포넌트, State, Props**를 학습하고 적용하여 리팩토링한 결과물입니다.
+
+## ✨ 주요 기능
+
+- **할 일 추가**: 입력창에 새로운 할 일을 입력하고 '추가' 버튼을 눌러 목록에 추가합니다.
+- **할 일 삭제**: 각 할 일 항목 옆의 삭제 버튼을 클릭하여 목록에서 제거합니다.
+- **할 일 완료/취소**: 할 일 앞의 체크박스를 클릭하여 작업을 완료 상태로 표시하거나 다시 활성 상태로 되돌릴 수 있습니다.
+
+## 🛠️ 사용된 기술
+
+- **React**: UI 구축을 위한 JavaScript 라이브러리. 컴포넌트 기반 아키텍처를 적용했습니다.
+- **Vite**: 빠르고 효율적인 프론트엔드 개발 환경을 제공하는 빌드 도구입니다.
+- **JavaScript (ES6+)**: 애플리케이션의 핵심 로직을 담당합니다.
+- **CSS**: 컴포넌트별로 분리된 CSS 파일을 통해 스타일을 모듈화했습니다.
+
+## 📂 파일 구조
+
+프로젝트는 역할에 따라 여러 개의 컴포넌트로 분리되어 있습니다.
+
+src/  
+├── App.jsx # 최상위 컴포넌트 (상태 관리)  
+├── App.css  
+├── main.jsx # React 앱 진입점  
+├── index.css # 공통 스타일
+└── <font color="#58D68D">**components/**</font>  
+&nbsp;&nbsp;├── TodoInput.jsx # 할 일 입력 컴포넌트  
+&nbsp;&nbsp;├── TodoInput.css  
+&nbsp;&nbsp;├── TodoList.jsx # 할 일 목록 컴포넌트  
+&nbsp;&nbsp;├── TodoList.css  
+&nbsp;&nbsp;├── TodoItem.jsx # 개별 할 일 컴포넌트  
+&nbsp;&nbsp;└── TodoItem.css
+
+- **`App.jsx`**: 모든 상태(State)와 핵심 로직(핸들러 함수)을 관리하고, 자식 컴포넌트에 필요한 데이터와 함수를 Props로 전달하는 최상위 컴포넌트입니다.
+- **`components/`**: 재사용 가능한 UI 조각인 컴포넌트들을 모아둔 폴더입니다.
+  - **`TodoInput`**: 할 일 입력창과 추가 버튼 UI를 담당합니다.
+  - **`TodoList`**: 전체 할 일 목록을 렌더링하고, 각 항목을 `TodoItem`으로 전달합니다.
+  - **`TodoItem`**: 개별 할 일 항목의 UI와 완료/삭제 기능을 담당합니다.
+
+## 🚀 실행 방법
+
+1.  프로젝트 폴더에서 터미널을 엽니다.
+2.  아래 명령어를 입력하여 필요한 패키지를 설치합니다.
+    ```bash
+    npm install
+    ```
+3.  아래 명령어를 입력하여 개발 서버를 실행합니다.
+    ```bash
+    npm run dev
+    ```
+4.  터미널에 표시되는 `http://localhost:5173/` (또는 다른 포트 번호) 주소로 접속합니다.
+
+## 📄 코드 상세 설명
+
+### Component-Based Architecture
+
+- **기억 저장소 (State)**: 모든 데이터는 `App` 컴포넌트의 `useState`를 통해 중앙에서 관리됩니다. 데이터가 변경되면 React가 자동으로 UI를 다시 렌더링합니다.
+- **명령 전달 (Props)**: 데이터(state)와 로직(함수)은 부모 컴포넌트인 `App`에서 자식 컴포넌트(`TodoList`, `TodoItem` 등)로 `props`를 통해 전달됩니다.
+- **모듈화된 스타일**: 각 컴포넌트는 자신만의 CSS 파일을 `import`하여 독립적인 스타일을 가집니다. 이를 통해 스타일 충돌을 방지하고 코드 수정을 용이하게 만들었습니다.
+
+## 👨‍💻 프로젝트 후기
+
+### ✨ 만들면서 느낀 점
+
+맨 처음 HTML, CSS, JS로 만들었던 Todo List를 React로 업그레이드하면서, 같은 앱이라도 이렇게 다르게 만들 수 있다는 걸 배웠습니다. React에서는 데이터만 바꾸면 화면이 알아서 따라오는 방식이라 신기하고 재미있었습니다.
+
+특히 입력창, 목록, 할 일 한 줄을 각각 다른 부품(컴포넌트)으로 나눠서 조립하니, 코드가 훨씬 깔끔해지고 유지보수를 더욱 편하게 할 수 있을 것 같습니다.
+
+### 🚀 앞으로의 업그레이드 계획!
+
+- **로컬 스토리지 활용**: 현재는 새로고침하면 작성해둔 할 일이 전부 사라집니다. **로컬 스토리지**를 사용해서, 브라우저를 껐다 켜도 써놓은 할 일이 그대로 남아있게 만들어보고 싶습니다.
+- **더 편리한 기능 추가**: 할 일을 수정하는 기능, 카테고리 설정 기능, 달력 추가(날짜별 할 일 저장 가능 등), 성공률 확인 기능 등 더욱 다양하게 구현하고 싶습니다.
+- **나만의 서버 만들기**: 최종적으로는 간단한 서버를 만들어서, 다른 컴퓨터나 핸드폰으로 접속해도 내 할 일 목록을 똑같이 불러올 수 있도록 만들고 싶습니다.

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,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Todo List</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>