Conversation
There was a problem hiding this comment.
folder페이지 데이터 로딩 시간이 많이 걸리는 원인을 모르겠습니다...
링크 리스트를 표시하는 부분에 ErrorComponent 가 오래 표시된다는 뜻일까요??
그거라면 linksByQuery 를 불러오는 걸 봤을 때 folders 를 불러오고 links 를 불러오도록 동기 처리되어 그런거 아닐까 유추해봅니당.
로딩이 오래걸리는 걸 어떤 걸 보고 판단했는지, ui 라면 렌더링하는 조건은 뭔지, 그 값을 어떻게 가져오는 지 등을 살펴볼 수 있을 것 같습니다.
고생하셨습니다 👏
|
|
||
| function FolderPage() { | ||
| const [linksByQuery, setLinksByQuery] = useState([]); | ||
| const [Folders, setFolders] = useState([]); |
There was a problem hiding this comment.
상태 변수는 카멜 케이스로, 소문자로 시작하도록 일관성을 맞춰주세요~
| setLinksByQuery(linksByQuery.data.folder); | ||
| setUser(user.data[0]); | ||
| setName(name.data[0].name); | ||
| setFolders(Folders.data.folder); |
There was a problem hiding this comment.
folderid 가 변경될 때 fetchData 가 실행되면서 전체 폴더, 폴더에 있는 링크들, 유저, 폴더 정보 요렇게 총 네가지를 다시 불러오고 있습니다.
유저 정보 같은건 새로 불러오지 않아도 될 것 같은데 네가지 모두 다 불러와야하는지 검토해보시면 좋을 것 같아요~
There was a problem hiding this comment.
index 와 folderId 페이지로 나눠주신 이유가 있나용?
파일명 컨벤션 중에 optional 로 segment 값을 받을 수 있는게 있습니다. 요걸로 하나의 페이지로 작업해볼 수 있을 것 같습니다!
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments
There was a problem hiding this comment.
pages 폴더도 src 하위로 옮겨주세요~
| axiosInstance.interceptors.request.use( | ||
| (config) => { | ||
| // 로컬 스토리지에서 signInToken 가져오기 | ||
| const token = localStorage.getItem("signInToken"); | ||
| if (token) { | ||
| config.headers.Authorization = `Bearer ${token}`; | ||
| } | ||
| return config; | ||
| }, | ||
| (error) => { | ||
| return Promise.reject(error); | ||
| } | ||
| ); |
There was a problem hiding this comment.
인터셉터로 헤더 값에 일괄 적용되도록 설정해주셨네요 👍
|
|
||
| // useEffect(() => { | ||
| // onChangeName(selectedId); // eslint-disable-next-line | ||
| // }, [selectedId]); | ||
|
|
||
| // const onChangeName = (id) => { | ||
| // const nameById = | ||
| // id && folders ? folders.find((item) => item.id === id)?.name : "전체"; | ||
| // setName(nameById); | ||
| // }; |
요구사항
vercel배포 주소:
기본
심화
주요 변경사항
스크린샷
멘토에게