[정지성]Week15

[Byukchong]

요구사항

기본

• 링크 공유 페이지의 url path를 ‘/shared/{folderId}’로 변경하고, {folderId}에 해당하는 폴더 데이터가 화면에 보이게 해주세요.
• 폴더 페이지의 url path를 전체 링크를 보는 경우 ‘/folder’로, 특정 폴더를 보는 경우 ‘/folder/{folderId}’로 변경하고, {folderId}에 해당하는 폴더 데이터가 화면에 보이게 해주세요.
• https://bootcamp-api.codeit.kr/docs 에서 인증이 필요한(자물쇠 아이콘이 있음) api의 경우 Authorization 리퀘스트 헤더에 “Bearer {accessToken}”을 함께 보내야 합니다.

심화

• [] 리퀘스트 헤더에 인증 토큰을 첨부할 때 axios interceptors를 활용해 주세요. (axios를 사용하지 않는다면 이와 유사한 기능을 활용해 주세요.)

주요 변경사항

스크린샷

https://5-weekly-mission-3rhozkw8o-byukchongs-projects.vercel.app

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[o-seung-yeon]

페어프로그래밍 했던 부분 복기 해보셨을까요?
고생하셨습니다 👏

[o-seung-yeon]

로그아웃 기능도 구현해주셨네요 👏

[o-seung-yeon]

요거 제가 이렇게 처리하긴 했지만 타입 가드를 이용해서 더 깔끔하게 처리할 수 있으니 참고해보세요~

// util
const isStringQuery = (value: unknown): value is string => {
  return typeof value === 'string';
}

// hook
const useRouterQuery = (segmentName: string) => {
  const { query } = useRouter();

  const segment =  query[segmentName];

  if (!isStringQuery(segment)) {
    return;
  }
  return segment;
}

그냥 코멘트로 남기는 코드라 동작이 되는지는 모르겠네요.. ㅎㅎ 한번 확인해보시고 수정해서 적용해보세요~

[o-seung-yeon]

index 와 folderId 페이지로 나눠주신 이유가 있나용?

파일명 컨벤션 중에 optional 로 segment 값을 받을 수 있는게 있습니다. 요걸로 하나의 페이지로 작업해볼 수 있을 것 같습니다!
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments

[o-seung-yeon]

앗 불필요한 주석은 삭제해주세요~

[o-seung-yeon]

number 도 허용하는 이유가 있을까요?
하나로 통일해서 처리할 수 있으면 그렇게 하는게 좋을 것 같습니다.