[React] 리액트 프로젝트 시작 세팅하기(CRA)

 

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *

 

리액트 프로젝트를 만들기 위한 준비물

1.  Node.js
2.  vscode

 

리액트 프로젝트를 만드는 방법은 간단합니다. Node.js와 에디터만있으면 됩니다.

Node.js는 LTS(Long Term Support) 버전으로 다운받아줍니다.

 

https://nodejs.org/ko/

Node.js

 

 

 

에디터는 가장 유명하고 사용하기 쉬운 vscode를 쓰겠습니다.

본인의 운영체제에 맞게 다운받아줍니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

Node.js 와 vscode를 설치하셨다면 준비는 끝났습니다.

이제 터미널에서 커맨드로 리액트 프로젝트를 생성해보겠습니다.

 

프로젝트 생성

 

npx create-react-app 프로젝트 폴더명

 

 

react 프로젝트를 설치하고 싶은 폴더명으로 react를 설치해줍니다.

단, 프로젝트 폴더명은 대문자, 특수문자를 쓰면 오류가 발생하니 주의합니다.

 

* npx는 npm 5.2버전부터 기본 제공되는 모듈입니다. 해당 모듈로 패키지를 설치하면 처음 한 번만 실행하고 삭제됩니다.

이 때 설치되는 패키지는 항상 최신 버전입니다. 그러므로 어떤 버전을 설치하는지 고민할 필요가 없습니다.

 

* create-react-app은 react 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트입니다.( 재사용 될 수있는 틀같은 의미입니다. )

facebook에서 직접만들어 관리하기때문에 가장 많이 쓰이고, 그만큼 지속적인 관리가 이루어지는 패키지입니다.

줄여서 CRA는 개발자가 온전히 리액트 프로젝트에 집중할 수 있도록 상대적으로 덜 중요한코드는 숨겨줍니다.

자체적으로 transcompile(모든 브라우저에서 해석될 수 있도록) 모듈로 babel을, 배포시 코드 번들링모듈로 webpack 내장하고있는 강력한 도구입니다.

 

 

npx create-react-app 프로젝트 폴더명

cd 프로젝트 폴더명 //프로젝트를 실행하기위해 우선 생성한 폴더명으로 들어가야 합니다.

npm start

 

처음 프로젝트를 설치할 때 시간이 조금 소요됩니다.

마지막에 happy hacking! 이라는 문구가 뜨면 정상적으로 설치가 끝났습니다.

 

프로젝트를 실행하기위해선 먼저 리액트가 설치된 폴더로 들어가는 것을 잊지마세요! 

 

여기서 새로운 폴더를 만들지않고 현재 경로에 프로젝트를 설치하고 싶다면,

npx create-react-app .

을 해주시면 됩니다.

 

 

여기까지 한 번 정리해보면 저는 보통 이렇게 시작합니다.

mkdir tanglog // tanglog 폴더 생성
cd tanglog    // tanglog 폴더로 이동
code .		  // tanglog 즉, 현재경로로 vscode 폴더열기
npx create-react-app . // 현재폴더에 react앱 설치

 

성공적으로 설치되었습니다!

 

 

참고 - https://basemenks.tistory.com/232

 

 

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *