[이동혁] sprint8

[hyuk-dev]

요구사항

기본

• [ x ]

심화

• [ x ]

[rjc1704]

게시물 목록 페이지의 경우, 동적으로 내용이 자주 변하고 검색엔진노출이 중요하지 않은 경우가 많습니다. 이 경우에는 getServerSideProps 가 실행되는동안 UI를 blocking 하는 SSR 방식보다는 정적인 UI 먼저 보여주고 api 를 통한 동적인 UI는 조금 후에 보여주는 CSR 방식이 UX 측면에서 더 좋은 선택일 수 있습니다.

[rjc1704]

이 코멘트를 기점으로 위의 베스트 게시글 UI 파트와 아래의 일반 게시글 UI 파트는 별도의 컴포넌트로 분리부터 해주시는 것을 권장 드립니다. 페이지 컴포넌트 내에서 관리하는 상태들이 많고 상태 변경 관련 비즈니스 로직들이 UI과 엮여서 복잡해 보입니다. 가장 먼저 컴포넌트 분리부터 하시고, 분리가 끝나면 각 컴포넌트 안에 있는 useState 과 useEffect 와 같은 상태 및 비즈니스로직들을 커스텀훅으로 분리해내는 것까지 해보시면 아주 좋을 것 같습니다.

[rjc1704]

동혁님 스프린트 작업하시느라 고생많으셨습니다! 타입스크립트까지 사용하면서 대부분의 요구사항들을 잘 만족하면서 작업하셨네요.
몇가지 코멘트들을 아래에 드리겠습니다.

• Next.js Page Router 에서 pages/ 폴더안에 있는 js파일들은 url path 로 취급됩니다. 따라서 소문자로 write.tsx, edit.tsx 잘 사용하셨는데, url path 명칭과 함수 컴포넌트명을 일치시키는 다소 어색할 수 있습니다. Write 이라는 컴포넌트명은 동사형으로 리액트 컨벤션에 맞지 않습니다. PostWritePage 정도로 명칭 수정해보고 Edit 컴포넌트도 마찬가지 방식으로 적용해 보시면 더 좋겠습니다.
• /pages/board/post/write.tsx 에 있는 submit 함수처럼 함수명칭을 submit 과 같은 일반동사 사용하는 것은 목적과 의도가 명확하지 않아 지양해야 합니다. 이벤트 핸들러로 사용된다면 handleSubmit 이나 onSubmit 으로 리액트에서 주로 사용합니다. 추가로 입력란(input,select,textarea) 과 제출버튼(button)이 있는 UI의 경우에는 부모태그를 form 태그로 해주는 것이 semantic 한 웹 표준입니다. 제출 이벤트핸들러는 으로 해주는 것을 권장 드립니다.
• types/ArticleCard.ts 파일에 article 관련 타입을 정의해두셨는데, 컴포넌트의 경우만 PascalCase 로 파일명을 작성해주시고, 컴포넌트가 아닌 경우는 camelCase 로 types/article.ts 정도로 파일명을 관리하시는 것이 리액트 컨벤션입니다.
• functions/ 라는 폴더명은 일반적으로 리액트에서는 사용하지 않습니다. 안에 있는 파일을 살펴보니 여기저기서 import 해서 재사용할 수 있는 유틸리티 함수들로 utils/ 폴더명으로 변경해서 관리하시는 것이 좋겠습니다.