[1단계 미션] 배강현 미션 제출합니다 #24

bae-kh · 2024-10-20T21:43:23Z

안녕하세요 리뷰어님
제가 갑자기 라섹 수술을 하게 되어서 미션 완료가 좀 늦었네요.. 죄송합니다..ㅜ
이번 미션을 통해 리액트를 처음 접해서 그런지 리액트를 실행하는거 조차 힘들어서 미션 해결하는데 오래 걸렸던 것 같습니다.

작업 내용

component 구현, 구조화
class -> className
for -> htmlFor
module.css 사용
map 사용해서 코드 줄이기

View Image

Directory Structure

이번 미션에서 컴포넌트를 다루는게 처음이라 컴포넌트를 어떻게 배치할까 많은 고민이 들었습니다. 컴포넌트 배치에서 작은 오류들이 많이 생겨서 시간이 오래 걸렸습니다.

wzrabbit

@bae-kh 👋🏻

라섹 수술을 하시고 돌아오셨군요! 안경의 굴레에서 벗어나실 수 있다니 부럽습니다.

React를 처음 사용해 보셨다고 들었는데, 소감은 어떠셨나요? 제가 처음 React를 사용할 때는 엄청 복잡하고 힘들긴 했지만 길고 읽기도 어려운 HTML 코드를 여러 부분으로 쪼갤 수 있는 게 좋았던 것 같아요.

1️⃣ 리뷰

이번 미션에서는 React의 기본적인 사용법을 익히고, 하나의 거대한 HTML를 기능 단위에 맞게 여러 컴포넌트로 쪼개는 것이 주 목표였어요. 모두 나름의 방법대로 잘 준수해 주신 것 같아요. 어떻게 나눌 지도 고민해 볼 수 있겠지만 우선 입문하는 입장에서는 요구사항대로 제대로 나누는 것만으로 이미 하실 수 있는 일을 모두 한 것이죠. 허들은 천천히 높여보셔도 좋아요.

다만 메인테이너님께서 요구해 주신 데이터 흐름도 는 아쉽게도 빠뜨리신 것 같아요. 😢 준비해 주실 수 있죠?

그 외에도 하나의 작은 조언을 드리고자 해요.

시간이 되신다면 이후 틈틈이 여러 React 프로젝트를 둘러보시고, 대략적인 폴더 구조를 둘러 보세요. 프로젝트마다 폴더 구조가 꽤 다양한 편인데, 보시면서 인사이트를 얻어가시면 좋을 것 같아요.

많은 프로젝트에서 암묵적으로 지키고 있는 폴더 구조에 관련한 규칙도 있어요. 그 중 하나를 소개해 드리자면, 컴포넌트들은 주로 src/components 아래에, 대문자 이름으로 각 컴포넌트를 만드는 경우가 많아요. 예를 들면 아래와 같이요!

.
└── src/
    └── components/
        └── MyComponent/
            ├── MyComponent.jsx
            └── other files...

물론 절대란 없답니다. 상황에 따라 다른 구조가 더 깔끔한 경우도 있고, 특정 프레임워크에서 다른 형식의 폴더 구조를 지향하기도 할 거에요. 그러니 그런 상황이라면 언제든지 다른 방식을 택해 보세요.

2️⃣ 개발 환경

우선 생소하고 복잡한 구조에도 불구하고 개발 환경 짜시느라 고생 많으셨어요. 제가 커밋으로 보는 것보다 훨씬 많은 시도와 노력이 있었으리라 생각해요.

작업 내역을 제가 확인하던 도중, 아래의 코드들을 발견했어요.

package.json에서, "start": "react-scripts start"
package.json에서, "react-scripts": "^5.0.1"

이는

react-scripts 패키지를 설치하고
터미널에서 npm run start 로 react-scripts 를 이용해 개발 서버를 실행할 수 있도록 설정한 것

인데요, react-scripts는 CRA에서 사용하는 라이브러리이고, 이 프로젝트는 이미 Vite로 개발환경 세팅이 되어 있는 상황 이에요. Vite로 개발 환경 세팅이 되어 있는 프로젝트는 이미 npm run dev를 터미널에 입력하는 것으로 개발 서버를 실행할 수 있고요.

