코드 리뷰

[whdgnszz1]

안녕하세요! 작성해주신 코드 잘 확인했습니다.

1. /app/(chat-nav)/chat 폴더 내의 채팅 기능 부분에 대한 피드백을 받고 싶습니다.

• 1-1. chat/page.tsx 현재 ChatRooms 컴포넌트에서 데이터 페칭과 UI 렌더링이 모두 이루어지고 있습니다. 이를 분리하여 데이터 페칭 로직과 UI 로직을 분리하여 관리하는 것이 좋아보입니다. map 함수에서 idx를 키로 사용하고 있는데, 이는 리스트 아이템의 순서가 변경될 경우 문제를 일으킬 수 있습니다. 대신 고유한 식별자인 item.roomId를 키로 사용하는 것이 좋습니다. 날짜를 포맷팅하는 로직이 JSX 내부에 있습니다. 이를 별도의 함수로 분리하여 util함수로 관리하는 것이 좋아보입니다.
• 1-2. chat/addChat/layout.tsx 검색 바 부분을 별도의 SearchBar 컴포넌트로 분리하는 것이 좋아보입니다.
• 1-3.chat/addChat/page.tsx map 함수에서 idx 대신 고유한 식별자를 키로 사용하는 것이 좋아보입니다. UserList 컴포넌트를 별도의 파일로 분리하여 관리하는 것이 좋아보입니다.
• 1-4. chat/editRoom/page.tsx 체크박스를 포함한 ChatRoomItem을 별도의 컴포넌트로 분리하여 관리하는 것이 좋아보입니다. 추가적으로 map 함수에서 idx 대신 item.roomId를 키로 사용하는 것이 좋아보입니다.
• 1-5. /chat/room/[id]/page.tsx 메시지 입력창과 메시지 리스트를 별도의 컴포넌트로 분리하면 좋을 것 같습니다. 추가적으로 소켓 연결 및 이벤트 처리는 context를 사용하여 하위 컴포넌트에서 socket client를 props로 넘겨받아 사용하시는 것이 좋아보입니다.

2. 채팅 서버는 아래 깃허브 프로젝트에 있습니다. 서버 구축을 aws에 해야할까요?

• 채팅 서버 뿐만아니라 모든 서버를 AWS로 구축해보는 것도 도움이 될 것 같습니다. 가능하다면 main브랜치에 있는 내용들은 AWS에 배포해보시는 것이 좋아보입니다.

3. 메인페이지 prefetchInfiniteQuery

• 작성해주신 내용으론 판단하기 어려울 것 같습니다. 하지만, 현재 화면상으로 LCP를 결정하는 요소 중 가장 큰 요소는 이미지 부분이 맞는 것으로 보입니다. 따라서 이미지에 대한 내용을 확인해보시면 좋을 것 같고, 해당 이미지만이 아닌 보고서 세부 항목도 첨부해주시면 좋을 것 같습니다!

[wnwlals13]

@whdgnszz1 감사합니다!