React 설치 및 프로젝트 생성 에러 발생 시 해결방법, Nodejs 재설치

 

 

React 공부를 위해 호기롭게 시작했으나

설치에서부터 난관에 부딪혔다..!

 

 

이번 글에서는 React 설치 방법과 에러 발생 시 해결 방법에 대해 작성하겠습니다

에러 해결 방법이 궁금하신 분들은 글 하단으로 가시면 됩니다.

 

 

 

React 설치 및 프로젝트 생성 방법

 

개발 환경 셋팅

---

1. nodejs 검색해서 설치

2. vscode 에디터 검색해서 설치

3. yarn 설치 (`npm install --global yarn')

4. git 설치

 

프로젝트 생성

---

youtube cordingapple

 

1. 작업용 폴더 만들기  

2. Shift+우클릭 - PowerShell/터미널 열기  

3. 터미널 창에 `npx create-react-app 프로젝트명` 입력  

4. 만약 허가되지 않은 스크립트 어쩌구 에러가 뜬다면  

5. 윈도우에 `PowerShell`검색해서 우클릭 - 관리자 권한으로 실행  

6. `Set-ExecutionPolicy Unrestricted` 입력 후 엔터

7. 실행규칙 변경 뜨면 `y` 입력

8. 다시 기존 터미널로 돌아가서 `npm create-react-app 프로젝트명` 입력

9. 설치 되면 에디터에서 File - Open Folder로 폴더 열기(프로젝트명 잘 뜨는지 확인)

10. 미리보기는 프로젝트명 폴더 터미널에서 `npm start`

 

 

 

책 - 리액트를 다루는 기술

yarn create react-app hello-react
cd hello-react
yarn start

yarn start 대신 npm start를 해도 된다. 

yarn을 사용하지 않는 경우 `npm init react-app <프로젝트명>` 방법으로도 생성이 가능하다

 

---

 

위 방법으로 `npx create-react-app`을 시도했으나...

오류 발생!

---

PS C:\Users\jhc03\Desktop\포트폴리오\React> npx create-react-app blog

Need to install the following packages:

create-react-app@5.0.1

Ok to proceed? (y)

 

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it.

Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

npm warn deprecated uid-number@0.0.6: This package is no longer supported.

npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.

npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported

npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

npm warn deprecated fstream@1.0.12: This package is no longer supported.

npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

 

Creating a new React app in C:\Users\jhc03\Desktop\포트폴리오\React\blog.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts with cra-template...

 

npm error code 3221225477

npm error path C:\Users\jhc03\Desktop\포트폴리오\React\blog\node_modules\core-js

npm error command failed

npm error command

C:\Windows\system32\cmd.exe /d /s /c node -e "try{require('./postinstall')}catch(e){}"

npm error A complete log of this run can be found in: C:\Users\jhc03\AppData\Local\npm-cache\_logs\2024-12-08T06_00_48_155Z-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... node_modules

Deleting generated file... package.json

Deleting blog/ from C:\Users\jhc03\Desktop\포트폴리오\React

Done.

npm notice npm notice New patch version of npm available!

10.9.0 -> 10.9.2

npm notice Changelog:

https://github.com/npm/cli/releases/tag/v10.9.2

npm notice To update run: npm install -g npm@10.9.2 npm notice

---

GPT가 알려준 해결방법

1. npm 버전 업데이트

npm install -g npm@latest

 

2. 캐시 정리

npm cache clean --force

 

3. 권한 문제 확인

관리자 권한으로 명령 프롬프트를 실행한 뒤 다시 시도해보세요

=> 같은 오류 발생

 

4. Node.js와 npm 재설치

최신 LTS 버전을 다운로드하여 설치하기

=> 최신 LTS 버전인 22로 했으나 똑같은 오류 발생

 

5. create-react-app 직접 설치

npm install -g create-react-app
create-react-app blog

 

6. 대체 방법 : Vite 사용

훨씬 더 가볍고 빠른 방법

npm create vite@latest blog -- --template react
cd blog
npm install
npm run dev

 

=> 파일 생성에는 성공했으나 npm install을 할 경우 새로운 오류 발생

PS C:\Users\jhc03\Desktop\포트폴리오\React\hello-react> npm i
npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\jhc03\\Desktop\\포트폴리오\\React\\hello-react\\node_modules\\@humanfs',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\jhc03\Desktop\포트폴리오\React\hello-react\node_modules\@humanfs\node'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\jhc03\\Desktop\\포트폴리오\\React\\hello-react\\node_modules\\@humanfs\\node'
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]
npm error code 3221225477
npm error path C:\Users\jhc03\Desktop\포트폴리오\React\hello-react\node_modules\esbuild
npm error command failed
npm error command C:\Windows\system32\cmd.exe /d /s /c node install.js
npm error A complete log of this run can be found in: C:\Users\jhc03\AppData\Local\npm-cache\_logs\2024-12-09T06_33_21_669Z-debug-0.log

 

=> node_modules와 package-lock.json 삭제 후 재설치/ 캐시 삭제/관리자 권한으로 실행 등 GPT가 이야기하는 해결방법을 모두 시행해보고 2시간동안 이것저것 알아보았으나 해결이 안됐다

 

여러번의 에러에서 공통적으로 나오는 GPT의 해결책 중 하나는 Node.js와 npm 재설치

즉, 최신 LTS 버전을 다운로드하여 설치하기

 

이미 LTS로 여러번 설치를 했는데도 안된다고 하자 18버전으로 설치하라는 답이 왔다

하지만 다른 유튜버나 블로그를 찾아보면 18버전이 아닌 20버전, 다른 버전으로도 잘 작동하는 것을 확인할 수 있었다

 

이미 이전 프로젝트에서 GPT는 예전정보도 많고, 잘못된 정보도 줄 수 있기때문에 맹신하면 안된다는 걸 알기때문에

그래서 버전 문제가 아니라고 생각해서 이것저것 다른것을 찾아보다가 결국 선배님께 도움을 요청했다

그렇게 얻은 최종 해결책은 nodejs를 20버전으로 재설치! 22버전은 아직 잘 안된다고 하셨다

 

 

내가 찾은 해결 방법 : Nodejs 22 삭제

---

 

1. 제어판에서 삭제

1. 제어판을 열고 프로그램 및 기능으로 이동합니다.
2. 설치된 프로그램 목록에서 Node.js를 찾아 선택합니다.
3. 제거(Uninstall) 버튼을 클릭하여 삭제를 진행합니다.

 

2. 환경 변수 확인 및 정리

Node.js가 삭제된 후에도 환경 변수에 잔여 설정이 남아있을 수 있습니다. 이를 확인하고 정리하세요.

1. Windows 검색창에 "환경 변수 편집"을 검색하고 선택합니다.
2. 시스템 속성 창에서 환경 변수 버튼을 클릭합니다.
3. 시스템 변수 목록에서 Path를 찾아 편집 버튼을 누릅니다.
4. Node.js와 관련된 경로가 있다면 삭제합니다. (예: C:\Program Files\nodejs\)

 

 

 

3. npm 캐시 및 관련 파일 삭제

1. Node.js와 함께 설치된 npm의 캐시 파일을 삭제하려면:
   • C:\Users\<사용자이름>\AppData\Roaming\npm 폴더와
   • C:\Users\<사용자이름>\AppData\Roaming\npm-cache 폴더를 삭제합니다.
2. C:\Program Files\nodejs 폴더도 삭제합니다.

 

 

4. 삭제 확인

명령 프롬프트에서 Node.js와 npm이 삭제되었는지 확인합니다:

bash

코드 복사

node --version npm --version

삭제되었다면 버전 정보가 표시되지 않거나 명령어를 찾을 수 없다는 메시지가 나옵니다.

 

 

결과

---

 

 

성공!

Nodejs를 20으로 바꾸니까 바로 설치됐다.

참고로 yarn도 삭제되니 재설치하기!

 

 

배운점

---

최신 버전은 오류가 많다. 최신 버전을 안쓰면 왠지 손해보는 느낌이 들지만..!

여러가지 방법을 써도 안된다면 고집피우지 말고 버전을 바꿔보기!

 

 

 

 

 

기타 에러 참고 : https://codingapple.com/unit/react1-install-create-react-app-npx/?id=2305