평소에 잘만 되던 리액트 프로젝트 생성 코드를 실행했더니 오류가 났다....!!
npx create-react-app 프로젝트 이름
오류 로그를 자세히 읽어보니 npm 캐시에 관한 문제인 것 같았다.
npm ERR! code EEXIST
npm ERR! syscall rename
npm ERR! path /Users/aelimong/.npm/_cacache/tmp/936f369a
npm ERR! dest /Users/aelimong/.npm/_cacache/content-v2/sha512/cb/a3/c90d8378c58071c1ddb697e3951f7e4dfb57c26168ae0b76a23f64a55d513a2e8ed24bead2c7dafcf612f1acfe299fa9f59411a11c9d76a63dc5dcca6db7
npm ERR! errno -13
npm ERR! EACCES: permission denied, rename '/Users/aelimong/.npm/_cacache/tmp/936f369a' -> '/Users/yuin-eoseu/.npm/_cacache/content-v2/sha512/cb/a3/c90d8378c58071c1ddb697e3951f7e4dfb57c26168ae0b76a23f64a55d513a2e8ed24bead2c7dafcf612f1acfe299fa9f59411a11c9d76a63dc5dcca6db7'
npm ERR! File exists: /Users/aelimong/.npm/_cacache/content-v2/sha512/cb/a3/c90d8378c58071c1ddb697e3951f7e4dfb57c26168ae0b76a23f64a55d513a2e8ed24bead2c7dafcf612f1acfe299fa9f59411a11c9d76a63dc5dcca6db7
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in: /Users/aelimong/.npm/_logs/2023-11-29T06_18_31_769Z-debug-0.log
Aborting installation.
npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting projectName/ from /Users/aelimong/Desktop/workspace
Done.
이 프로젝트 만들기 전에 전자정부프레임워크(eGovFramework)에서 리액트 템플릿이 나왔다고 해서 설치해봤는데
그 프로젝트의 npm과 내 로컬 npm 버전이 달라서 캐시들이 꼬인 것 같다...
npm cache는 일반적으로 npm-cache/_cache 폴더에 저장되는데 이 디렉토리는 모든 HTTP 요청 데이터와 패키지 관련 데이터를 저장하는 캐시이다.
꼬인 캐시들을 삭제 해줘야하는데
1) 모조리 강제 삭제
npm cache clean --force
첫 번째 방법은 npm cache clean --force 명령어이다. npm 버전 5 이후로는 --force를 붙이지 않으면 오류가 발생한다. 이 명령어는 npm의 cache를 모조리 삭제하는 명령어이다.
2) 꼬인 부분만 삭제
npm cache verify
두 번째 방법은 npm cache verify 명령어인데, 이 명령어는 cache 폴더의 내용을 확인하고, 가비지 데이터들을 수집하여 삭제하고 무결성을 확인한다. 즉 cache에서 꼬인 부분을 체크 및 해결하는 명령어로, 지우는 명령어보다는 온건한(?) 방법이라고 할 수 있다.
stackoverlflow 등에서는 두 가지 방법 모두가 답변에 달리는데, 후자를 주로 추천하는 편인 것 같다.
두 가지 선택사항이 있다!
그런데 캐시 삭제를 해주려고 명령어를 입력했더니 아래 오류가 다시 떴다ㅠㅠ
npm ERR! code EACCES
npm ERR! syscall open
npm ERR! path /Users/aelimong/.npm/_cacache/index-v5/00/4b/41506cb5a6f673ed7600df661739e6f20e0b312c5b1d12d644bdb881af61
npm ERR! errno -13
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR!
npm ERR! To permanently fix this problem, please run:
npm ERR! sudo chown -R 501:20 "/Users/aelimong/.npm"
npm ERR! A complete log of this run can be found in: /Users/aelimong/.npm/_logs/2023-11-29T06_34_48_106Z-debug-0.log
또 천천히 읽어보니 삭제 권한 문제로 관리자 권한으로 실행해야 하는 것 같았다.
오류 코드에 나와있는 아래 코드를 실행하고 관리자 비밀번호를 입력해준다.
sudo chown -R 501:20 "/Users/aelimong/.npm"
sudo는 관리자 권한으로 실행하겠다는 의미이고
chown는 change owner의 줄임말로 파일의 소유자 변경을 위한 명령어이다.
다시 2번 방식으로 캐시 삭제를 시도 했더니,,,!
npm cache verify
요로코롬 캐시 삭제가 되고 프로젝트 생성이 정상적으로 되었다!
리액트 프로젝트 생성할 때는 항상 별 이상 없이 만들었어서 오류화면을 보고 약간 당황했지만 오류 로그에 답이 있었다...!!!
참고)