WIL 13주차 (실전프로젝트 마지막주차)
📖 WIL 13주차 (실전프로젝트 마지막주차)
🌞 회고
✅ 드디어 배포된 우리의 학습관리 스케줄러 서비스 바로가기 ✅ SeaTUDY.Readme 보러가기 ✅ 항해 99의 마지막 최종발표 영상 보러가기
금요일 드디어 항해99의 종착지인 실전프로젝트 최종발표를 했다. 최종 발표 전 배포를 시작해야 유저테스트 후 받은 피드백으로 수정할수 있었다. 예상 보다 조금 늦어진 화요일에서야 배포를 하고 유저테스트를 받아볼 수 있었는데 디자이너 없이 정말 고생한 우리 팀원들에 대한 칭찬이 많아서 뿌듯했다.배포 후 최종발표까지 피드백을 바탕으로 개선해나갔고 성능 개선을 위해 프로젝트를 최적화했다.
🌞 유저피드백
- 달력 바깥을 눌렀을때도 달력이 없어졌으면 좋겠습니다.
- 물고기마다의 달성치같은걸 미리 볼수있으면 좋을것 같습니다. 얼마정도해야 다음단계로 넘어갈수있는지 지금상태로 알수가 없어서 추가되면 좋을것 같습니다.
- 달력에서 날짜를 누르면 달력자체에 뭔가 표시가 되면 좋을것같습니다.
- 자물쇠가 달력보다 위에 레이어에 있습니다
- POFILE 스펠링이 틀렸어요 -> PROFILE
- 오른쪽 위에 버튼들 호버했을때 손가락버튼이 떳으면 좋겠어요
- 닉네임 7글자 넘으면 알러트 뜨는데 7자 초과되면 아에 작성안되게 막으면 좋을것같아요
- 메인화면에서 ?표 버튼 눌러서 설명서 볼수있게 해주세요
- 프론트 예외처리
- 물고기 아래 퍼센트의미 가 뭘의미하는지 모르겠어요.
- 카테고리 목록의 위치를 위아래로 자유롭게 바꿀수있었으면 좋겠어요
- 투두리스트 글자제한이 없었으면 좋겠어요
- 물고기 도감부분에서 언락된 물고기 남은 시간에 0포인트? 0시간? ‘남음’이라고 표시되면 좋겠어요
- 로그아웃 버튼 , todo버튼 호버시 커서가 잘못들어감.->손가락으로 바꿔야됨
- 처음 가입하고 공부시간이 한시간 미만일때 물고기밑에Na%로 떠요
- 처음 D-Day를 설정 했을 때는 잘 나오는데, 로그아웃하고 다시 로그인하면 안보이다가 다른 버튼들을 누르다 보면 나오네요. 첫 로그인 때 잘 불러와져서 화면에 나왔으면 합니다.
✅ 모두 수정 완료
🌞 트러블슈팅
⛅ 프라이빗라우터
- Router.tsx
undefined
const Router = () => { const token: string = process.env.REACT_APP_TOKEN as string; // const token: string = getCookie("token") as string; return ( <BrowserRouter> <Header /> <Routes> <Route path={EnumPages.HOME} element={<PrivateRoute token={token} component={<Home />} />} /> <Route path={EnumPages.INTRO} element={<Intro />} /> <Route path={EnumPages.MAIN} element={<PrivateRoute token={token} component={<Main />} />} /> <Route path={EnumPages.CHATROOM} element={<PrivateRoute token={token} component={<ChatRoom />} />} /> <Route path={EnumPages.STATISTICS} element={<PrivateRoute token={token} component={<Statistics />} />} /> <Route path={EnumPages.UNLOCK} element={<PrivateRoute token={token} component={<UnLock />} />} /> <Route path={EnumPages.LOGIN} element={<Login />} /> <Route path={EnumPages.KAKAOLOGIN} element={<KakaoLogin />} /> <Route path={EnumPages.NAVERLOGIN} element={<NaverLogin />} /> <Route path={EnumPages.GOOGLELOGIN} element={<GoogleLogin />} /> <Route path={EnumPages.WAVE} element={<Wave />} /> </Routes> </BrowserRouter> ); }; export default Router;
- PrivateRoute.tsx
undefined
PrivateRoute({ token, component: Component }) { return token ? (Component) : (<Navigate to="/login" {...alert("로그인이 필요한 페이지입니다.")} />); } export default PrivateRoute;
**문제 **- 프라이빗라우터를 사용하여 토큰이 있어야 홈 화면에 입장이 가능한데 로그인시 토큰을 저장해도 페이지 접근이 불가능했다.
**과정 **- setTimeout을 이용해 토큰을 저장하고 몇초 후 페이지에 접근하게 만들어 보았으나 실패 , 이후 디버깅 결과 로그인을 하기 전에도 라우터는 렌더링되므로 이미 토큰을 읽고 undefind 가 들어간 상태이다. 로그인을 해서 토큰을 저장해도 토큰이 업데이트 되지 않았다.
**해결 **- 라우터에서 검증을 삭제하고 페이지 컴포넌트에서 쿠키에 저장한 토큰을 불러와 useEffect를 이용 토큰이 없을경우 접근이 불가능하게 만들었다.
undefined
useEffect(() => { if (token === undefined) { navigate("/login"); alert("로그인이 필요한 페이지입니다."); } document.body.style.overflow = "hidden"; }, [token]);
⛅ 불필요한 통신과 에러
위의 프라이빗라우터와 마찬가지인 이유로 로그인 단계에서 이미 렌더링이 일어나 헤더에 있는 통신들이 useEffect에 의해 시작된다. 하지만 아직 로그인을 하여 토큰을 저장하지 않았으므로 token은 undefind 가 되어 당연하게 에러가 난다. 위의 프라이빗라우터를 해결하며 힌트를 얻어 로그인전 불필요한 통신과 에러를 방지하기 위해 useEffect에 조건과 의존성배열에 token을 추가해 에러를 없앴다.
undefined
useEffect(() => { if (token !== undefined) { dispatch(__getDayMyRank()); dispatch(__getWeekMyRank()); dispatch(__getUserProfile()); return () => { dispatch(__getCheckOutTimer()); }; }
}, [token]);
⛅ 웹소캣
문제 - 채팅에 글자마다 혹은 send 등 이벤트가 일어날때마다 소켓이 실행됨
과정 - useEffect와 의존성배열을 이용해보기도하고 데이터를 저장하는 onChange 함수를 최적화 시도했지만 채팅을 보낼때엔 무조건 이벤트 즉 렌더링이 일어나고 소켓이 실행됨
해결 - 소켓을 실행하는 함수를 함수 바깥에서 실행해서 페이지가 렌더링 되더라도 한번만 연결되게 함
⛅ asmr
문제 - audio.play()가 최초엔 실행이 되지만 audio.pause() 함수가 정상적으로 작동하지 않는다.
과정 - 처음엔 api를 받아오는 무료 라이센스 서버에서의 통신이 오래걸려 타임아웃 에러가 난다고 생각하여 우리 백엔드 서버에 오디오를 저장해 불러왔으나 역시나 실패했다.
해결 - 생각보다 나와 같은 문제를 겪는 글들이 굉장히 많았다. 스택오버플로우를 참조하여 URL을 바로 변수에 할당하는 것이 아닌 useState를 이용해 저장하여 사용하였고 문제가 해결되었다.
🌞 최적화
- 컴포넌트의 분리.
- React.memo()를 사용한 메모이제이션.
- 리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요가 없다. (메모리에 불필요하게 남아있을 필요 없음)
- 흩어진 useEffect 의존성배열 활용.
- 온클릭시 일어나는 함수는 화살표함수에서 funtion 함수로 변경.
- 화살표 함수, 특히 축약형 화살표 함수는 기존 함수에 비해 실행하는데 더 많은 시간이 걸린다.
- 불필요한 통신이 일어나는건 전부 막기.
- debounce와 throttle를 이용한 최적화.
🌳 이번주 나의 토양 debounce와 throttle
https://velog.io/@leejpsd/Lodash
최적화할때 사용하기 위해 공부했던 debounce와 throttle에 대해 포스팅했다.