JWT 로그인을 구현하면서 발생한 문제 정리1
2022. 6. 25. 10:05
TIL/트러블슈팅
요약 JWT로그인을 구현해보면서 클라이언트에 어떻게 저장시킬지 고민했고 redux를 사용하고자 했습니다. 하지만 axios 설정과 redux hook을 사용하면서 문제가 발생했고 해결했던 과정을 정리하였습니다 https://github.com/axios/axios https://www.npmjs.com/package/jsonwebtoken JWT인증 방식을 구현하던 중 클라이언트에 토큰 값을 어떻게 관리할지 고민을 하게 되었습니다. 사용자 쿠키에 저장하는 등 여러가지 방법이 있었는데 그 중에서 Redux를 활용하여 사용자 토큰을 관리하는 동시에 현재 로그인 상태를 확인하는 기능을 구현하고자 했습니다. 그렇게 구현을 하던 중 axios(서버로 요청을 보내고 받을 수 있는 모듈)의 코드가 중복되는 부분을 피..
useRef - current null 문제 해결
2022. 6. 24. 11:19
TIL/트러블슈팅
요약 초기 렌더링시 아직 데이터가 없기때문에 컴포넌트가 만들어지지 않았다. 그렇다고 이후 데이터가 들어왔다고 해서 ref 특성상 업데이트 되지 않았기 때문에 발생한 문제였고 아래와 같이 수정했다 업데이트없이 컴포넌트가 마운트됐을 때 값만 사용한다. useRef === useState(value)[0] {postListData && ( ...카드 데이터 )} {postListData && (...카드 데이터)} 에러가 발생한 코드 블로그 메인을 개발하면서 드래그 앤 스크롤을 구현하기 위해 useRef를 사용해서 div elemnet를 가져왔고 react-use라이브러리의 useScroll을 통해 ref의 스크롤 위치 데이터 x를 가져오고자 했습니다. 이때 다른 컴포넌트에게 x값을 전달하여 현재 스크롤 위치..
Can't perform a React state update on an unmounted component.
2022. 6. 17. 18:54
TIL/트러블슈팅
발생 이유 : router 이동 한 후 이전 컴포넌트에서 state 값을 바꾸려고 할 때 발생하게 됩니다. 기본적으로 useState는 비동기적으로 동작하기 때문입니다. const moved = () => { if(window.scrollY > 50) setShow(true); else setShow(false); } useEffect(()=> { window.addEventListener("scroll", moved) }, []) 이 기능은 Navbar가 스크롤 이동을 감지해서 Navbar에 다른 css 값을 적용하는 동작을 하고 있는데 이 함수가 동작하는 도중 Rotuer로 이동해서 발생하게 됐습니다. 해결 방법이 두 가지정도가 있다는 것을 확인하였고 아래와 같습니다 라우터 이동하기 전에 오류를 발생..
템플릿에서 module 버전 충돌
2022. 6. 16. 13:58
TIL/트러블슈팅
0) 템플릿을 사용한 이유 포트폴리오로 활용하기 위한 포트폴리오 웹페이지를 개발하면서 가능한 많은 것을 써보고 싶었고 그 중에서 실제 웹페이지를 구성할 때 필요한 것들을 공부하고 있었습니다. 그렇게 프론트 개발에 대해 공부하면서 알아보던 중 관리자 페이지 , admin 페이지가 있다는 것을 알았고 이 admin 페이지에 관해 구글링 해본 결과 상당히 많은 관리자용 템플릿들이 있다는 것을 알게 되었습니다. ( admin 페이지는 주로 쇼핑몰에 이용되는 것들이 많았고 이용자 조회, 상품관리 뿐만 아니라 다양한 레이아웃 형식까지 제공해주는 것을 확인하였습니다. ) 그 중에서 star가 많고 다양한 기능을 제공하는 템플릿을 골라 이용해보기로 결정하였습니다 1) 템플릿 운영 그렇게 관리자용 페이지를 추가하고 난 ..
리액트 초보일 때 발생한 Router 에러
2022. 6. 6. 15:49
TIL/트러블슈팅
요약 처음 리액트 개인프로젝트를 진행하면서 Router를 사용했을 때 공부했던 버전이 v5였는데 계속 기존의 방식대로 작성해도 안되어 한참을 붙잡다가 웹에서 사용하는 라이브러리와 앱에서 사용하는 라이브러리가 있다는 것을 알았고 이후에 버전 문제였다는 것까지 찾게되었습니다. 이후 개발환경이 빠르게 바뀐다는 것을 짧게나마 체감하게 되었습니다 Router 구현 중 에러발생 포트폴리오 디자인을 수정하다가 어떻게 바꿔야할지 감이 잡히질 않아 조금씩 붙여넣기하면서 새로 만들던 중 Router 기능을 구현하려고 단순하게 구글링으로 검색하고 지난번에 정리해둔 공식문서를 찾아 보면서 구현하다가 에러가 발생했습니다. 공식문서 https://v5.reactrouter.com/core/guides/quick-start Dec..
useState 에러를 해결하며 특징과 동작방식 알아보기
2022. 6. 5. 14:54
TIL/트러블슈팅
요약 기존의 useState를 사용하는 방식이 성능 문제때문에 setState를 만날때마다 처리하는게 아닌 일괄처리를 한다고 알고 있었는데 그것만으로는 현재 발생한 문제(개요)에 대해서 명쾌한 해답을 주지 못해 좀 더 찾아보았습니다 useState의 여러 특징들과 처리방식을 참고하여 정리를 해보았고 흐름도를 통하여 결론지었습니다. 결론은 useState의 성능을 끌어올리기 위한 특징과 불변성이라는 개념때문에 발생한 문제로 정의를 하였고 이해되지 않는 부분을 스스로 설명하고 정리해보며 매듭지었습니다 정확하게는 함수형 업데이트를 이해하였습니다 Why React useState with functional update form is needed? I'm reading React Hook documentatio..
SSG, SSR의 차이점과 어떤 방식이 적합할까
2022. 6. 5. 14:51
TIL/트러블슈팅
요약 노션을 사용한 블로그 개발을 Nextjs로 진행하던 중 초기 Notion API를 사용하는 부분에서 어려움을 겪어 유튜브를 참고하여 진행하였습니다. 이때 유튜브에서 진행하는대로getStaticProps를 사용하여 구현하였는데 나중에 성능 테스트를 위해 배포해보니 아주 빠르게 구현이 되어 만족했지만 이후 여러가지 문제가 발생하였습니다. 동적으로 업데이트 되지 않음 → 공개/비공개 설정이 적용되지 않음 이미지가 사라짐(Notion API는 1시간 후에 만료되는 AWS 링크를 사용해서 이미지가 배포 후 1시간 후에 만료됩니다.) 이후 SSR로 구현을 변경하였고 SSR과 Static Generation의 차이와 진행사항을 작성하였습니다. 개요 이전에 NextJS를 사용할 때는 SSR과 Static Gene..