TIL no.24 - CRA 무엇인가, 어떻게 ?

지난 블로그 편에서 작성했던 리액트 정리에서 다루었던 CRA 에 대해서 간단하게 정리해보려고 합니다 !

 

 

CRA (Create-React-App)

UI 기능만을 제공하는 리액트는 이와 같은 이유때문에 프레임워크가 아닌 라이브러리로 정의되고 있습니다. 

따라서 개발자가 직접 구축해야 하는 것이 많아 처음 시작하는 개발자에게 초기 설정이 어렵게 다가올 수도 있습니다.

리액트에서 이러한 어려움을 해결하기 위해 CRA 라는 것이 생겨났습니다.

CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공하며 이것을 이용한 명령어 하나로 리액트의 개발환경을 구축할 수 있습니다. 리액트 초기설정 시 기초적으로 필요한 환경을 제공해주고 후에 새로운 기능을 추가했을 때 새로운 패키지 버전만 업데이트 해주면 됩니다.

 

 

CRA 어떻게 ?

- 원하는 폴더에 진입

 

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

  위 명령어를 세팅할 폴더에서 터미널을 켜고 입력해줍니다.

 

- cd <프로젝트 폴더명>

  프로젝트로 들어갑니다.

 

- npm start

  이 명령어로 시작하면 새로운 화면에 react 가 실행됩니다.

 

 

CRA 파일 구성

✅ create-react-app 으로 초기세팅이 완료된 폴더안에 구성된 파일 중에 일부 아이들에 대한 기본 설명만 추가하겠습니다.

 

- node.modules

: CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

 

- package.json

: CRA 기본 패키지 세팅 이후로 추가로 설치되거나 업데이트된 라이브러리 및 패키지들에 대한 정보가 기록되는 파일.

 

- .gitignore

: .gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있습니다.

  push해도 이 파일에 작성된 폴더와 파일은 올라가지 않습니다.

  github 에 파일들을 업로드한 후, github 자체에 너무 방대한 데이터를 저장하게 되는 불필요함을 해결하기 위해서 

  이 파일 이외의 것들을 clone 하고 그 이후에 필요한 패키지들을 각자 내려받는 방식으로 진행하게 됩니다.