Conversation
There was a problem hiding this comment.
컴포넌트 구조가 깔끔하고 체계적입니다!! list, page, ui 폴더로 역할별 분리하고, 각 컴포넌트가 단일 책임을 가지도록 잘 설계하신 것 같아요. 특히 재사용 가능한 UI 컴포넌트들을 분리한 것이 정말 좋은 접근이니 나중에도 써보시면 좋을 것 같아요! 그리고 hover 효과나 반응형 레이아웃까지 신경 써서 사용자 경험을 고려한 것 같아 좋습니다! 특히 MainPage의 카드 디자인과 그림자 효과가 맘에 듭니다 ㅎㅎ
PR Point에 대한 답변을 드리자면,
처음에 할 땐 좀 감이 안 잡힐 수 있어요! 괜찮아요! 저도 그랬으니까요 ㅎㅎ
하지만 전 이렇게 계속 될 때까지 도전했는데
- 기능 하나 정하기: 예: “댓글 입력하고, 목록에 추가”
- 직접 작성 시도 (몰라도 써보기)
- 안 되면 구글/ChatGPT에 질문
- 작동 → 리팩토링 → 상태 나누기, props 정리
안 되면 예제 코드 따라 치면서 코드 분석하기
이걸 반복하다 보니 감이 생기더라고요! 그냥 따라 치거나 복사하고 붙여넣기가 아니라, 하나의 컴포넌트가 어떤 역할을 하는지, 어디에 위치하는지를 생각하면서 머리에 구조화를 해보면 익숙해질 수 있어요!
| { | ||
| "id": 3, | ||
| "title": "퉁퉁이 엄마의 이름은?", | ||
| "content": "모퉁이입니다....", |
There was a problem hiding this comment.
이 파일도 node_modules 폴더와 관련한 리뷰와 동일하게, 바깥의 yarn.lock 삭제해도 됩니다! 아마 바깥에서 yarn이나 yarn install을 실행한 것 같은데,
프로젝트 폴더 외부에서 yarn install이 바깥에서 실행되면, Blog/package.json이 없는데도 node_modules, yarn.lock을 생성하려고 시도합니다. 프로젝트 의도와 안 맞는 위치에 lockfile이 생기니 주의해주세요!
There was a problem hiding this comment.
week03/youkyeong/ 폴더 바로 아래에 node_modules와 yarn.lock이 생성되어 있는데, 아마 루트가 아닌 상위 폴더에서 yarn install이 실행된 것 같아요.
실제 프로젝트(youkyeong/) 내부의 package.json과 연동되지 않은 상태로 설치된 거라, 현재 node_modules 안에는 .yarn-integrity만 있고, 실제 의존성은 설치되지 않은 상태입니다.
혼동을 줄이기 위해 node_modules, yarn.lock은 루트 디렉토리(youkyeong/ 폴더) 안에서만 관리되도록 하고, 바깥에 생긴 파일은 삭제해주시면 좋을 것 같아요!
| background: white; | ||
| padding: 32px; | ||
| border-radius: 12px; | ||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| const handleSubmit = () => { | ||
| if (comment.trim()) { | ||
| onSubmit(comment); | ||
| setComment(""); |
There was a problem hiding this comment.
빈 댓글 방지 (comment.trim()) 와 함께 제출 후 입력 필드 초기화 로직까지 굿!!
2 participants
✨어떤 과제를 수행했나요?✨
3주차 react로 블로그 만들기
✨어려웠던점, 트러블슈팅✨
기초적인 개념만 알고 있어서 코드를 어떻게 작성해야 하는지부터 막막했습니다.
전체적인 구조를 파악하기 위해 블로그 코드를 참조하면서 어떻게 코드를 짜야 하는 지 파악했습니다.
🤔 PR Point
코드에 관한 질문은 아니지만 react로 코드를 짤 때 감이 잘 안 잡힙니다... 개념을 블로그나 티스토리로 꼼꼼히 보고 공부를 했지만 실제로 코드를 짜는 데는 격차가 크게 느껴졌고 react로 프로그램을 짤 때는 어떤 식으로 공부를 해야할 지 모르겠습니다.