From 48bb4f1d9889efa77f0658f6003c79c1e69784e2 Mon Sep 17 00:00:00 2001 From: Nam Yooseong Date: Mon, 1 Jun 2026 22:28:24 +0900 Subject: [PATCH 01/13] =?UTF-8?q?docs:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-introduction/README.md | 89 ---------------------------- 02-rendering-lists/README.md | 74 ----------------------- 03-modal/README.md | 24 -------- 04-form/README.md | 38 ------------ 05-effects/README.md | 49 --------------- 06-references/README.md | 16 ----- images/00-principles.jpg | Bin 278629 -> 0 bytes images/00-react-react-renderers.jpg | Bin 326605 -> 0 bytes src/assets/.gitkeep | 0 9 files changed, 290 deletions(-) delete mode 100644 00-introduction/README.md delete mode 100644 02-rendering-lists/README.md delete mode 100644 03-modal/README.md delete mode 100644 04-form/README.md delete mode 100644 05-effects/README.md delete mode 100644 06-references/README.md delete mode 100644 images/00-principles.jpg delete mode 100644 images/00-react-react-renderers.jpg delete mode 100644 src/assets/.gitkeep 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/02-rendering-lists/README.md b/02-rendering-lists/README.md deleted file mode 100644 index 55bbadb..0000000 --- a/02-rendering-lists/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# 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/03-modal/README.md b/03-modal/README.md deleted file mode 100644 index 6ad102e..0000000 --- a/03-modal/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# 03. 모달 UI 구현하기: side-effect(feat. event handler) - -## 🎯 요구 사항 -- `RestaurantList` 의 아이템을 클릭하면, 클릭한 아이템의 정보를 보여주는 모달이 뜨도록 변경해 주세요. '확인' 버튼을 클릭하거나 모달 뒤의 backdrop을 클릭하면 모달이 닫혀야 합니다. - - (작은 단계로 구현해보기 1) 아이템을 클릭하면 정해진 텍스트를 그대로 보여주는 모달을 열고 닫습니다. - - (작은 단계로 구현해보기 2) 클릭한 아이템의 정보를 모달에 내려줄 수 있도록 개선합니다. - -### 구현 결과 예시 -```javascript -// App.jsx -{isModalOpen && } -``` - -## ✅ 키워드 -- event handler (feat. side effect) -- conditional rendering -- lifting state up - -## 🧙‍♀️ 진행 가이드 -- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다. - -## 🔗 참고 문서 -- [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step5 -- [Responding to Events](https://react.dev/learn/responding-to-events) diff --git a/04-form/README.md b/04-form/README.md deleted file mode 100644 index 45a5bd0..0000000 --- a/04-form/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# 04. 폼 UI 구현하기: controlled vs uncontrolled - -## 🎯 요구 사항 -- `Header`의 레스토랑 추가 버튼을 클릭하면 레스토랑 추가 폼이 모달로 뜨도록 구현해 주세요 - - 이전 단계에서 만들어두었던 `AddRestaurantModal`을 그대로 사용합니다. -- 카테고리를 선택하고, ``, ` + + 메뉴 등 추가 정보를 입력해 주세요. + + + +
+ +
+ + + + ); +} diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.module.css b/src/components/AddRestaurantModal/AddRestaurantModal.module.css new file mode 100644 index 0000000..780ec76 --- /dev/null +++ b/src/components/AddRestaurantModal/AddRestaurantModal.module.css @@ -0,0 +1,110 @@ +.modal { + display: none; +} + +.modal--open { + display: block; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background: rgba(0, 0, 0, 0.35); +} + +.modal-container { + position: fixed; + bottom: 0; + width: 100%; + + padding: 32px 16px; + + border-radius: 8px 8px 0px 0px; + background: var(--grey-100); +} + +.modal-title { + margin-bottom: 36px; +} + +.form-item { + display: flex; + flex-direction: column; + + margin-bottom: 36px; +} + +.form-item label { + color: var(--grey-400); + font-size: 14px; +} + +.form-item--required label::after { + padding-left: 4px; + + color: var(--primary-color); + content: "*"; +} + +.form-item .help-text { + color: var(--grey-300); +} + +.form-item input, +.form-item textarea, +.form-item select { + padding: 8px; + margin: 6px 0; + + border: 1px solid var(--grey-200); + border-radius: 8px; + + font-size: 16px; +} + +.form-item textarea { + resize: none; +} + +.form-item select { + height: 44px; + + padding: 8px; + + border: 1px solid var(--grey-200); + border-radius: 8px; + + color: var(--grey-300); +} + +input[name="name"], +input[name="link"] { + height: 44px; +} + +.button-container { + display: flex; +} + +.button { + width: 100%; + height: 44px; + + margin-right: 16px; + + border: none; + border-radius: 8px; + + font-weight: 600; + cursor: pointer; +} + +.button--primary { + background: var(--primary-color); + + color: var(--grey-100); +} From 14684d937a4bffdda38a198f4d4b8920f0bb7b41 Mon Sep 17 00:00:00 2001 From: Nam Yooseong Date: Mon, 1 Jun 2026 22:41:07 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20App=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=EC=A1=B0=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 0f5bcc1..c6c48d5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,24 @@ import "./App.css"; +import Header from "./components/Header/Header.jsx"; +import CategoryFilter from "./components/CategoryFilter/CategoryFilter.jsx"; +import RestaurantList from "./components/RestaurantList/RestaurantList.jsx"; +import RestaurantDetailModal from "./components/RestaurantDetailModal/RestaurantDetailModal.jsx"; +import AddRestaurantModal from "./components/AddRestaurantModal/AddRestaurantModal.jsx"; function App() { - return

Self-Paced React

; + return ( + <> +
+
+ + +
+ + + ); } export default App; From 81008a805828ae23185e968a6624d37c4ec3506d Mon Sep 17 00:00:00 2001 From: Nam Yooseong Date: Mon, 1 Jun 2026 22:42:53 +0900 Subject: [PATCH 09/13] =?UTF-8?q?docs:=20=EB=AF=B8=EC=85=98=20=ED=95=99?= =?UTF-8?q?=EC=8A=B5=20=EB=82=B4=EC=9A=A9=20README=20=EC=B4=88=EC=95=88=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 120 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 72 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 733ad30..ae221af 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,72 @@ -# Self-Paced React - -## 🎯 이 학습 자료의 목표 경험 -React를 사용해 자주 사용되는 UI들을 아주 기초적인 수준으로 구현해봅니다. -이 과정에서 React의 설계 원칙을 고려하며 개발하는 연습의 첫 단계를 경험해봅니다. -- JavaScript 기반의 React 프로젝트를 직접 실행할 수 있다. -- React에서 컴포넌트를 선언하고 사용할 수 있다. -- 아래와 같은 UI를 가장 기초적인 수준에서 구현할 수 있다. (유효성 검사, 그 외 UX 대응 등 모두 X) - - 목록 UI - - 모달 UI - - 폼 UI - -### ❌ 다루지 않는 것 -- TypeScript -- RSC(React Server Component) -- 테스트 도구 - - Storybook - - RTL(React Testing Library) -- 라우팅, 상태 관리 등을 위한 서드파티 라이브러리 -- React의 깊이있는 동작 원리 -- React 컴포넌트 구현 패턴 -- Context API -- Ref -- useState/useEffect 이외의 hook, custom hook - -### ✅ 다루는 것 -- 'React의 설계 원칙에 맞는' 코드를 작성하기 위한 학습에서 참고할 만한 자료 -- JSX -- useState -- useEffect - -## 🧙‍♀️ 진행 가이드 -이 저장소의 미션들은 '잘' 구현하기나 '깊이 이해하기'가 목표가 아닙니다. -'React를 사용해본 적 없는 상태'에서 '사용해본 상태'가 되는 것이 목표이고, 그걸 위해 최소한으로 필요한 만큼만 공식 문서를 발췌해서 학습 자료로 활용해보았다면 충분합니다. - -React를 활용하는 코드를 직접 작성해보면서 대략적인 감을 잡을 수 있다면 충분하니, -각 단계의 권장 학습 시간을 참고해 전체 사이클을 빠른 시간 내에 완료하는 것을 목표로 삼아 보세요. -만약 권장 시간 내에 구현해내기가 어렵다면, 예시 브랜치의 코드를 참고해서 동작시켜보아도 됩니다. -React를 처음 접하는 상태에서 모든 단계를 구현해서 동작시켜보는 데까지 `약 4시간(최대 6시간)`을 권장 학습 시간으로 제시하고 있습니다. - -## 🦮 목차 -### [00. Introduction](./00-introduction/README.md) -### [01. 컴포넌트 선언하고 사용하기: Component 기본 구조와 JSX](./01-first-component/README.md) -### [02. 목록 UI 구현하기: Props와 State](./02-rendering-lists/README.md) -### [03. 모달 UI 구현하기: side-effect(feat. event handler)](./03-modal/README.md) -### [04. 폼 UI 구현하기: controlled vs uncontrolled](./04-form/README.md) -### [05. API 연동하기: side-effect(feat. effects)](./05-effects/README.md) -### [06. References](./06-references/README.md) +# Component 기본 구조와 JSX + +## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드 + +이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다. + +1. HTML 템플릿을 그대로 React 컴포넌트로 변환하는 과정을 직접 경험한다. +2. 컴포넌트 단위로 UI를 나누는 기준을 스스로 정해본다. +3. CSS Module을 사용해보고, 일반 CSS import 방식과의 차이를 체감한다. + +--- + +## 📝 기능 구현 목록 + +- [x] Header 컴포넌트 — 타이틀, 음식점 추가 버튼 +- [x] CategoryFilter 컴포넌트 — 카테고리 드롭다운 필터 +- [x] RestaurantList 컴포넌트 — 음식점 목록 (6개) +- [x] RestaurantDetailModal 컴포넌트 — 음식점 상세 정보 모달 +- [x] AddRestaurantModal 컴포넌트 — 음식점 추가 폼 모달 +- [x] 각 컴포넌트별 CSS Module 분리 및 import + +--- + +## 📚 학습 내용 + +### JSX 변환 규칙 +- HTML의 `class`는 JSX에서 `className`으로 작성해야 한다. +- HTML의 `for`는 JSX에서 `htmlFor`로 작성해야 한다. +- ``, `` 등 닫히는 태그가 없는 요소는 self-closing tag로 작성해야 한다.(``) + +### CSS Module 사용법 +- `import styles from "./Component.module.css"` 형태로 객체로 가져온다. +- 클래스 적용 시 `className={styles.클래스명}` 형태로 사용한다. +- `App.css`처럼 전역 스타일은 `import "./App.css"` 로 import하면 앱 전체에 적용되고, 어느 컴포넌트에서든 문자열로 바로 쓸 수 있다. (`className="text-title"`) +- CSS Module 클래스와 전역 클래스를 함께 쓸 때는 템플릿 리터럴을 사용한다 (`className={`${styles.name} text-title`}`) + +### React 컴포넌트 기본 구조 +- 컴포넌트는 반드시 `return`이 있어야 화면에 렌더링된다. +- 이미지 asset은 `import`로 가져온 후 `src={변수명}` 형태로 사용한다. + +--- + +## 🤔 고민했던 문제와 해결 과정에서 배운 점 + +### CSS Module에서 하이픈이 포함된 클래스명 사용 +CSS 클래스명에 하이픈(-)이 포함된 경우 점 표기법(`styles.class-name`)으로 쓰면 JavaScript가 빼기 연산자로 해석해 오류가 난다. + +```jsx +// 오류 +
+ +// 해결: 대괄호 표기법 사용 +
+``` + +### htmlFor에 클래스명을 함께 쓰는 실수 +`for` 속성에 클래스명을 붙여 쓰는 HTML 습관이 그대로 남아 오류가 발생했다. `htmlFor`는 연결할 input의 `id`만 받아야 하고, 클래스는 별도의 `className`으로 분리해야 한다. + +```jsx +// 오류 +