Create React App(CRA) tool chain

 

https://create-react-app.dev/

 

🔶 Create React App(CRA) 🔶

React 애플리케이션을 빠르게 시작할 수 있도록 개발 환경을 자동으로 구성해주는 공식 툴체인.

 

◼️ 필요 이유

eact 프로젝트를 처음 만들 때는 Babel, Webpack, ESLint 등 다양한 개발 도구를 직접 설치하고 설정해야 한다.

CRA는 이러한 복잡한 설정을 미리 제공하기 때문에, 개발자는 환경 설정 대신 React 개발에 바로 집중할 수 있다.

 

◼️ 주요 특징

• 빠른 프로젝트 생성: 명령어 하나로 React 개발 환경을 구성한다.
• 설정 자동화: Babel, Webpack, ESLint 등이 기본 설정되어 있다.
• 개발에 집중: 복잡한 환경 설정 없이 바로 코딩 시작 가능하다.

 

◼️ 설치 방법

방법 1️⃣ : 현재 디렉토리에 생성 (추천)

이미 프로젝트 폴더를 만들어 놓았다면, 현재 폴더에 React 앱을 생성하는 방법이다.

 

터미널에서 아래 명령어를 실행한다.

npx create-react-app .

• .(점)은 현재 디렉토리를 의미한다.

 

설치가 완료되면 필요한 패키지와 의존성이 자동으로 설치되며, 바로 개발을 시작할 수 있다.

 

---

 

방법 2️⃣ : 프로젝트 생성과 동시에 설치

프로젝트 폴더를 아직 만들지 않았다면, 폴더 생성과 React 앱 생성을 한 번에 진행할 수 있다.

터미널에서 아래 명령어를 실행한다.

npx create-react-app 프로젝트이름

• 예시: npx create-react-app my-app

 

명령어를 실행하면 my-app 폴더가 생성되고, 그 안에 React 프로젝트가 자동으로 구성된다.

 

 

📍  POINT 📍 

✔️ 이미 폴더가 있다면 → npx create-react-app . ✔️

✔️ 새 프로젝트를 만들면서 시작한다면 → npx create-react-app 프로젝트이름 ✔️

 

---

 

⚠️ Create React App(CRA) 프로젝트 생성 시 자주 발생하는 오류 ⚠️

 

ERROR 1. npx 명령어를 인식하지 못하는 경우

❌ 오류 메시지

PS C:\Users\CafeAlle\Downloads\react-app> npx create-react-app .
npx : 'npx' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고
경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
위치 줄:1 문자:1
+ npx create-react-app .
+ ~~~
        + CategoryInfo             : ObjectNotFound: (npx:String) [ ], CommandNotFoundException
        + FullyQualifiedErrorId : CommandNotFoundException

 

❗ 원인

주로 VS Code에서 PowerShell을 사용할 때 발생할 수 있다.

 

⭕ 해결 방법

1. 터미널을 Command Prompt(cmd)로 변경

1. Ctrl + Shift + P (명령 팔레트 열기)
2. Terminal: Select Default Profile 검색
3. Command Prompt 선택
4. 새 터미널을 열고 다시 실행

 

 

2. 그래도 안 된다면

1. VS Code를 완전히 종료 후 다시 실행
2. Node.js가 정상적으로 설치되어 있는지 확인

 

💡 참고: PowerShell에서도 대부분 정상적으로 실행된다. 환경에 따라 발생하는 경우가 있다.

 

---

 

ERROR 2. npx.ps1 실행 권한 오류

❌ 오류메시지

PS C:\Users\CafeAlle\Downloads\react-app> npx create-react-app .
npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execu
tion_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ npx create-react-app .
+ ~~~
        + CategoryInfo             : 보안 오류 : ( : ) [ ], PSSecurityException
        + FullyQualifiedErrorId : UnauthorizedAccess

 

❗ 원인

PowerShell의 실행 정책(Execution Policy)이 Restricted로 설정되어 있기 때문이다.

 

⭕ 해결 방법

관리자 권한으로 Windows PowerShell 실행

 

현재 권한 확인

Get-ExecutionPolicy

 

결과

Restricted

 

실행 권한 변경

Set-ExecutionPolicy RemoteSigned

• 권한 상태 RemoteSigned 변경.

 

확인 메시지가 나오면

Y

• 입력 후 Enter.

 

다시 확인

Get-ExecutionPolicy

 

결과

RemoteSigned

 

이후 VS Code에서 다시 실행한다.

npx create-react-app .

 

---

 

ERROR 3. TLS/SSL 인증서 검증에 실패한 경우

❌ 오류 메시지

upm error code UNABLE_TO_VERIFY_LEAF_SIGNATURE
upm error errno UNABLE_TO_VERIFY_LEAF_SIGNATURE
upm error request to https://registry.npmjs.org/create-react-app failed, reason: unable to verify the first certificate
upm error A complete log of this rin can be found in: c:\Users\CafeAlle\AppDate\Local\upm-cache\_PS c"\Users\cafeAlle\Downloads\react-app>

 

❗ 원인

클라이언트가 서버의 인증서(leaf certificate)를 신뢰할 수 있는 루트 인증서까지 연결(인증서 체인)을 검증하지 못할 때 발생한다.

 

⭕ 해결 방법

아래 명령어를 실행한다.

npm config set strict-ssl false

 

이후 CRA 명령을 다시 실행한다.

npx create-react-app .

 

확인 메시지가 나오면

Y

• 입력 후 Enter.

 

이후 VS Code에서 다시 실행 후 체크한다.

 

💡 참고: 이 방법은 SSL 인증서 검사를 비활성화한다. 회사 프록시나 인증서 문제로 발생하는 경우에만 임시로 사용하는 것이 좋다.

 

---

 

ERROR 4. Port 3000이 이미 사용 중인 경우

❌ 오류메시지

Something is already running on port 3000 probably

 

❗ 원인

이미 다른 프로그램이 3000번 포트를 사용하고 있다.

 

⭕ 해결 방법

CRA에서 다음과 같이 묻습니다.

Would you like to run the app on another port instead?

 

Y를 입력하면 다른 포트(예: 3001)에서 실행됩니다.

 

---

 

ERROR 5. We no longer support global installation of create-react-app

❌ 오류메시지

We no longer support global installation of create-react-app

 

❗ 원인

예전에 create-react-app을 전역(Global)으로 설치한 경우 발생하는 오류이다.

 

⭕ 해결 방법

기존 전역 설치를 제거한다.

npm uninstall -g create-react-app

 

이후 다시 실행합니다.

npx create-react-app my-app

 

---

 

✉ 설치 중 나오는 메시지 ✉

npx를 처음 실행하면 아래와 같은 메시지가 나타날 수 있다.

 

Need to install the following packages:
create-react-app
Ok to proceed? (y)

이것은 오류가 아니다.

npx가 필요한 패키지를 일시적으로 다운로드해서 실행해도 되는지 묻는 정상적인 확인 메시지이다.

Y를 입력하고 Enter를 누르면 설치가 계속 진행된다.

 

 

📋 핵심 오류 요약표 📋

오류	해결 방법
npx를 인식하지 못함	터미널을 Command Prompt로 변경하거나 Node.js 설치 확인
npx.ps1 실행 불가	PowerShell 실행 정책을 RemoteSigned로 변경
UNABLE_TO_VERIFY_LEAF_SIGNATURE	npm config set strict-ssl false 실행 (필요 시 임시 사용)
Something is already running on port 3000	다른 포트 사용(Y) 또는 기존 프로세스 종료
We no longer support global installation...	npm uninstall -g create-react-app 실행 후 npx로 다시 설치