Create React App

꼭 Create React App을 사용해야 하는 것은 아니고, 직접 script를 임의로 추가해서 사용해도 무방하다 (단지 프로젝트 환경 설정을 쉽게 도와줄 뿐이다.)

Create React App(CRA)란?

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

• 수 많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어 관리하는 보일러플레이트이기 때문에 가장 많이 사용된다.

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

  CRA의 장점

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

• 상대적으로 덜 중요한 코드는 노출되지 않는다.
• 강력한 Command를 지원한다.

2. (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile을 자동으로 지원한다.

   Transcompile이란?: 브라우저에서 해석할 수 있는 JS 버전이 각각 다른데, 이를 모든 브라우저에서 해석할 수 있도록 변환을 하는 작업.

• Babel
• 배포 시 코드 번들링
• Webpack

Node.js / NPM

• Create React App으로 React 프로젝트 시작 시 Node.js 개발 환경을 제공한다.
• Node.js와 NPM에 대해 알고 있다면 이해에 큰 도움이 된다.

Node.js

• 주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼
• 2009년 발표, 2021년 기준 v16까지 업데이트 되어있다.
• 프론트엔드 개발자의 서버 개발 접근성을 높여주었다.
• HTTP 통신 관련 라이브러리를 내장하고 있다.
• NPM을 통한 방대한 라이브러리를 제공한다.
• Create React App으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용된다.

NPM

• Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소.
• Node.js 설치 시 함께 설치된다.
• 패키지 관리 뿐만 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공한다.
• React에서 사용되는 다양한 모듈들이 NPM에서 배포되고 있다.

Node.js를 설치할 경우, 안정적인 LTS(Long-Term-Support) 버전을 설치하는 것을 권장한다.

React 프로젝트 생성

bash

npx create-react-app <dir name>
cd <dir name>
npm start

• npx: npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어.
• cd: 디렉토리 명으로 이동한다.
• npm start: 현재 디렉토리의 프로젝트를 실행한다.

npm install(혹은 i) 
npm install 패키지명 
npm start
npm bulid
(ctrl + c)

npm install: package.json에 정의된 depnedency(의존성 패키지)들을 설치한다.
npm install 패키지명: npm 서버로부터 원하는 패키지를 내려 받는다.
npm start: 프로젝트를 실행(Node.js 서버 이용.)
npm build: 프로젝트를 빌드
(Ctrl + C): 명령을 중지한다.(npm start 후 종료하기).

CRA 디렉토리 구조

• ./.node_modules/: npm을 이용해 설치한 패키지 모음
• ./public/: 정적인 파일들을 모아놓은 곳 (index.html 등)
• ./src/: 리액트 개발을 위한 파일들을 모아 놓은 곳 (App.js, index.js)
• ./.gitignore: Git을 이용할 경우 불필요한 파일을 무시할 수 있도록 하는 설정파일
• ./package.json: 프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일
• ./README.md: 내 프로젝트에 관한 설명을 작성하는 파일

라이브러리 설치 및 불러오기

라이브러리 설치

bash

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

npm install 패키지명 
//npm 서버로부터 패키지 내려받기

npm install 패키지명 @version 
//특정 버전의 패키지 내려받기

npm install Git 레포지토리 주소 
//npm이 아닌 Git 레포지토리로부터 패키지 내려받기

Package.json

dependencies(의존성)라는 키 아래에 설치한 패키지 목록이 나열된다.

설치한 라이브러리 프로젝트 내에서 불러오기

JS

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

2. 기본적으로 패키지를 불러와 활용할 때에는 할당할 이름을 작성
import something from '패키지명'

3. 패키지 내의 일부 메소드나 변수만 가져올 때는 구조분해할당으로 import
import { a, b } from '패키지명'

4. 패키지에 default로 export되는 객체가 존재하지 않을 경우 * as '이름'으로 불러움
import * as something from '패키지명'

5. 별도의 CSS 파일을 작성 후 프로젝트에 적용할 경우, import시 스타일 적용
import './App.css';