[react 시작] node.js 설치 및 react 로 test 화면 띄우는 방법

 npm start

PS C:\reactProject\testProject> npm start
아래와 같이 에러발생

> testproject@1.0.0 start
> react-scripts start

node:internal/modules/cjs/loader:1252
  throw err;
  ^

Error: Cannot find module 'react'
Require stack:
- C:\Users\mai20\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
    at Function.resolve (node:internal/modules/helpers:148:19)
    at Object.<anonymous> (C:\Users\mai20\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js:43:31)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at Object..js (node:internal/modules/cjs/loader:1708:10)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\mai20\\AppData\\Roaming\\npm\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}

#### **원인**
- 글로벌로 설치된 `react-scripts`가 시스템 `PATH`에 포함되어 있어, 로컬 프로젝트의 `node_modules/react-scripts`보다 우선적으로 실행되고 있습니다.
- 프로젝트 디렉터리에 있는 `node_modules/react-scripts`가 없거나, 잘못 설치되었거나 손상되어 사용할 수 없을 때 글로벌 `react-scripts`를 참조하게 될 수 있습니다.
- `npm start` 실행 시, 현재 프로젝트 경로를 기반으로 실행되지 않고, 글로벌 설치된 스크립트를 호출하도록 설정된 상태일 수 있습니다.

#### **글로벌 설치된 `react-scripts`의 한계**
- 글로벌 `react-scripts`는 프로젝트별로 설치된 의존성과 독립적으로 동작하기 위해 설계되지 않았습니다.
- 특히, 프로젝트 내부의 `react`와 `react-dom` 패키지 버전이 맞지 않으면, 현재와 같은 에러가 발생할 가능성이 높아집니다.

그래서 global에 설치된 node 삭제

2. 해결 방법

1) 글로벌 설치된 react-scripts 삭제

우선 글로벌에 설치된 react-scripts가 원인이므로 이를 삭제해야 합니다.

아래 명령어를 실행하여 글로벌 전역에 설치된 react-scripts를 삭제합니다:

npm uninstall -g react-scripts

이 명령어는 C:\Users\mai20\AppData\Roaming\npm\node_modules 경로에 설치된 react-scripts를 삭제합니다.

---

2) 프로젝트에서 react-scripts 재설치

글로벌 경로 대신 프로젝트의 로컬 디렉터리에서 react-scripts가 실행될 수 있도록, 프로젝트에서 의존성을 올바르게 재설치합니다:

1. 프로젝트 디렉터리로 이동:

cd C:\reactProject\testProject

1. 기존 의존성과 캐시를 정리:

rm -rf node_modules package-lock.json
npm cache clean --force

1. 의존성 및 react-scripts 다시 설치:

npm install

이 명령어로 프로젝트의 로컬 경로(C:\reactProject\testProject\node_modules)에 모든 의존성(react-scripts 포함)이 설치됩니다.

---

3) Node.js와 npm의 "PATH" 확인

글로벌 설치된 react-scripts 문제가 재발하지 않도록 시스템 환경 변수를 점검하세요.

npm bin -g

위 명령어를 실행하면 글로벌 설치된 npm 패키지의 실행 파일 경로(C:\Users\mai20\AppData\Roaming\npm)가 출력됩니다. 이 경로가 PATH에 설정되어 있어 글로벌 패키지가 실행되는 것입니다. 하지만, 올바르게 로컬 프로젝트 의존성을 우선적으로 실행하도록 설정하려면, 반드시 npm start가 프로젝트 내부에서 실행되도록 보장해야 합니다.

---

4) 올바른 npm start 실행 확인

npm start 명령어가 프로젝트 루트 디렉터리(C:\reactProject\testProject)에서 실행되었는지 확인하세요. 만약 다른 경로에서 실행하거나, 환경 변수(PATH) 설정이 영향을 미치는 경우, 글로벌 경로의 react-scripts를 호출할 수 있습니다.

정확한 경로에서 실행되었는지 확인:

cd C:\reactProject\testProject
npm start

start 를 하면 localhost:3000 으로 서버가 올라간다.

web 으로 확인할 수 있다.

만일 이부분이 안된다면 하나하나 다시 체크해봐야한다.

---

5) Node.js와 npm 버전 문제 점검

현재 사용 중인 Node.js 버전이 22.12.0으로, 공식적인 릴리스가 아니거나 비정상적인 환경일 가능성이 큽니다. 올바른 버전으로 업데이트하면 문제가 해결될 가능성이 높습니다.

1. Node.js LTS(Long Term Support) 안정 버전 설치:
   Node.js 공식 다운로드 페이지에서 최신 LTS 버전을 다운로드하고 설치하세요.
2. 설치 완료 후, Node.js 버전 확인:

node -v

LTS 버전이라면 예를 들어 v18.x.x 혹은 v20.x.x 버전이 출력됩니다.

1. npm 최신 버전 설치:

npm install -g npm@latest

1. 설치 완료 후, npm 버전 확인:

npm -v

---

6) 새 React 프로젝트에서 실행 테스트

지금 사용 중인 프로젝트 설정이 문제일 가능성도 있으므로, 새로운 React 프로젝트를 생성하여 같은 문제가 발생하는지 테스트해 보세요:

npx create-react-app new-project
cd new-project
npm start

• 새 프로젝트에서 문제가 없으면 기존 프로젝트의 설정(package.json 등)이나 의존성 설치 과정에 문제가 있었던 것입니다.
• 기존 프로젝트의 src 폴더 및 기타 설정을 새 프로젝트로 옮기는 것도 하나의 방법입니다.

---

요약

1. 글로벌 설치된 react-scripts 삭제:

npm uninstall -g react-scripts

1. 프로젝트에서 react-scripts 및 의존성 재설치:

cd C:\reactProject\testProject
rm -rf node_modules package-lock.json
npm install

1. Node.js를 안정적인 LTS 버전으로 설치 후 npm 업데이트.
2. 새 프로젝트를 생성하여 테스트:

npx create-react-app new-project
cd new-project
npm start