Conversation
pangkyu
left a comment
pangkyu
left a comment
There was a problem hiding this comment.
전체적으로 깔끔하게 코드 작성해주신 부분 잘 확인했습니다!
hydration으로 잘 작성하지 못했는데 종민님 코드보면서 배워가겠습니다 :)
코드를 보다가 궁금한 부분이 생겨서 의견 남깁니다
-
Depth.tsx들이 카테고리에 마우스를 올렸을 때 펼쳐지는 컴포넌트라고 보여지는데, Depth1, Depth2, Depth3로 따로 분리하신 이유가 궁금합니다. -
코드를 작성하다보니 어떤 기준으로
use client의 사용 유무를 결정하는 지 인사이트가 부족하다고 생각이들었는데, 종민님은 어떤 기준으로 결정하시는 지 궁금합니다.
| @@ -0,0 +1 @@ | |||
| NEXT_PUBLIC_BASE_URL=https://objects-mb.com/ No newline at end of file | |||
There was a problem hiding this comment.
넵 제가 체크를 못하고 넘겼네요... 이부분도 고쳐놓도록 할게요!
hover 체크하기에 용이하도록 구현했습니다.
서버에서 넘겨주는 값들이 재귀적으로 속성을 물고 들어가게 되기 때문에 이쪽이 가독성 측면과 유지보수 측면에서 더 나을 것이라는 판단 때문에 Depth를 구분지어 줬습니다.
'use client' 같은 경우는 이벤트 핸들러나 state 관리를 사용해야 하는 경우에 대해서만 사용하는 것을 원칙으로 작성하고 있었습니다.
만약 서버 컴포넌트을 작성하다가 state가 필요할 것 같다 싶으면 해당 부분만 따로 빼서 클라이언트 컴포넌트로 작성했습니다.
또한, 클라이언트 서버에서 백엔드 서버에 요청을 하는 게 더 빠를 가능성이 높고, 보안에 유리하다는 장점이 있기 때문에 최대한 서버에서 데이터를 prefetch 하고, 클라이언트에서 hydration하는 형태로 코드를 작성하고 있습니다!
There was a problem hiding this comment.
.env.local 로 통일하면 좋을 것 같습니다. 특별한 기준은 없고, 처음부터 세팅할 때 .env.local로 등록되어 있어서 그걸 활용했는데, 같이 통일하면 좋을 것 같습니다.
There was a problem hiding this comment.
그리고 한 가지 궁금한 거 여쭤볼께요~
NEXT_PUBLIC_BASE_URL='https://objects-mb.com'
환경변수 설정할 때 single quote 하는 것과 안 하는 것 둘다 동작은 하는 것 같은데, 혹시 둘의 차이를 아시나요?
There was a problem hiding this comment.
보통 환경변수 설정할 때 ''은 안해주는 걸로 알고 있어요!
.env.local로 변경해보겠습니다!
There was a problem hiding this comment.
저도 .env.local로 맞추겠습니다!
환경변수 같은 경우에는 공식문서상에서 따옴표를 붙이지 않아서 저도 안붙이는 방향으로 개발하고있습니다.
| const [hoverNum, setHoverNum] = useState(0); | ||
|
|
||
| const isHover = !!hoverNum; | ||
| console.log(depth2List); |
There was a problem hiding this comment.
불필요한 주석 및 콘솔 로그를 제거해주시면 코드 가독성이 더 좋게 보일 것 같다고 생각해요!
There was a problem hiding this comment.
넵 이부분도 다시 체크해보겠습니다!
|
저도 하이드레이션 하는 부분을 좀 신경써서 본 것 같습니다. 그 부분 코드 많이 들여다보고 저도 서버 컴포넌트의 역할과 클라이언트 컴포넌트의 역할에 대해서 좀 더 고민해보면서 코드를 작성해야겠다는 생각이 들었습니다. 덕분에 어떤 식으로 활용할지에 대한 감도 조금씩 잡히는 것 같고요! 고생하셨습니다! |
3 participants
🔍️ 이 PR을 통해 해결하려는 문제가 무엇인가요?
✨ 이 PR에서 핵심적으로 변경된 사항은 무엇일까요?
🔖 핵심 변경 사항 외에 추가적으로 변경된 부분이 있나요?
🙏 Reviewer 분들이 이런 부분을 신경써서 봐 주시면 좋겠어요
🩺 이 PR에서 테스트 혹은 검증이 필요한 부분이 있을까요?
📌 PR 진행 시 이러한 점들을 참고해 주세요
📝 Assignee를 위한 CheckList