따라서, 추가로 해 주신 설정은 불필요한 설정일 확률이 높아 보입니다. 어떠한 계기로 이 라이브러리들을 설치하시게 되셨는지를 여쭤보고 싶어요.

의도하신 것이 아니라면, 아래의 방법으로 CRA 관련 개발환경 설정을 제거하실 수 있습니다. 방법은 아래와 같아요.

npm uninstall react-scripts 를 터미널에 입력해 react-scripts를 제거합니다.
package.json 의 scripts 에서, "start": "react-scripts start" 를 제거합니다.

Tip

Q. CRA랑 Vite가 뭔데요? 그걸 알아야 하나요?
A. 지금은 이것들을 둘 다 React 개발 환경을 간편하게 구성하고 빠르게 프로젝트를 생성할 수 있는 도구 정도로 생각해 주셔도 됩니다. 현재 상황은 두 도구 의 설정이 섞인 상황이에요.

1단계 리뷰는 이 정도로 드릴게요~ 새롭게 반영하실 사항이 있다면 [2단계 미션] 에 반영을 부탁드려요. 2단계 리뷰도 머지않아 드릴 예정이에요.

그럼, 저는 여기까지!

2단계 미션으로 이동하기

wzrabbit · 2024-10-23T05:13:39Z

src/App.jsx

+import Header from "./header/Header.jsx";
+import CategoryFilter from "./mainbody/CategoryFilter.jsx";
+import RestaurantList from "./mainbody/RestaurantList.jsx";
+import RestaurantDetailModal from "./aside/RestaurantDetailModal.jsx";
+import AddRestaurantModal from "./aside/AddRestaurantModal.jsx";


다른 여러 컨벤션에서는 함수는 카멜 케이스를 사용하는 것이 관례라고 적혀 있을텐데, 여기에서 import하는 Header, CategoryFilter, ... 는 모두 파스칼 케이스에요. 비록 코드를 가져오는 작업에 가깝지만 의문이 혹시 들지는 않으셨나요?

아 약간 적혀있는데로 가져오는 바람에 거기까진 생각 못해봤네요.. 다음부턴 항상 의식하면서 짜야겠네요!

위에 import하는 것은 함수형 컴포넌트이므로 파스칼케이스로 작성하는게 맞는것같다고 생각합니다!

wzrabbit · 2024-10-23T05:16:40Z

src/aside/AddRestaurantModal.jsx

