[Next.js] 오늘의 에러 일지✍🏻

날마다 새로운 에러 세상🌍🎶

1. 로컬 파일명과 원격 저장소 파일명이 달라서 발생하는 오류

Next로 개발한 프로젝트를 Vercel로 배포하려고 하는데 오류가 발생했다.
매우 익숙한 Module not found: Can't resolve ~ 에러가 떴는데 눈을 씻고 찾아봐도 파일명이나 변수명 등등 올바르게 잘 적혀 있었다.
구글링을 해보니 로컬에서 변경된 파일 이름이 원격저장소(GitHub)에서 변경되지 않아서 에러가 떴을 수도 있다고 한다.
그래서 GitHub을 확인해보니까 로컬에서는 대문자로 시작하는 파일 이름이 원격에서는 소문자로 시작하는걸 확인할 수 있었다. (ㅠㅠ)

해결 방법

1. 원격 저장소의 프로젝트 clone 하기 (옵션: branch 바꾸기)
2. git config core.ignorecase false 명령어 입력해서 대소문자 무시하지 말라고 명령해주기
3. 원하는대로 파일명 변경
4. add, commit 후 push~

*캐싱 된 내용을 삭제 하기 위해선 아래와 같이 한다.

git rm -r --cached .

git add .

git commit -m "Remove: 캐시 삭제"

2. Error: EPERM: operation not permitted

수정된 내용을 GitHub에 올리기 전에 실행이 잘 되는지 확인해 보려고 실행 했는데 이런 오류가 떴다.
구글링 해보니 npm 캐시를 삭제하고 (강제로) npm install(강제로) 하면 된다는데 캐시 삭제 명령어도 먹히지 않았다.

해결 방법

프로젝트 편집기(ex.VSCODE)를 껐다가 다시 들어오거나 사용하던 터미널을 껐다가 다시 키면 해결,,
새로 킨 터미널에서는 npm cache clean --force가 잘 먹혔다 ^^;
npm install -g npm@latest --force 해 준 다음, 실행하면 해결!

3. window is not defined / document is not defined

배포하기 위해 빌드 할 때 뜬 에러인데, 처음 '/'로 페이지에 들어갈 때 쿠키에 토큰이 있는지 없는지 검사한 뒤 있으면 로그인 된 상태라고 파악하고 없으면 로그인 화면으로 리다이렉트 하기 위해 구현한 코드에서 에러가 발생했다.

ex) 오류가 났던 코드 예시

export function getCookie(name:string) {
  let value;

  value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");

  return value ? value[2] : null;
}

해결 방법)

Next.js는 SSR을 하기 때문에 렌더링 하기 전에 window나 document 객체에 접근할 수 없다. 아래와 같은 방법으로 해결할 수 있다 :)

1. useEffect를 사용해서 브라우저가 다 그려진 뒤에 window, document를 접근한다.

2. if (typeof document !== "undefined") 구문을 통해 window나 document 객체의 타입이 undefined가 아닐 때(렌더링 된 후에)만 접근한다.

References
1번 문제
2번 문제
3번 문제