y.developer
[TIL] Day 58 yarn 설치 경로 변경 및 재설치 방법 본문
2023.12.26 화
문제 상황 1
Next.js에서 작업 후 yarn build → yarn start 는 정상 작동
yarn dev 시 에러 발생.
Error
node:internal/modules/cjs/loader:1051
throw err;
^
Error: Cannot find module 'C:\Users\?ㅼ갹洹?AppData\Roaming\npm\node_modules\yarn\bin\yarn.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
at Module._load (node:internal/modules/cjs/loader:901:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Node.js 모듈 경로에 대한 에러
저번 github build 때에도 봤던 에러다.
그때는 npm을 통해서 해결을 했었지만, yarn은 해결하지 못했었다.
이번 기회에 yarn에 대한 에러를 확실하게 잡고 가기로 했다.
Windows 사용자 이름 변경이 가장 확실
가장 문제가 경로상에 들어있는 한글이다.
에러 메시지에서 `C:\Users\?ㅼ갹洹?AppData\Roaming\npm\node_modules\yarn\bin\yarn.js`경로에서 한글에 해당하는 부분이 깨져 있다.
지금까지 Windows 운영체제를 계속해서 사용해왔다.
그동안 컴퓨터를 세팅할 때 별 생각없이 입력했던 사용자 이름이 발목을 잡았다.
아무래도 영어가 아니면 불가피한 상황에서 발생하는 에러들이 존재한다.
그리고 그 직접적인 원인을 해결하지 못하면 정상적으로 작동시키기 어렵다.
사용자 이름을 변경을 할 수는 있지만 안정성 문제로 추천하는 방법은 아니다.
따라서 데이터들을 백업한 후 Windows를 포맷하는 것이 가장 깔끔하고, 이참에 정리도 되는 좋은 방법이다.
하지만, 바로 포맷이나 데이터들을 정리를 할 수 없는 상황이라면 다른 방법으로 해결을 해야한다!
내가 바로 그 상황이다...
현재 Next.js 팀프로젝트의 기획이 끝나고 셋팅이 들어가는 중이여서 여유로운 시간이 없다.
그리고 5년이나 된 컴퓨터를 곧 교체하려는 계획이 있기때문에 굳이 시간을 들여서 포맷을 할 필요가 없다.
yarn 제거
경로가 문제라면 경로를 바꾸면 된다.
기존의 yarn을 제거하고 경로를 직접 변경하여 전역으로 설치할 것이다.
터미널을 열어서 전역으로 설치되어 있는 yarn을 제거했다.
npm uninstall -g yarn
yarn 설치 경로 변경
더 정확히 말하자면 Node.js의 npm 모듈 경로를 변경하는 것이다.
npm의 기본 글로벌 모듈 디렉터리는 `C:\Users\사용자이름\AppData\Roaming\npm`이지만,
사용자이름이 한글인 이상 사용할 수가 없다.
npm의 모듈 디렉터리를 변경하려면 새로운 디렉터리를 만들고, npm의 prefix를 해당 디렉터리로 설정해야 한다.
그리고 환경 변수에 해당 디렉터리를 추가한다.
mkdir C:/NodeModules
npm config set prefix C:/NodeModules
setx PATH "%PATH%;C:/NodeModules"
그리고 주의할 점!
Windows에서는 경로를 나타낼 때 "\"(역슬래시)(Backslash) 해당 기호가 아닌 "/" (슬래시)(Slash) 해당 기호를 사용한다.
다르게 입력했을 경우 원하는 경로를 설정할 수 없다! 확인하고 경로를 설정하자!
yarn 재설치
yarn을 전역으로 재설치하여 모듈을 사용할 수 있게 한다.
npm install -g yarn
문제 상황 2
잘 해결된 줄 알았으나 두번째 에러가 발생했다.
실행하는 과정에서 로직이 꼬인 건지 yarn dev시 이번에는 또 다른 에러 메시지를 나타낸다.
Error
<yarn dev 작성 후 터미널>
✓ Ready in 3.9s
○ Compiling / ...
✓ Compiled / in 8.7s (534 modules)<터미널에 나타난 에러 메시지>
[Error: UNKNOWN: unknown error, open 'D:\Coding\03_Study\~~~\next-wedding-app\.next\static\chunks\app\layout.js'] {
errno: -4094,
code: 'UNKNOWN',
syscall: 'open',
path: 'D:\\Coding\\03_Study\\~~~\\next-wedding-app\\.next\\static\\chunks\\app\\layout.js'
}<브라우저 화면>
Internal Server Error
Compiling이 원활하게 되지 않는다.
첫 화면은 열리지만 페이지가 연결된 Link부분을 클릭하면 에러메시지가 나오며 작동하지 않는다.
무슨 문제인지는 모르겠지만 같은 형태의 에러 메시지가 여러개가 찍힌다.
정상 작동 했을 때는 Compiled 메시지가 여려개 찍혀야하는데,
오류가 발생할 때는 하나밖에 찍히지 않는다.
분명 해당 부분에 문제가 있는 것으로 보인다.
그러나 정확하게 원인을 찾지 못했다.
의심되는 것을 지우고 다시 실행
yarn을 새로 설치하고 셋팅했기 때문에 기존 캐시나 데이터들이 영향을 줄 수 있다.
next, node modules, yarn에 관련된 파일을 제거하고 다시 설치하는 것이 가장 깔끔한 해결방법이다.
해당 방법으로 문제가 해결 되었다!!
rm -rf .next
rm -rf node_modules
rm -rf yarn.lock
yarn install
yarn dev
만약 해결이 안된다면 시도해볼 수 있는 것
정말 원인은 다양하게 우리를 괴롭히겠지만, 해결해볼 방법도 많다.
포트 출동을 의심하자.
다른 프로세스가 사용 중인 포트로 인해 충돌이 발생할 수 있다.
흔히 사용하는 http://localhost:3000/ 포트가 이미 다른 프로세스에 사용 중인지 확인하자.
netstat -ano | find "3000"
npm으로 우회하자.
yarn을 놓아주는 수밖에...
npm으로 실행하면 잘 작동하는 경우도 있다.
뭐.. 다른 방법도 많고, 원인도 다양하겠지만
처음부터 계속 말했듯이 포맷이 최고다.
이런저런 테스트를 해보거나 그런게 귀찮다면,
이참에 불필요한 파일도 정리할 겸 포맷을 하자!
하루를 마치며
에러는 늘 예상하지 못한 곳에서 나타나며, 듣도 보도 못한 형태로 다가온다.
같은 에러를 여러번 마주칠 때도 있다.
그럴 때일수록 내가 코딩을 하는건지 에러를 만드는건지 헷갈린다.
정말 많은 경험으로 다양한 에러를 알고 있다면 대처하기 수월하겠지만,
현재는 마주치는 문제들이 늘 새롭다.
그래도 하나씩 해결되고 작동이 되는 것에서 자신감을 얻고 있다.
아직 기계는 간단한 에러조차 스스로 해결하지 못한다. (인간 승리 ㅎㅎㅎ)
오늘의 한 줄
에러와의 전쟁에서 승리하자!