+import styles from "../css/RestaurantDetailModal.module.css";
+import { options } from "../datas/RestaurantData";
+function AddRestaurantModal() {


Suggested change

import styles from "../css/RestaurantDetailModal.module.css";

import { options } from "../datas/RestaurantData";

function AddRestaurantModal() {

import styles from "../css/RestaurantDetailModal.module.css";

import { options } from "../datas/RestaurantData";

function AddRestaurantModal() {

코드의 단락이나 성격이 바뀔 때마다 중간에 줄바꿈을 하듯이, import 문과 함수 컴포넌트 사이에도 한 줄을 띄워주셨으면 좋겠습니다~

사실, 공백이나 줄바꿈도 클린 코드에 기여하는 중요한 요소입니다.

네넵 명심하겠습니다!!

wzrabbit · 2024-10-23T05:18:49Z

src/aside/AddRestaurantModal.jsx

오, css module를 잘 활용해 주셨네요 😊 선택사항인데 수고 많으셨어요
그런데 css module을 혹시 사용하시고자 한 이유는 있으셨나요? 있으시다면 어떤 이유로 사용하셨는지, 그냥 css를 사용할 때랑 어떤 차이가 있는지 설명을 부탁드려도 괜찮을까요?

처음에 css module을 사용하게 된 이유는 선택사항에 있어서 그냥 무턱대고 해봤습니다.
나중에 궁금해서 찾아보니 클래스 충돌을 막는다는 장점이 있는다는 걸 알게되었습니다.
나중에 다른 사람들과 프로젝트를 할 때 만약 그냥 css를 사용한다면 잘못해서 클래스 이름이 겹쳤을 때 각자의 역할을 못하고 하나가 잡아먹을 수 있습니다. css module을 사용하게되면 충돌이 날 문제를 생각하지 않고 편하게 코딩할 수 있습니다.

맞습니다. 컴포넌트가 어떤 단점들을 해결하기 위해 탄생했는지, 컴포넌트로 챙길 수 있는 장점들이 무엇인지를 고민해 보시면 더 와닿을 수 있을 거라고 생각합니다.

wzrabbit · 2024-10-23T05:22:06Z

src/datas/RestaurantData.jsx

+import AsianIcon from "../../templates/category-asian.png";
+import ChineseIcon from "../../templates/category-chinese.png";
+import JapaneseIcon from "../../templates/category-japanese.png";
+import KoreanIcon from "../../templates/category-korean.png";
+import WesternIcon from "../../templates/category-western.png";
+import ETCIcon from "../../templates/category-etc.png";


PascalCase를 사용하신 이유가 있으실까요?

여기서 PascalCase를 사용한 이유는 코딩할때 파스칼이랑 카멜 생각을 안하고 처음 지어진걸로 통일성있게 하려다가 다 파스칼 케이스로 적어버린것 같네요

아하, 그렇군요. 통일성 있게 코드를 계속해서 작성하실 수 있도록, 통용되는 규칙을 알려드릴게요:

React를 사용하게 되었더라도 JavaScript의 변수들에 카멜 케이스를 사용하는 것은 달라지지 않습니다. 특별한 이유가 없는 상황이면 이를 유지해 주세요.

단, 컴포넌트에는 파스칼 케이스를 사용합니다.

AsianIcon 은 컴포넌트로 사용되지 않는 정적 리소스의 경로를 담은 변수로, 컴포넌트가 아닌 JavaScript의 일반 변수로써 취급되므로, 카멜 케이스를 사용하는 것이 원칙입니다.

import asianIcon from "/path"; <img src={asianIcon} />

그러나, 아래와 같이 컴포넌트로 사용되는 경우에는 파스칼 케이스로 명명하셔야 합니다.

import AsianIcon from "/path"; <AsianIcon />

wzrabbit · 2024-10-25T11:53:27Z

src/mainbody/RestaurantList.jsx

+    <>
+      <section className={styles["restaurant-list-container"]}>
+        <ul className={styles["restaurant-list"]}>
+          {restaurants.map((restaurant, index) => (
+            <li key={index} className={styles.restaurant}>
+              <div className={styles["restaurant__category"]}>
+                <img
+                  src={restaurant.icon}
+                  alt={restaurant.category}
+                  className={styles["category-icon"]}
+                />
+              </div>
+              <div className={styles["restaurant__info"]}>
+                <h3 className={`${styles["restaurant__name"]} text-subtitle`}>
+                  {restaurant.name}
+                </h3>
+                <p className={`${styles["restaurant__description"]} text-body`}>
+                  {restaurant.description}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </>


<>...</> 는 무엇을 의미할까요? 무슨 역할을 할까요?

작성해 주신 코드를 둘러봤을 때, <>...</> 를 생략할 수 있는 경우가 보이는 것 같아요. 어떤 경우에 생략할 수 있고, 어떤 경우에는 필수적으로 사용해야 할 지를, JSX의 규칙, 그리고 <>...</> 가 하는 역할과 연관지어서 설명해 주실 수 있나요?

Docs: https://react.dev/learn/writing-markup-with-jsx

<>...</> 는 추가적인 DOM 노드를 생성하지 않으면서 형제 요소를 반환할 부모 요소로 감싸는 역할을 합니다.
위에 코드를 보면 단일 요소만 반환하고 있기 때문에 생략할 수 있어보입니다.

JSX 문법에서는 여러 개의 요소를 반환하려면 반드시 하나의 부모 요소로 감싸야 하는 규칙이 있기 때문에 여러 요소들이 나열되어있는 경우 필수적으로 사용해서 하나의 부모 요소로 만들어야 합니다.

wzrabbit · 2024-10-25T11:59:10Z

src/header/Header.jsx

+    <header className={styles.gnb}>
+      <h1 className={`${styles.gnb__title} text-title`}>점심 뭐 먹지</h1>
+      <button type="button" className={styles.gnb__button} aria-label="음식점 추가">
+        <img src="../templates/add-button.png" alt="음식점 추가" />


<img src="../templates/add-button.png" alt="음식점 추가">

위와 같이 사용하는 것은 안 되는 것일까요? HTML에서의 <img> 태그는, 실제로는 닫지 않아도 문제 없이 작동하고, 유효한 문법입니다. React에서는요?

HTML 과는 다르게 JSX 문법에서는 모든 태그를 닫아야 하기 때문에 / 을 붙여야합니다

잘 파악하셨습니다. 이는 JSX를 사용할 때의 기본적인 규칙입니다. 일반 HTML 문서를 작성할 때와는 비교했을 때 좀 더 깐깐한 규칙들이 보이실 겁니다 ✏️

bae-kh · 2024-10-29T06:59:01Z

아 데이터 흐름도 열심히 만들었는데 깜빡하고 이미지 첨부를 못했습니다 지금이라도 올립니다

리액트 처음 접했을 때 처음 접하는 언어이다 보니 미션 시작을 어디서부터 해야되는지 감 잡는데도 오래걸렸고 짜놓은 코드가 어떻게 생겼는지 코드 실행하는데도 많은 어려움을 겪었습니다. 그래서 처음 리액트 실행을 어떻게 하는지 헤매다가 아래 코드를 막 적어봤던거 같습니다..

 package.json에서, "start": "react-scripts start"
package.json에서, "react-scripts": "^5.0.1"

1주차 리뷰 감사합니다!!

wzrabbit

데이터 흐름 작성하시느라 고생 많으셨습니다 👍🏻 뭘로 만드셨나요? FigJam?
구조는 전체적으로 깔끔하다고 생각하고요, 이후 미션이 진행됨에 따라 혹시 불편함을 느끼셨다면 세분화해보시는 것도 좋다고 생각합니다. 지금은 이 정도로 충분해요

그리고 package 관련 문제도 이해합니다. 갑자기 모르는 파일이 뭉텅이로 쏟아지면 당연히 어려울 수밖에 없다고 생각합니다. 그리고 ChatGPT한테 물어본 경우 CRA에 대한 정보를 위주로 답변하는 경우가 많아 의도치 않게 CRA 관련 코드가 많이 섞일 수도 있을 거에요. 이 프로젝트에서는 Vite를 사용중이므로 이후 구글링을 하실 경우에는 "Vite" 를 검색어에 넣으면서 진행하시면 정확한 정보를 많이 얻으실 수 있을 거에요

그리고 여담으로, React는 프로그래밍 언어가 아니며, JSX도 프로그래밍 언어가 아닙니다. React는 JavaScript 기반의 **라이브러리(library)**이고, JSX는 JavaScript의 **확장 문법(syntax extension)**입니다. 프로그래밍 언어와는 어떤 개념적인 차이가 있는지 알아보시면 좋을 것 같습니다 👍🏻

변경하고 싶으신 사항이 있으시다면 이제 반영해주셔도 좋습니다. 단, 2단계 미션에 반영을 부탁 드려요. 충돌할 때 좀 덜 골치아파지는 이유도 있고, 어차피 두 미션은 같은 레포에서 작업하기 때문에 1단계 미션에 반영하신다면 2단계 미션에도 이를 반영해야하는 불편함이 있기 때문이에요

wzrabbit · 2024-11-01T00:24:12Z

src/datas/RestaurantData.jsx

+import AsianIcon from "../../templates/category-asian.png";
+import ChineseIcon from "../../templates/category-chinese.png";
+import JapaneseIcon from "../../templates/category-japanese.png";
+import KoreanIcon from "../../templates/category-korean.png";
+import WesternIcon from "../../templates/category-western.png";
+import ETCIcon from "../../templates/category-etc.png";


아하, 그렇군요. 통일성 있게 코드를 계속해서 작성하실 수 있도록, 통용되는 규칙을 알려드릴게요:

React를 사용하게 되었더라도 JavaScript의 변수들에 카멜 케이스를 사용하는 것은 달라지지 않습니다. 특별한 이유가 없는 상황이면 이를 유지해 주세요.

단, 컴포넌트에는 파스칼 케이스를 사용합니다.

AsianIcon 은 컴포넌트로 사용되지 않는 정적 리소스의 경로를 담은 변수로, 컴포넌트가 아닌 JavaScript의 일반 변수로써 취급되므로, 카멜 케이스를 사용하는 것이 원칙입니다.

import asianIcon from "/path"; <img src={asianIcon} />

그러나, 아래와 같이 컴포넌트로 사용되는 경우에는 파스칼 케이스로 명명하셔야 합니다.

import AsianIcon from "/path"; <AsianIcon />

wzrabbit · 2024-11-01T00:26:04Z

src/aside/AddRestaurantModal.jsx

맞습니다. 컴포넌트가 어떤 단점들을 해결하기 위해 탄생했는지, 컴포넌트로 챙길 수 있는 장점들이 무엇인지를 고민해 보시면 더 와닿을 수 있을 거라고 생각합니다.

wzrabbit · 2024-11-01T00:34:36Z

src/header/Header.jsx

+    <header className={styles.gnb}>
+      <h1 className={`${styles.gnb__title} text-title`}>점심 뭐 먹지</h1>
+      <button type="button" className={styles.gnb__button} aria-label="음식점 추가">
+        <img src="../templates/add-button.png" alt="음식점 추가" />


잘 파악하셨습니다. 이는 JSX를 사용할 때의 기본적인 규칙입니다. 일반 HTML 문서를 작성할 때와는 비교했을 때 좀 더 깐깐한 규칙들이 보이실 겁니다 ✏️

bae-kh added 8 commits October 8, 2024 17:24

feat: compoments 와 css 구현

02f16cc

refact: modal--open 오류 수정

f6ebc31

feat: App.jsx import문 구현

80042c5

refeat: img 경로, components 경로 오타 수정

4337856

refeat: css 연결 수정

9b30b6f

refeat: componets 구조 바꾸기

a507d5c

refeat: datas 생성 후 코드 짧게 수정

5101e36

refeat: map 함수 사용해서 addmodal 수정

b0cb37c

bae-kh changed the base branch from main to bae-kh October 24, 2024 11:19

wzrabbit suggested changes Oct 25, 2024

View reviewed changes

wzrabbit mentioned this pull request Oct 25, 2024

[2단계 미션] 배강현 미션 제출합니다 #25

Open

bae-kh requested a review from wzrabbit October 30, 2024 11:23

bae-kh added 2 commits October 30, 2024 21:27

refeat-import후 줄바꿈과 <></> 생략

6a3c641

refeat-<> </> 생략

7a541c7

wzrabbit approved these changes Nov 1, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1단계 미션] 배강현 미션 제출합니다 #24

[1단계 미션] 배강현 미션 제출합니다 #24

bae-kh commented Oct 20, 2024

wzrabbit left a comment •

edited

Loading

wzrabbit Oct 23, 2024

bae-kh Oct 28, 2024

bae-kh Oct 30, 2024

wzrabbit Oct 23, 2024 •

edited

Loading

bae-kh Oct 28, 2024

wzrabbit Oct 23, 2024

bae-kh Oct 29, 2024

wzrabbit Nov 1, 2024

wzrabbit Oct 23, 2024

bae-kh Oct 28, 2024

wzrabbit Nov 1, 2024

wzrabbit Oct 25, 2024

bae-kh Oct 28, 2024

wzrabbit Oct 25, 2024

bae-kh Oct 28, 2024

wzrabbit Nov 1, 2024

bae-kh commented Oct 29, 2024

wzrabbit left a comment

wzrabbit Nov 1, 2024

wzrabbit Nov 1, 2024

wzrabbit Nov 1, 2024

[1단계 미션] 배강현 미션 제출합니다 #24

Are you sure you want to change the base?

[1단계 미션] 배강현 미션 제출합니다 #24

Conversation

bae-kh commented Oct 20, 2024

wzrabbit left a comment • edited Loading

Choose a reason for hiding this comment

1️⃣ 리뷰

2️⃣ 개발 환경

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wzrabbit Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bae-kh commented Oct 29, 2024

wzrabbit left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wzrabbit left a comment •

edited

Loading

wzrabbit Oct 23, 2024 •

edited

Loading