diff --git a/.claude/steps-config.json b/.claude/steps-config.json new file mode 100644 index 0000000..b002db9 --- /dev/null +++ b/.claude/steps-config.json @@ -0,0 +1,9 @@ +{ + "oldRepo": "cho-log/self-paced-react", + "steps": { + "step1": { "oldPR": 77 }, + "step2": { "oldPR": 79 }, + "step3_4": { "oldPR": 84 }, + "step5": { "oldPR": 87 } + } +} diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..92eddb1 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,12 @@ +## 개인 목표 달성 여부 + +- [ ] +- [ ] +- [ ] + +--- + +## 리뷰어에게 + +- [ ] +- [ ] diff --git a/00-introduction/README.md b/00-introduction/README.md deleted file mode 100644 index 8d4473e..0000000 --- a/00-introduction/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# 00. Introduction - -React는 UI를 렌더링 하기 위한 JavaScript 라이브러리입니다. - -> React is a JavaScript library for rendering user interfaces (UI). -> https://react.dev/learn/describing-the-ui - - -## ✨ React의 원칙과 목표 - -React를 사용해 앱을 구현하는 데에는 JavaScript/TypeScript로 앱을 직접 구현하는 것보다는 조금 더 정해진 가이드라인이 있습니다. React 팀의 의도가 그것이죠. -React는 새로운 언어나 표준이 아니며, React팀이 그들의 설계 의도에 기반해 만든 하나의 라이브러리입니다. - -사용하는 데에 여전히 정답이 정해져 있지 않은 영역들이 많이 있지만, 권장하지 않는 것에 대한 가이드는 비교적 명확하게 찾아볼 수 있습니다. -그 가이드는 보통 공식 문서에서 찾을 수 있고요. - -이때의 권장하지 않는 것들은 그 자체가 잘못되었기 때문이 아니라, React를 만든 사람들의 의도에서 벗어나기 때문에 잘못된 것으로 간주됩니다. -보기에 아주 읽기 좋고 깔끔한 코드라 하더라도 React 팀에서 의도한 설계와 벗어난다면 개발자가 의도하지 않은 동작이 일어날 수도 있고 알 수 없는 버그와 마주할 수도 있다는 뜻입니다. - -즉, 'React를 잘 사용하기 위한 학습'이란 React에서 의도한 바를 잘 이해하고 그 설계 원칙에 잘 따르는 코드를 작성하는 법에 대한 학습과 연습이라 할 수 있습니다. 물론 이 학습의 가장 근본적인 목적은 'React를 이해하는 것'이 아니라 '사용자에게 더 가치 있는 서비스를 제공하는 것'이어야 합니다. - -그렇다면 React의 의도를 따르기 위한 원칙들에는 어떤 것들이 있을까요? - - - -### 원칙 -- 1 UI를 컴포넌트 단위로 나누어 구현한다. 각 컴포넌트는 독립적(isolated)이며, 순수함(purity)을 유지해야 한다. -- 2 Single Source of Truth로부터 나온 데이터의 일관성을 유지해야 한다. -- 3 단방향 데이터 흐름(one-way/unidirectional data flow)을 유지해야 한다. -- 4 UI는 선언적으로 구성해야 한다. - -### 목표 -위의 원칙을 바탕으로 결국은 여러 측면에서 더 '유지보수하기 좋은'-이미 구현한 걸 파악하고 수정하기 쉬우면서, 확장하기도 쉬운- 코드를 작성하는 것을 목표로 합니다. -조금 더 구체적으로는 아래와 같은 특성을 가지는 코드를 작성하는 것을 목표로 합니다. -- 재사용 하기 높은 (reusable) -- 조합하기 쉬운 (composable) -- 예측하기 쉬운 & 그래서 디버깅하기도 쉬운 (predictable & easy to debug) - - -> #### ❓설계 의도라니...너무 어려워요 -> 위의 원칙들에서 낯설고 어려워 보이는 용어들이 많이 등장했을텐데요. 지금 바로 저 문장과 단어들을 모두 이해할 필요는 없습니다. -앞으로 '이렇게 해야 한다'고 학습하게 되는 여러 사용 규칙이나 권장하는 방법들이 임의로 정해진 규칙이라기보다는 -위와 같은 원칙을 바탕으로 나오게 된 것이라는 정도만 그때그때 조금씩 연결지어 나가보면 됩니다. -> -> 라이브러리를 학습할 때 해당 라이브러리의 설계 원칙과 목표를 먼저 생각해보는 방식은 React를 학습할 때 뿐만 아니라, 이후에 다양한 상태관리 라이브러리를 학습할 때에도 비슷하게 적용할 수 있습니다. -각각의 라이브러리는 해결하고자 하는 문제가 있으며, 그 문제를 잘 해결하기 위한 과정에서 나름의 설계 원칙을 세우고 원칙에 따라 일관되게 코드를 작성하려 합니다.영문으로 검색하는 경우 `mental model`, `design principle`, `paradigm` 등을 붙여서 찾아보면 해당 라이브러리에서 지향하는 바에 대한 설명을 찾아볼 수 있습니다. -보통 라이브러리의 공식 문서, 라이브러리 컨트리뷰터들이 작성한 아티클 혹은 컨퍼런스 발표 등에서 찾아볼 수 있어요. 이 자료에서 확인할 수 있는 원칙들이 말 그대로 '저자의 의도'이니 가장 정확한 가이드라인이라 할 수 있습니다. - - -## 🦅 공식 문서 Overview -[React 공식 문서](https://react.dev/)에서 필요한 대부분의 학습 자료를 모두 찾을 수 있습니다. 설계 원칙부터 사용법, 연습 문제를 직접 풀어볼 수 있는 IDE까지 내장되어 있으니 가능하면 공식 문서를 활용해 학습해보는 연습을 추천합니다. - -공식 문서는 크게 아래와 같은 구성으로 이루어져 있습니다. -- Learn -- Reference - - API Reference - - Reference - - Usage - - Troubleshooting - - Rules of React - -이 저장소에서 각 단계별 요구 사항을 구현할 때 각 섹션에서 참고할 만한 공식 문서 링크를 몇 개씩 함께 달아두었습니다. 처음부터 '공식 문서 1회독을 마치고 나서 제대로 구현해봐야지!'같은 식으로 접근하기보다는, 우선 주어진 '요구 사항을 최소 버전으로 구현하기 위해 필요한 정도만' 찾아서 학습하면서 돌아갈 수 있게 만들어보고 → 그 뒤에 이렇게 구현하면 어떤 흐름으로 동작하게 되는 건지, 더 React답게 활용하려면 어떤 걸 고려해보는 게 좋을지 등을 문서에서 찾아보며 학습해보기를 권장합니다. - -### 시작 전 워밍 업 -[Quick Start](https://react.dev/learn) 페이지의 내용을 차근차근 따라해 보세요. 아주 간단한 React 사용법을 전반적으로 알아볼 수 있습니다. - -대략적인 React 코드의 생김새에 익숙해졌나요? -[Thinking in React](https://react.dev/learn/thinking-in-react)를 읽으며 UI를 React로 구현하는 과정을 살펴보세요. Self-Paced React 에서 구현해볼 작은 앱도 이 [Thinking in React](https://react.dev/learn/thinking-in-react) 문서에서 가이드하는 흐름을 참고해 단계별 요구 사항을 제시할 예정입니다. - -[Thinking in React](https://react.dev/learn/thinking-in-react) 문서까지 살펴봤다면, 다음 단계로 넘어가 주세요. -(이 문서의 모든 것을 이해해야 한다는 뜻은 아닙니다! 가볍게 훑어보고 넘어가세요. 지금 모든 걸 이해하지 않아도 괜찮습니다.) - -## 참고: React(core)와 React Renderer의 관계 -`main.jsx`파일을 한번 열어보세요. 아래와 같은 import 문이 있는 것을 확인하실 수 있습니다. -```javascript -import React from "react"; // 이건 알겠는데 -import ReactDOM from "react-dom/client"; // 이건 뭘까요? -``` -거칠게 나눠보자면 React로 애플리케이션을 구현할 때에는 React(core)와 React Renderer를 함께 사용하게 됩니다. -`ReactDOM`이 React renderer의 한 종류로 웹 브라우저 환경에서 React코드를 실행하기 위해 사용합니다. - - - -실제로 React Native를 처음 소개할 때에는 [`Learn once, write everywhere`](https://blog.outsider.ne.kr/1124) 라는 슬로건을 내세우기도 했습니다. -(정말로 이 슬로건이 잘 실현되었는 지는 일단 논외로 두겠습니다) - -흔히 접할 수 있는 ReactDOM이나 React Native 외에도, [awesome react renderer](https://github.com/chentsulin/awesome-react-renderer)를 보시면 작성한 React 코드를 다양한 환경에서 실행시킬 수 있는 React Renderer들을 확인할 수 있고, 심지어는 직접 Renderer를 구현할 수도 있습니다. -하지만 이 자료는 처음 시작을 위한 자료인만큼 React Renderer, React Core와 React Renderer의 연결 구조와 관련한 더 깊은 이해를 위한 설명은 제외합니다. -이러한 전체적인 구조와 깊은 동작 원리보다는 우선 React 자체를 사용해 코드를 작성하는 것에 대한 부분을 다룰 예정이니 참고해 주세요. diff --git a/01-first-component/README.md b/01-first-component/README.md deleted file mode 100644 index 72b1469..0000000 --- a/01-first-component/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# 01. 컴포넌트 선언하고 사용하기: Component 기본 구조와 JSX - -## 🎯 요구 사항 -- `/templates` 에 있는 html 템플릿을 그대로 `App.jsx`에서 그릴 수 있게 해보세요. -- `App.jsx`를 여러 개의 컴포넌트로 분리해서 그려보세요. - - 스타일도 별도의 css파일로 분리하여 각 컴포넌트에서 import합니다. - - (선택) `module.css` 를 사용해 보세요. - -### 구현 결과 예시 -- 예를 들어, `App.jsx`의 return문을 아래와 같이 작성했을 때에 앱이 정상적으로 그려지도록 구현해 주세요. -- 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다 -```javascript -function App() { - return ( - <> -
-
- - -
- - - ); -} -``` - -## ✅ 키워드 -- JSX - - `class` -> `className` - - `for` -> `htmlFor` - - self closing tag - - Fragment - - `{}` 내에 쓸 수 있는 JS 식 -- React Component - - 기본 구조 - - export / import - -## 🧙‍♀️ 진행 가이드 -- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다. - -## 🔗 참고 문서 -- [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step1-2 에 있는 것처럼 나만의 컴포넌트 단위를 나누어 보세요. -- [Your First Component](https://react.dev/learn/your-first-component) diff --git a/02-rendering-lists/README.md b/02-rendering-lists/README.md new file mode 100644 index 0000000..a054777 --- /dev/null +++ b/02-rendering-lists/README.md @@ -0,0 +1,80 @@ +# 02. 목록 UI 구현하기: Props와 State + +## 🎯 요구 사항 + +- `RestaurantList` 가 restaurants 배열을 받아서 그릴 수 있도록 변경해 보세요. + - restaurants 배열을 `RestaurantList` 의 props로 내려받도록 변경해 보세요. +- 카테고리 필터에 따라 필터된 음식점 목록을 보여줄 수 있도록 변경해 보세요. + +### 구현 결과 예시 + +```javascript +// App.jsx + + +``` + +```javascript +const restaurants = [ + { + id: "a01", + name: "피양콩할마니", + description: + "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.", + category: "한식", + }, + { + id: "a02", + name: "친친", + description: + "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다", + category: "중식", + }, + { + id: "a03", + name: "잇쇼우", + description: + "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다", + category: "일식", + }, + { + id: "a04", + name: "이태리키친", + description: "늘 변화를 추구하는 이태리키친입니다.", + category: "양식", + }, + { + id: "a05", + name: "호아빈 삼성점", + description: "푸짐한 양에 국물이 일품인 쌀국수", + category: "아시안", + }, + { + id: "a06", + name: "도스타코스 선릉점", + description: "멕시칸 캐주얼 그릴", + category: "기타", + }, +]; +``` + +## ✅ 키워드 + +- Props +- State + - useState +- Keys + +> [Rendering Lists](https://react.dev/learn/rendering-lists) 문서에 ['Why does React need keys?'](https://react.dev/learn/rendering-lists#why-does-react-need-keys)는 지금 꼭 이해하지 않아도 괜찮습니다. 그냥 React에서 목록을 동적으로 그릴 때에는 이런 것들을 사용해야 하는구나~ 정도로만 알고 일단 넘어가세요. 우선 사용하는 법에 익숙해지는 것이 먼저입니다 :) + +## 🧙‍♀️ 진행 가이드 + +- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다. + +## 🔗 참고 문서 + +- [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step3-4 +- [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component) +- [Rendering Lists](https://react.dev/learn/rendering-lists) +- [State: A Component's Memory](https://react.dev/learn/state-a-components-memory) + - [API Reference: useState](https://react.dev/reference/react/useState) diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..8bae7a1 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,41 @@ +# 프로젝트 가이드 + +## 미션 진행 방식 + +- 힌트 우선, 답은 명시적으로 요청할 때만 제공 +- README 수정 시 초안을 먼저 보여주고 승인 후 반영 (포트폴리오 용도, heading 구조 고정) + +## 과거 코드 비교 자동화 + +새 스텝 README의 `## 과거 코드와 비교` 섹션 작성 시: + +1. `.claude/steps-config.json`에서 해당 스텝의 `oldPR` 번호와 `oldRepo`를 읽는다 +2. `gh api repos/{oldRepo}/pulls/{oldPR}/comments`로 인라인 리뷰를 fetch한다 +3. `gh pr diff {oldPR} --repo {oldRepo}`로 핵심 코드 변경사항을 확인한다 +4. 현재 브랜치 코드와 비교하여 달라진 점, 리뷰에서 배운 점을 정리한다 + +스텝 번호 매핑: step1 → step1, step2 → step2, step3/4 → step3_4, step5 → step5 + +## README 양식 + +heading 구조는 고정 템플릿이며 절대 변경하지 않는다. README는 포트폴리오 용도로 작성한다. + +``` +# 미션 제목 + +## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드 + +## 📝 기능 구현 목록 + +## 📚 학습 내용 + +## 🤔 고민했던 문제와 해결 과정에서 배운 점 + +## 🛠 리팩토링 + +## 과거 코드와 비교 + +### 달라진 점 + +### 과거 코드에서 배운 점 +``` diff --git a/README.md b/README.md index dd356c9..b9c54f8 100644 --- a/README.md +++ b/README.md @@ -1,191 +1,197 @@ -# Self-Paced React Step 1 +# Self-Paced React Step 2 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다. -1. React의 원칙과 특성 이해 - React 공식 문서의 Quick Start를 읽으며 기존에 알고 있던 React 지식을 비교하고 재정리한다. +**1. Props의 개념과 데이터 흐름 이해** -2. HTML과 JSX의 차이점 이해 - 주어진 HTML 템플릿을 `App.jsx`로 변환하는 과정을 직접 실습하며 두 문법의 차이점을 이해한다. +부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식을 직접 구현하며 단방향 데이터 흐름을 체득한다. -3. 컴포넌트 분리 기준 정립 - UI를 컴포넌트 단위로 분리하는 기준을 스스로 고민하고 세워본다. +**2. State와 useState 사용법 이해** -4. CSS Module 사용 및 특성 이해 - `module.css`를 직접 사용해보고, 일반 CSS와의 차이점 및 특성을 이해한다. +`useState`를 활용하여 카테고리 필터 상태를 관리하고, 상태 변화에 따라 UI가 어떻게 반응하는지 이해한다. + +**3. 목록 렌더링과 Key의 역할 이해** + +배열 데이터를 컴포넌트 목록으로 렌더링하는 방법을 익히고, `key` props가 필요한 이유를 이해한다. --- ## 📝 기능 구현 목록 -**1. 컴포넌트 분리** +**1. Props를 활용한 컴포넌트 데이터 연결** -| 컴포넌트 | 역할 | -| ----------------------- | --------------------- | -| `Header` | 상단 헤더 영역 | -| `CategoryFilter` | 카테고리 및 정렬 필터 | -| `RestaurantList` | 음식점 목록 | -| `RestaurantDetailModal` | 음식점 상세 정보 모달 | -| `AddRestaurantModal` | 음식점 추가 모달 | +- `restaurants` 배열 분리 +- `restaurants` 배열을 `App.jsx`에서 `RestaurantList`의 props로 전달한다. +- `RestaurantList`는 전달받은 배열을 순회하여 각 음식점 정보를 렌더링한다. +- 목록 렌더링 시 각 항목에 `key` props를 부여한다. -**2. 스타일 적용** +**2. 카테고리 필터 상태 관리** -- 전역 스타일은 `App.css`에 정의하여 `App.jsx`에서 import한다. -- 각 컴포넌트 단위 스타일은 `*.module.css`로 모듈화하여 적용한다. +- `useState`로 현재 선택된 카테고리 상태를 관리한다. +- `CategoryFilter`에 현재 카테고리 값과 변경 핸들러를 props로 전달한다. +- 선택된 카테고리에 따라 `restaurants` 배열을 필터링한 `filteredRestaurants`를 `RestaurantList`에 전달한다. --- ## 📚 학습 내용 -### 1. React의 원칙과 목표 +### 1. Props -React는 UI를 렌더링 하기 위한 JavaScript 라이브러리이다. +Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법이다. 함수의 인자처럼 동작하며, 자식 컴포넌트는 전달받은 props를 읽기만 할 수 있고 직접 수정할 수 없다. + +```jsx +// 부모 컴포넌트 (App.jsx) +; + +// 자식 컴포넌트 (RestaurantList.jsx) +function RestaurantList({ restaurants }) { + return ( +
    + {restaurants.map((restaurant) => ( +
  • {restaurant.name}
    • + ))} +
