Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| useEffect(() => { | ||
| const checkAccessToken = async () => { | ||
| const accessToken = localStorage.getItem('accessToken'); | ||
| if (!accessToken) await router.push('/signin'); | ||
| }; | ||
|
|
||
| checkAccessToken(); | ||
| }, [router]) |
There was a problem hiding this comment.
액세스 토큰을 확인하는 로직이 페이지마다 있을 필요는 없어보입니다!
최상단에서 체크해주면 될 것 같아요.
| const { data } = await getSharedFolderOwner(userId); | ||
|
|
||
| if (!folder) return; | ||
| if (!data[0]) return; |
There was a problem hiding this comment.
문제 상황 2번: 데이터를 불러오고 처리하는 부분에 있어서 리스폰스가 { data: [ { ... } ] } 이런 구조로 오기에 구조분해할당 후 0번 인덱스로 데이터를 특정지었는데요, 다른 부분에서는 문제가 없는데, 유독 /shared/[folderId] 페이지의 getFolderData 부분에서만 에러가 발생합니다. 무엇이 원인인지 모르겠습니다.
data가 undefined인데, 0번 인덱스에 접근하고자 하니 문제가 발생합니다.
즉, undefined.[0] 을 한 것과 같아요!
undefined는 객체(배열)가 아닌데, 객체로 접근하려고 하니 문제가 발생합니다.
이런 경우에는, API 응답이 잘 왔는지 여부를 따로 파악하는 것이 좋아보여요.
로딩 중인 경우와 응답에 실패했을 경우에 대해 정의할 수 있으면 좋겠습니다.
React Query를 쓰면 이런 부분을 상당 부분 도와줍니다.
| useEffect(() => { | ||
| const checkAccessToken = async () => { | ||
| const accessToken = localStorage.getItem('accessToken'); | ||
| if (!accessToken) await router.push('/signin'); | ||
| }; | ||
|
|
||
| checkAccessToken(); | ||
| }, [router]) |
There was a problem hiding this comment.
이게 지금 모든 페이지에 있는 것 같은데, 최상단에서 처리해주면 되지 않을까요?
모든 페이지에 모두 따로 작성을 하게 되면, 중복되는 코드가 많아지고 이는 변경사항이 생겼을 때 모든 페이지에 적용해주어야 합니다.
| const getProfileData = async () => { | ||
| const { data } = await getUserInfo(); | ||
|
|
||
| if (!data[0]) return; | ||
|
|
||
| setProfileData(data[0]); | ||
| setIsLoginStatus(true); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| getProfileData(); | ||
| }, []); |
There was a problem hiding this comment.
마찬가지로 프로필 정보를 조회하는 부분도 프로필 정보가 필요한 부분에서만 요청되면 될 것으로 보여요!
이러면 페이지 이동할 때마다 매번 프로필 정보를 요청하게 됩니다.
프로필 정보를 1회 요청해서 어디 보관해두거나 React Query와 같은 라이브러리를 통해 적절히 캐싱해두는 전략이 필요해보여요!
|
|
||
| return ( | ||
| <> | ||
| <NavigationBar className="folderNav" profileData={profileData} isLoginStatus={isLoginStatus}/> |
There was a problem hiding this comment.
네비게이션바는 레이아웃의 형태로 잡는 게 좋을 것 같아요.
| import Image from "next/image"; | ||
| import AddModal from "@/modal/addModal/AddModal"; | ||
| import PlusIcon from "@/public/images/Icon_plus.svg"; | ||
| import Button from "./Button"; |
There was a problem hiding this comment.
문제 상황 1번: 폴더 버튼에 대해서 styled-component로 버튼을 만들어 둔 것이 있어 각 폴더 name에 대해 이를 적용해 주었는데요, 특이한 점이 있다면 api로 불러오는 다른 폴더들과는 달리 전체 폴더 버튼은 따로 만들어야 했습니다. 그래도 같은 styled-component를 적용하면 같은 스타일이 적용되어야하는 것 아닌가요? 전체 버튼에 적용된 스타일이 적용이 되지 않는 현상이 자주 발생하고 있습니다. 주로 발생하는 에러 메세지는 Prop className did not match. 입니다.
Button 컴포넌트가 Styled Component인데,
Styled Component가 hash된 className을 찾아서 스타일을 적용시키는데,
Next.js SSR를 사용하고 계셔서 서버의 className값과 클라이언트의 className값이 달라져서 적용하려는 className이 없다 라는 오류를 띄웁니다.
해결 방법으로는, 아래 링크를 확인해주세요.
vercel/next.js#46605 (comment)
그리고 해당 문제는 정말 많은 사람들이 겪은 문제입니다. 검색을 통해 충분히 문제점을 파악해 수정할 수 있었던 부분으로 보여요.
검색을 잘 하는 것은 개발자에게는 정말 중요한 것 같아요!
발생했던 오류의 오류 이름만 검색해도 다양한 검색 결과에서 문제를 해결하실 수 있었던 것으로 보입니다!
| if (id === 0) return router.push('/folder'); | ||
| router.push(`/folder/${id}`) |
There was a problem hiding this comment.
문제 상황 3번: - /folder에서 /folder/[folderId] 페이지로 넘어갈 때, 버튼을 클릭하면 해당 폴더의 id 값으로 이동하도록 구현했는데, 처음으로 전체 폴더가 아닌 다른 폴더 버튼을 클릭했을 때, 클릭한 폴더 id 값이 14면 /folder/14로 이동해야 하는데 꼭 처음 페이지 이동이 될 때에만 /folder/0 으로 이동합니다. 두 번째, 세 번째 등등 이후 클릭에서는 폴더 id에 맞게 잘 이동하기에 어디에 문제가 있는 것인지 잘 모르겠습니다.
구현해주신 웹페이지에서 폴더 추가가 안되어서 제가 직접 확인이 불가능한데요,
코드를 봤을 때 해당 로직에서 id값으로 넘겨받는 인자가 잘 들어오는지 콘솔 찍어서 확인해보셔야 할 것 같아요.
문제가 발생하는 코드는 여기로 보입니다.
| if (id === 0) return router.push('/folder'); | |
| router.push(`/folder/${id}`) | |
| console.log('## debug', name, id) | |
| if (id === 0) return router.push('/folder'); | |
| router.push(`/folder/${id}`) |
yanggak12
merged commit e5cf308
into
codeit-bootcamp-frontend:part3-양서연
요구사항
기본
심화
주요 변경사항
스크린샷
/folder/[folderId] 페이지
/shared/[folderId] 페이지
문제 상황 1
문제 상황 2
문제 상황 3
멘토에게
classNamedid not match. 입니다.