피드백 - 윤창식 튜터

[CaesiumY]

개요

수빈님 안녕하세요! 수빈님의 코드 리뷰는 항상 마지막에 하게 되는 거 같아요. 먼저 봤다가 눈이 높아져버리면 다른 분들 코드 리뷰에 지장이 가거든요ㅎㅎㅎ 그럼 이번에도 기대하면서 코드 리뷰 해볼게요! 물론 재제출 전의 커밋을 바탕으로 진행하겠습니다!

개선 점

Prettier 세팅

https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/shared/Router.jsx#L16-L46 https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/.prettierrc#L3-L4

• Prettier 세팅을 이렇게 해둔 건 의도적인 부분일까요? 제가 보기엔 tabWidth가 너무 커서 오히려 코드를 읽기 힘든 거 같아요...!

  중첩된 라우트 사용

  https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/shared/Router.jsx#L19-L42

• 이렇게 ProtectedRoute가 여러 곳에 들어가면 딱 봐도 중복되는 게 느껴지죠?
• 이럴 때는 중첩된 라우트를 사용해서 ProtectedRoute를 일종의 레이아웃처럼 사용하면 좋아요!
• 고쳐보면 다음과 비슷하겠네요.

  <Route element={<ProtectedRoute />}>
  <Route path="/profile" element={<Profile />} />
  <Route path="/testpage" element={<Test />} />
  <Route path="/testResultPage" element={<TestResult />} />
  </Route>

페이지 컴포넌트 구분

https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/pages/Home.jsx#L5-L6

• pages에 있는 컴포넌트들은 말 그대로 페이지의 역할을 하죠?
• 그러니 컴포넌트 이름 뒤에 Page라고 명시해주면 어떨까요?
  • HomePage, LoginPage 이런 식으로요!

유틸 함수로 분리

https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/pages/TestResults.jsx#L45-L48

• 여기 formatDate 같은 함수는 유틸성을 지니고 있고, 다른 컴포넌트에서도 필요할 수도 있어보여요!
• 그러니 유틸 함수로 분리하는 건 어떨까요?

  좋은 점

  Zustand 사용

  https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/zustand/useUserStore.js#L4-L47

• Zustand를 아주 잘 활용하고 계시네요!
• 직접 써보니 어떤가요? useContext나 Redux 보다 더 쉽죠?

Tailwind CSS 사용

https://github.com/hansub1n/Tiramisucake/blob/3a41011c57cd2deddbcd3aff72fba44d402d85f0/src/components/TestResult.jsx#L12-L29

• tailwind css를 굉장히 잘 활용해주셨군요?!
• 트랜지션에, absolute에... css에 대한 이해도가 높으니 이렇게 잘 사용할 수 있었다고 생각됩니다.
• 앞으로는 tailwind css만 사용하게 될 수도 있는데 사용감이 어땠는지 궁금하네요!

깃허브 활용

• 브랜치도 나눠서 작업 진행해주시고, 커밋 내역도 잘 작성되어 있어서 좋았습니다!
• 리드미도 잘 작성해주셨네요!
• 시간도 얼마 안 들고 사소한 것이지만 프로젝트의 완성도와 전문성을 높이는 가장 효율적인 방법이니 계속 이어나가 주세요!

마무리

수빈님은 좋은 점에 무엇을 써야 할까 찾기가 힘들었어요... 왜냐면 모든 코드가 좋았기 때문이죠!! 딱히 큰 개선점도 찾기 힘들었고, 모든 코드의 퀄리티가 좋아서 역시 기대를 저버리지 않았다는 느낌이 듭니다:) 이제 여기서 Tanstack Query만 잘 적용해보시면 더 좋을 거 같은 생각이 드네요! 커스텀 훅까지 잘 곁들여 쓰신다면 훨씬 더 훌륭한 코드로 거듭날 것 같습니다. 그럼 이번 과제 수고 많으셨고, 다음에도 좋은 코드 기대하고 있겠습니다!!

[hansub1n]

항상 좋은 말씀 감사합니다!! 더 노력하겠습니다