+ ); +} +``` -**React 설계 원칙** +### 2. State와 useState -1. UI를 컴포넌트 단위로 나누어 구현한다. 각 컴포넌트는 독립적이고, 순수함을 유지해야 한다. -2. Single Source of Truth로부터 나온 데이터의 일관성을 유지해야 한다. - - SSoT는 정보 시스템과 데이터 관리에서 **모든 데이터 요소를 단 하나의 출처에서만 제어 및 수정하도록 조직하는 원칙**이다. 여러 곳에 데이터 사본을 두지 않고, 오직 하나의 신뢰할 수 있는 원본만을 가리키도록 하여 데이터 불일치와 오류를 방지한다. -3. 단방향 데이터 흐름을 유지해야 한다. -4. UI는 선언적으로 구성해야 한다. +State는 컴포넌트가 직접 소유하고 관리하는 데이터다. Props와 달리 컴포넌트 내부에서 변경할 수 있으며, 상태가 변경되면 해당 컴포넌트와 자식 컴포넌트가 리렌더링된다. - <차이점> - - 바닐라 JS (명령적 UI 구성): DOM을 직접 조작해 어떻게 변해야 하는지 모든 절차를 명령한다. - - React (선언적 UI 구성): DOM 조작 x, 상태에 따른 최종 UI의 모습만 선언한다. +`useState`는 상태를 선언하는 React Hook으로, 현재 상태값과 상태를 변경하는 함수를 배열로 반환한다. - <선언적 방식의 장점> - - 브라우저의 DOM을 조작하는 작업은 리액트의 virtual DOM에게 위임할 수 있다. - - 코드를 보고 화면의 결과를 바로 예측할 수 있기 때문에 직관성과 가독성이 높아진다. - - UI 렌더링에 오류가 발생하면 DOM 조작 과정을 추적하지 않고 현재 상태 데이터가 올바른지만 확인하면 되기 때문에 디버깅 및 유지보수가 쉬워진다. +```jsx +const [category, setCategory] = useState("전체"); +``` -### 2. React(core)와 React Renderer +- `category`: 현재 상태값 +- `setCategory`: 상태를 변경하는 함수. 호출 시 컴포넌트가 리렌더링된다. +- `"전체"`: 초기값 -React로 애플리케이션을 만들 때는 항상 두 가지를 함께 사용한다. +### 3. 목록 렌더링과 Key - - React(core): 컴포넌트 작성, 상태 관리, Virtual DOM 비교 등 환경에 독립적인 핵심 로직을 담당한다. - - React Renderer: React(core)가 만들어낸 결과물을 실제 환경에 그리는 역할을 담당한다. +배열 데이터를 컴포넌트 목록으로 렌더링할 때는 `map()`을 사용한다. 이때 각 항목에 `key` props를 부여해야 한다. -React(core)는 **무엇을 그릴지**만 계산하고, Renderer가 **어디에 어떻게 그릴지**를 결정하는 구조다. +```jsx +restaurants.map((restaurant) => ( -| Renderer | 환경 | import | -| -------------- | ----------------- | -------------------------------------------- | -| `react-dom` | 웹 브라우저 (DOM) | `import ReactDOM from "react-dom/client"` | -| `react-native` | iOS / Android 앱 | `import { AppRegistry } from "react-native"` | -| `ink` | CLI 터미널 | `import { render } from "ink"` | +)); +``` -이 구조 덕분에 React(core)의 문법과 개념은 그대로 유지하면서, Renderer만 교체하면 웹/모바일/터미널 등 다양한 환경에서 동작하는 애플리케이션을 만들 수 있다. React Native가 처음 소개될 때 "Learn once, write everywhere"를 슬로건으로 내세운 것도 이 구조에서 비롯된 것이다. +`key`는 React가 목록에서 어떤 항목이 추가, 변경, 삭제되었는지 식별하기 위해 사용한다. 목록 내에서 고유한 값이어야 하며, 배열 인덱스보다 데이터 고유 id를 사용하는 것이 권장된다. -### 3. HTML 태그 속성과 JSX 변환 시 주의점 +### 4. BEM 네이밍과 CSS 모듈 표기법 -HTML의 일부 속성은 JavaScript의 예약어와 이름이 겹치기 때문에 JSX에서는 다른 이름을 사용해야 한다. +BEM(Block Element Modifier)은 CSS 클래스 이름을 짓는 방법론이다. -- htmlFor는