[김찬기] Sprint9

[cksrlcks]

요구사항

기본

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

심화

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

주요 변경사항

• app router를 사용하여 진행했습니다.
• nextauth 추가 : 로그인후 가져온 토큰을 nextauth를 통해 세션관리했습니다.
  • 이전 미션에는 context와 localstorage로 유저정보를 관리하였는데, nextjs로 옮기면서 nextauth까지 실습해보았습니다.
• 랜딩페이지, faq, privacy페이지는 static으로 빌드하도록 했습니다.
• 중고마켓, 자유게시판에서의 데이터 패칭은 서버에서 하도록 했습니다.
  • 중고마켓쪽은 이전 미션코드 그대로 client에서 데이터 패칭할때와, 서버에서 데이터 패칭할때를 번들링된 사이즈를 비교해보았습니다.
  • ssr로 개선결과 first load js가 거의 절반으로 줄어들었습니다. (227kb -> 125kb)
    

스크린샷

멘토에게

• 배포url : sprint-mission-chanki-next.vercel.app
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
• 헤더 오른쪽의 로그인 or 프로필 버튼의 렌더링 조건을 서버세션을 통해 관리하려고 했는데, 랜딩페이지가 static으로 빌드되어 사전 빌드될 당시에 세션이 없어서 로그인 버튼으로 보이는것 때문에, 클라이언트 사이드에서 세션을 체크해서 프로필 버튼이 보이도록 했습니다.
  • 실제 런타임서버에서 세션이 있지만, 사전 빌드 될 당시에는 세션이 없어서 html에 '로그인'버튼으로 랜더링됨
  • 브라우저에 static 랜딩페이지가 전달이됬을때, 세션이 있지만 static 빌드된 html을 보기때문에 로그인 버튼으로 보이게 됨
  • 첫 방문시 로그인버튼이 잠시보였다가 프로필로 바뀌는건 랜딩페이지 ssg를 위해 trade off해야할것 같습니다.
• (추가) pr이후에 parallel, route group등을 더 공부해서 적용하여, app 폴더내부를 정리했습니다.

└── 📁app
    └── 📁(auth)
        └── 📁_components
        └── layout.tsx
        └── 📁login
            └── page.tsx
        └── 📁signup
            └── page.tsx
    └── 📁(common)
        └── 📁(board)
            └── 📁addBoard
                └── page.tsx
            └── 📁boards
                └── 📁(lists)
                    └── 📁_components
                    └── 📁@all
                        └── loading.tsx
                        └── page.tsx
                    └── 📁@best
                        └── loading.tsx
                        └── page.tsx
                    └── layout.tsx
                    └── page.tsx
                └── 📁[id]
                    └── loading.tsx
                    └── page.tsx
        └── 📁(etc)
            └── 📁faq
                └── page.tsx
            └── 📁privacy
                └── page.tsx
        └── 📁(landing)
            └── 📁_components
            └── page.tsx
        └── 📁(market)
            └── 📁_components
            └── 📁addItem
                └── page.tsx
            └── 📁items
                └── 📁(lists)
                    └── 📁_components
                    └── 📁@all
                        └── loading.tsx
                        └── page.tsx
                    └── 📁@best
                        └── loading.tsx
                        └── page.tsx
                    └── layout.tsx
                    └── page.tsx
                └── 📁[id]
                    └── 📁@comments
                        └── loading.tsx
                        └── page.tsx
                    └── 📁@detail
                        └── loading.tsx
                        └── page.tsx
                    └── layout.tsx
                    └── page.tsx
            └── 📁modifyItem
                └── 📁[id]
                    └── page.tsx
        └── layout.module.css
        └── layout.tsx
    └── 📁api
        └── 📁auth
            └── 📁[...nextauth]
                └── route.ts

[cksrlcks]

서버 런타임환경에서 데이터를 요청할때
서버에 세션이 있으면 헤더에 토큰을 넣어보내도록했습니다.
(중고마켓 게시물 상세페이지를 요청할때 토큰을 넣어보내면, 좋아요를 눌렀는지 판별해서 보내주는것 때문에 넣게 되었습니다.)

클라이언트 사이드에서 인터셉터는 프로젝트 루트쪽에 컴포넌트를 끼워두웠습니다. useEffect코드안에서 interceptor를 설정했습니다.

[cksrlcks]

조금더 고민을 해보니까 "use server"를 이용해보면 좋을것 같아서,
앱시작점에서 "use server" 지시어를 달고 있는 인터셉터 함수파일을 실행하는 방향으로 바꾸었습니다.

[cksrlcks]

클라이언트 사이드에서 토큰 재발급후에, nextauth에게 어떻게 바뀐 토큰을 알려주는지 찾아보다가
update를 알게되어서 사용했습니다.