CRA
= create react app
= 리액트 보일러플레이트
= 편하게 리액트 프로젝트를 만들어주는 도구
보일러플레이트?
컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.
개발자들에게 불필요하고 복잡하고 도움이 안 되는 반복적인 일들을 하지 않도록 도와주는 것이 보일러 플레이트
- 반복적으로 사용되는 부분을 재사용
- 최소한의 수정으로 재사용
- 개발자를 단순 작업으로부터 해방
CRA가 이 ‘보일러플레이트’의 역할을 해주기 때문에 ‘리액트 보일러플레이트’라고 한다.
요약하자면, 보일러플레이트의 장점 :
- 반복적으로 사용되는 부분을 재사용
- 최소한의 수정으로 재사용
- 개발자를 단순 작업으로부터 해방
CRA가 이 ‘보일러플레이트’의 역할을 해주기 때문에 ‘리액트 보일러플레이트’라고 한다.
(리액트 공식 홈페이지를 참고하면 더 좋다)
React는 UI기능만 제공한다. 따라서 전역 상태 관리, 라우팅, 빌드 시스템을 개발자가 직접 구축해야 한다.
그렇기 때문에 CRA는 react 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 아주 편리한 도구.
webpack과 babel등을 이용하여 file loader, build tools, es6 문법 지원, eslint, jest(테스트) 등 개발에 필요한 유용한 기능들을 npx create-react-app 이라는 명령어 한 줄로 다 제공하기 때문에 따로 리액트 개발환경을 구축하거나 설계할 필요가 없어 많은 개발자들이 애용하고 있다.
CRA 로 React 파일 생성하기
1. npx create-react-app “폴더 이름” : 새로운 폴더를 생성 + 그 폴더에 리액트 프로젝트 생성
or ⇒ npm init react-app . :현재 디렉토리에 리액트 프로젝트를 생성
- (환경 : window, vscode 터미널에서 진행)
- npm (node package manager) = js를 위한 패키지 관리자.
특히, js의 런타임 환경인 node.js의 기본 패키지 관리자이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.
- init = 초기화
2. cd + “디렉토리 이름” : 리액트 프로젝트를 생성한 위치로 이동
3. npm run start/npm start : 서버 실행 (=개발 모드로 프로그램 시작)이런 식으로 웹 브라우저에서 포트 번호를 이용해 접근 가능
or ⇒ localhost:3000
성공적으로 진행이 되었다면 다음과 같은 화면이 보인다.
4. ( Optional ) npm run build : 개발된 프로젝트 빌드
배포 환경에서 사용할 파일 생성
(작업 진행 중에는 사용할 필요가 없다. 프로젝트를 모두 완성한 뒤에, 이를 배포할 때에 사용. 이 명령어를 통해 지금까지 작업한 프로젝트를 배포 가능한 버전의 파일로 생성한다.)
→ 해당 build를 실행하면, 프로젝트 폴더에 전에는 존재하지 않던 build 라는 폴더가 새롭게 생성된다. 이 폴더는 말 그대로 배포 가능한, 빌드된 파일들이 저장된 폴더
5. ctrl + C : 서버 닫음 (=개발 모드 종료)
CRA를 사용하지 않고 React 환경 설정을 직접 만드려면?
react 설치와 웹팩, 바벨 등의 외부 패키지 설치 등 모두 직접 수행해야 한다.
IDE나 에디터로 생성할 시 해당 세팅을 일일이 해줘야 한다.
CRA로 만드는 이유는??
말 그대로 간편하다.
CRA가 없었다면 웹팩에서부터 여러 가지 설정들을 스스로 만들어야 한다.