[양정화] sprint9

[junghwa1996]

요구사항

기본

• 자유 게시판 페이지 주소는 “/boards” 입니다.
• 전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
• 게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
• 게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

• 반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
• next의 data prefetch 기능을 사용해봅니다

주요 변경사항

• vite -> next.js 마이그레이션
• fetch 함수에서 axios 라이브러리 사용
• styled components 와 기능 컴포넌트 결합하여 하나의 파일에서 관리
• api 통합
• next로 마이그레이션 하면서 폴더구조 변경
• 배포 netlify -> vercel
• 로그인 시 로컬 스토리지에 저장하여, 로그인 상태 유지
• 없는 이미지 처리 작업은 다음미션에 추가작업해서 올리겠습니다
• 메인, 로그인 페이지 마이그레이션 완료

회원가입은 다음 미션때 추가해서 PR 올리겠습니다

배포

https://pana-market-fe-11.vercel.app/items

스크린샷

멘토에게

• prefetch은 React Query 이용해서 구현 예정입니다
• CSR에서 SSR로 마이그레이션 되면서, useReSizing과 같은 클라이언트 측에서 계산이 필요한 커스텀훅이 정상동작 하지않는것같습니다. SSR 단계에서 기본값설정은 해주었으나 아직 자잘한 이슈가 있는듯하여, 해당 이슈는 다음 미션때까지 보완해서 PR 올리겠습니다.
• api 요청 함수들이 호출될때 try catch 가 반복적으로 들어가니 페이지 컴포넌트 자체가 너무 지저분해서 커스텀 훅으로 제작해 사용하려했으나 axios로 변환 과정 중 에러가 심해 다시 손봐야할것같아서 useAsyncRequest 훅은 다시 제거했습니다. 해당 부분은 React Query 사용하면서 개선이 될것같아서 해당 커스텀 훅도 리팩토링 예정 입니다
• styled components를 Next에서 사용하기 위해서 FOUC 이슈 해결 가능한 코드를 추가 작성 했습니다. css-in-js를 쓰게되면 추가세팅은 어쩔수없는 부분인걸까요? Next에서는 tailwind를 권장하고, 이전 버전에서도 css-in-js는 SSR의 렌더 방식 특성상 스타일이 적용되기 전의 깜빡임 현상이 있었는데 많이 개선되었다고하여서 그냥 진행했는데...emotion 또한 추가 설정을 진행하나요?
• SSR과 css-in-js는 많이 안좋은지 궁굼합니다. 저는 개인적으로 tailwind를 선호하지않는 이유중에 하나가 JSX가 스타일 태그로 더럽혀진다고 생각해서 꺼려지는게 있습니다. styled components로 작업하기전에는 scss를 사용하였으나, 동적 스타일링에 좀 더 편한 styled components로 마이그레이션 한거였는데 SSR에서는 이러한 불편함이 있어서 고민입니다
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[jyh0521]

고생하셨습니다! 잘만들어주셨네요 👍 서버사이드 렌더링에서 css in js를 쓰기 위해서 추가 세팅을 해줘야 하는건 어쩔 수 없는 부분입니다. 추가로 서버사이드에서도 잘 동작하는 zero runtime css in js를 쓰는 것도 방법이 될 수 있습니다.

[jyh0521]

이렇게 되면 아무런 key나 value가 입력될 수 있어서 타입을 지정한 의미가 크게 없어질 것 같습니다. 이 곳에서 사용될 key와 value를 지정해주셔도 좋을 것 같아요.

[junghwa1996]

해당 타입을 사용하는 useState훅에 담긴 변수는 formValidation.ts utils 함수에서 가져온 값을 기반으로 타입정의를 해놓은거라
유효성 검사가 필요한 다른 케이스가 추가되면 따로 타입 설정없이 편하게 하려고 한거긴합니다..!! 너무 엄격하게 하면 DX를 해칠것같기도 해서요... 이부분은 멘토링 때 한번 다뤄주실수있나요?