Front-end 개발/FE 버그
-
[Bug Fix] Next.js 14 App Router 버전 window is not defined 문제 해결Front-end 개발/FE 버그 2024. 11. 20. 09:19
Problem프로젝트를 진행하면서 로컬스토리지로부터 객체 데이터를 가지고 와서, 파싱하고 state에 저장하는 과정이 반복해서 수행되고 있었다. 반복되는 과정의 코드를 줄이기 위해 커스텀 훅 useLocalStorage을 만들었다.로컬스토리지는 브라우저의 저장소로 데이터를 key-value 쌍으로 저장할 수 있다. 그런데 Next.js는 서버 사이드 렌더링을 지원하기 때문에, 서버 측에서 코드가 실행될 때 문제가 발생하게 된다. 로컬스토리지를 사용할 때는 Window 객체가 존재하는 클라이언트 사이드에서만 접근해야 한다.Next.js 클라이언트 컴포넌트에서는 일반적으로 useEffect를 사용하여 컴포넌트가 마운트된 후에 로컬스토리지에 접근하는 방식을 사용한다. 하지만 내 상황에서는 useState를 초..
-
[Bug Fix] Next.js 14 App Router 버전 OAuth Session 동기화 문제Front-end 개발/FE 버그 2024. 11. 17. 10:34
Next.js 14 App Router 버전으로 개발을 진행하면서 Header 컴포넌트에 로그인/로그아웃 기능을 넣고 email 로그인을 해봤는데 로그인 상태가 변경되지 않는 이슈가 발생했다.1. Problem [ 문제 정의 ]Email 로그인 (signInWithCredentials) 할 경우 세션 값이 새로고침 해야 업데이트 되는 문제 [ 원인 분석 ]useSession Hook의 경우 loading, unauthenticated, authenticated로 3 가지 Status로 구분된다. 현재 로그인 후 accessToken이 잘 들어옴에도 loading → unauthenticated 상태에 그치고, 새로고침을 해야 loading → authenticated 상태로 변경되는 상황이다.[ 문제 접..
-
[Bug Fix] parcel 실행/build Error : unable to open snapshot fileFront-end 개발/FE 버그 2023. 12. 29. 16:26
패스트캠퍼스에서 타입스크립트 강의를 듣고 있는데 Error가 발생했다. 처음 parcel 이란 번들러를 사용하는데, 에러가 발생하니 난감했다. 경로에 한글이 있어서 Error가 발생했나 싶어서 경로에 한글을 없애보고, VSCode를 재실행해도 의미없었다. Error 문구는 No such file or directory 라는데 전부다 존재한다. 정말 '뭐지?' 싶었다. Problem parcel 번들러는 package.json 내에서 scripts에서 아래와 같이 정의해서 사용하고 있다. "scripts": { "dev": "parcel ./index.html", "build": "parcel build ./index.html" }, 그리고 Error 내용은 아래와 같다. > ts-test@1.0.0 de..