리액트 초보일 때 발생한 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..