React에 대해 공부하기-2 CRA로 리액트 만들기!

 

오늘은 실습교육시간에 배운 CRA에 대해 정리하고 프로젝트 초기 세팅을 해보려고 한다!

 

 

 

CRA란?

 

Create React App : Set up a modern web app by running one command.

[출처 : React 공식 문서]

 

 

CRA란 리액트 프로젝트를 시작할 때 기본 개발 환경설정을 간편하게 해 줄 수 있는 방법이다.

CRA를 사용하면 바벨, 웹팩 등 복잡한 설정들을 세팅해 주고 필요한 기본 패키지등을 설치해주기 때문에 매우 간편하게 리액트를 사용할 게 있게 해 준다!

 

일단

프로젝트를 생성할 폴더를 설정하고

터미널을 열어 

npx create-react-app "프로젝트명"

 

을 입력하면 설치가 완료된다.( 중간에 y를 눌러주면 계속 진행된다.)

 

근데 나는 설치도중 오류가 발생해서 그 오류에 대해 정리해 보겠다

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\doogu\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\doogu\AppData\Roamingta\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\doogu\AppData\Local\npm-cacal\npm-cache\_logs\2023-11-19T05_54_53_953Z-debug-0.log

이런 오류가 발생해서 구글링 해보니 여러 방법이 있지만 다 실패했다.
(node -v로 node의 버전이 맞는지도 확인해 봤고,

폴더의 위치도 변경해 봤지만 해결이 안됐다.)

그중에 
user/Appdata/Roaming 경로 아래 npm폴더를 생성하고 재실행하라는 글을 참고했더니
신기하게도 해결이 되었다!!!

 

+++추가

Cannot create a project named "Minzo" because of npm naming restrictions:     

  * name can no longer contain capital letters

Please choose a different project name.

 

이러한 오류도 발생했다. 이것은 프로젝트명의 대문자가 들어가면 안 된다는 말이다.
"minzo"로 수정해 주니 정상적으로 작동했다!!!

 

이런 식으로 완료가 되었다!!!

 

이제 npm start를 git bash에서 입력하면

짜잔 이렇게 잘 가동되는 걸 알 수 있다!

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript