[React] CRA (Create React App)을 이용해 React 프로젝트 생성

React – A JavaScript library for building user interfaces

 

 

 

 

 Create React App 

 

 

▶  Create React App (CRA) 란?

 

React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate)

 

-  수많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰인다.

-  프로젝트 생성에 필요한 다양한 기능을 Command로 제공한다.

 

 

 

 

 

▶  CRA의 장점

 

1)  개발자가 온전히 React App 개발에 집중할 수 있도록 한다.

 

→  상대적으로 덜 중요한 코드는 노출되지 않음

→  강력한 Command 지원

 

 

2)  대부분의 브라우저에서 해석될 수 있도록 transcompile을 지원한다.

 

→  Babel

→  배포 시 코드 번들링

→  Webpack

 

 

 

 

 

 

▶  CRA 시작하기

 

!! CRA를 시작하기 전 node.js가 설치되어있지 않다면 node.js 먼저 설치 필요

Node.js

 

 

 

1)  npx로 create-reate-app 프로젝트 만들기

npx create-reate-app <디렉토리명>
cd <디렉토리명>		# cd <디렉토리명> 으로 이동
npm start		# 현재 디렉토리의 프로젝트 실행

 

* npx  -  npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어

 

 

 

 

2)  디렉토리 구조 살펴보기

 

./node_modules/

:  npm을 이용해 설치한 패키지들 모음

 

./public/

:  정적인 파일들을 모아 놓는 곳

 

./src/

:  리액트 개발을 위한 파일들을 모아 놓는 곳

 

./.gitignore

:  Git을 이용할 경우 불필요한 파일을 무시할 수 있도록 하는 설정파일

 

./package.json

:  프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일

 

./README.md

:  내 프로젝트에 관한 설명을 작성하는 파일

 

 

 

 

3)  라이브러리 설치하기

 

 npm install 

:  package.json 파일 내에 정의된 패키지 모두 설치

 

 npm install <패키지명> 

:  npm 서버로부터 패키지 내려받기

 

 npm install <패키지명>@<version> 

:  특정 버전의 패키지 내려받기

 

 npm install <Git 레포지토리 주소> 

:  npm이 아닌 Git 레포지토리로부터 패키지 내려받기

 

 

→  설치된 라이브러리들은 package.json 파일 내의 dependencies(의존성) 라는 키 아래 나열된다.

 

 

* [참고] 

버전명에는 ^(캐럿), <, <=, >, >= 등의 기호를 이용해 범위를 나타낼 수 있다.

 

^(캐럿) 예시

^1.0.2	1.0.2 <=  x  < 2.0
^1.0	1.0.0 <=  x  < 2.0
^1	1.0.0 <=  x  < 2.0

 

 

 

 

4)  라이브러리 불러오기

 

-  CSS나 import하는 것만으로 역할을 하는 라이브러리인 경우 패키지명을 바로 import 한다.

import "패키지명"
import "./App.css";

 

-  기본적으로 패키지를 불러와 활용할 때에 는 할당할 이름을 작성한다.

import something from "패키지명"

 

-  패키지 내의 일부 메소드나 변수만 가져올 때는 구조분해를 하여 가져오는 것이 효율적이다.

import { a, b } from "패키지명"

 

-  패키지에 default로 export되는 객체가 존재하지 않을 경우 * as 이름 으로 불러올 수 있다.

import * as something from "패키지명"

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.