CRA 리액트 프로젝트 생성할 때 자주 생기는 에러 페스티벌

Error case

---

 

CRA 로 리액트 뉴프로젝트를 빌딩하는 상황에서 일어나는 에러 입니다.

 

https://lshjju.tistory.com/106

create react app tool chain

---

처음 리액트 설치하는 경우 다양한 에러가 자주 일어납니다.

가장 많이 일어나는 에러케이스 몇가지를 아래에 정리했으니 참고 바랍니다.

---

---

ERROR

---

 

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

 

'npx' 용어를 인식할 수 없다는 에러는 주로 Visual Studio Code에서 터미널이 PowerShell로 설정되어 있을 때 발생 합니다. PowerShell에서는 npx 명령어를 바로 인식하지 못하는 경우가 많습니다. 

이렇게 해봅니다.

---

Ctrl + Shift + P (또는 Cmd + Shift + P)를 눌러서 명령 팔레트를 열어주세요.
검색창에 terminal: Select Default Profile이라고 입력하고 선택해주세요. 
목록 중에서 Command Prompt를 선택해주세요. 이렇게 하면 기본 터미널이 PowerShell 대신 cmd로 바뀌게 된답니다. 
현재 열려있는 터미널을 닫고 다시 새 터미널을 열어 npx 명령어를 다시 실행해보세요!
만약 그래도 동일한 에러가 계속 나온다면, Visual Studio Code를 완전히 껐다가 다시 켜서 시도해 주시면 대부분 해결될 거예요. 

 

그런데 사실 파워셀로도 잘 설치되는 경우가 많습니다.

결론은

CRA 가 나쁜놈 입니다.

---

 

CRA 명령어를 다시 입력 해 봅니다.

잘 설치 되었다면 축하 합니다.

 

---

---

ERROR 

---

 

npx create-react-app .

npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execu....

 

이런 에러가 생겼다면 축하합니다.

아래 방법으로 신속 간단하게 해결 가능 합니다.

---

 

Window10 기준으로, Windows PowerShell 앱을 통하여 시스템의 스크립트 실행권한을 변경하여 해결할 수 있습니다.

 

Windows PowerShell 

관리자 권한 실행

 

파워쉘을 처음 사용한다면 아래 포스팅을 참고 하세요.

https://lshjju.tistory.com/69

CMD n Powershell setting

 

---

 

현재 권한상태를 확인합니다.
 > get-ExecutionPolicy
상태값 "Restricted" 으로, 로컬에서 작성한 스크립트를 실행할 수 없는상태여서 오류가 발생한 것입니다.

- 권한 상태값
 Restricted : default설정값으로, 스크립트 파일을 실행할 수 없습니다.
 AllSigned : 신뢰할 수 있는(서명된) 스크립트 파일만 실행할 수 있습니다.
 RemoteSigned : 로컬에서 본인이 생성한 스크립트와, 신뢰할 수 있는(서명된) 스크립트 파일 실행할 수 있습니다.
 Unrestricted : 모든 스크립트 실행가능
 ByPass : 경고/차단 없이 모든 것을 실행가능하도록함
 Undefined : 권한을 설정하지 않겠음

---

 

권한 상태를 "RemoteSigned"으로 변경합니다.
  > Set-ExecutionPolicy RemoteSigned
  > Y

---

 

권한이 정상적으로 변경되었는지 다시 확인
 > get-ExecutionPolicy

 RemoteSigned

---

VSCode로 돌아가서 터미널 명령을 다시 수행하여 오류가 해걸되었는지 확인
 - 처음에 실행되지않았던 명령이, 이제는 정상적으로 수행되었습니다.

---

---

ERROR 

---

 

크리에이트 리액트 앱 실행

---

 

UNABLE_TO_VERIFY_LEAF_SIGNATURE 에러 발생

---

 

npm config set strict-ssl false

 

코드 입력

---

 

다시 실행

---

 

y 입력 후 엔터

---

 

잘 되는지 첵

---

---

ERROR Festival

---

Something is already running on port 3000 probably

 

누군가 3000 포트를 쓰고 있다는 뜻입니다.

포트를 다른것으로 바꾸겠냐고 물어보면 예스 하고 포트를 변경하면 됩니다.

 

---

We no longer support global installation of create react ....

 

npm uninstall -g create-react-app

위 코드 입력

---

need to install the following package:

 

ok to proceed?

y 입력하고 엔터

---

---

이것저것 다했는데 그래도 무조건 안된다면?

---

일단 심호흡을 합니다.

명상도 살짝 합니다.

 

그리고 멋진 자세로 코드샌드박스에 로그인 합니다.

 

https://lshjju.tistory.com/143

code sandbox manual - 코드샌드박스로 리액트 프로젝트 생성하기

 

 

일단 리액트 온라인 에디터 코드샌드박스로 진행 합니다.

---