[week_08] React 기초 Ⅰ(4) React 프로젝트 생성

1. Create React App (CRA)

• React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate)
• Facebook에서 직접 만들어서 관리한다.
• 프로젝트 생성에 필요한 다양한 기능들을 Command로 제공한다.

1-1. Create React App (CRA)의 장점

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

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

2) (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원

• Babel 기본 내장
• 배포 시 코드 번들링
• Webpack 기본 내장

 

2. Node.js / NPM 소개

• Create React App으로 React 프로젝트 시작 시 Node.js 개발 환경을 제공한다.
• Node.js : Create React App으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용된다.
• NPM : Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소, React와 관련된 모듈들이 NPM에서 배포되고 있다.

 

3. React 프로젝트 생성해보기

npx create-react-app <디렉토리명>
cd <디렉토리명>
npm start

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

3-1. 디렉토리 구조 살펴보기

1) ./node_modules/ : npm을 이용해 설치한 패키지들 모음

2) ./public/ : 정적인 파일들을 모아 놓는 곳

3) ./src/ : 리액트 개발을 위한 파일들을 모아 놓는 곳

• public의 index.html이 최초 실행된 후 src의 index.js가 실행된다.

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

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

6) ./README.md : 내 프로젝트에 관한 설명을 작성하는 파일

 

4. 라이브러리 설치와 불러오기

npm install
npm install <패키지명>

npm install <패키지명>@<version>
npm install <Git 레포지토리 주소>

라이브러리 설치 후 package.json에 설치한 모듈들이 자동으로 정리된다. package.json의 dependencies(의존성)라는 키 아래에 설치한 패키지 목록이 나열된다.

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

설치한 라이브러리는 import를 통해 프로젝트 내에서 불러올 수 있다.

import "패키지명"

import something from "패키지명"

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

import * as something from "패키지명"

1) import "패키지명"

• CSS 혹은 import 하는 것 만으로도 역할을 하는 라이브러리인 경우
• JS 파일의 경우에는 확장자를 생략 가능하지만, 그 외의 파일의 경우에는 확장자를 작성해 주어야 한다.
• ex) import "./App.css"

2) import something from "패키지명"

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

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

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

4) import * as something from "패키지명"

• 패키지에 default로 export 되는 객체가 존재하지 않을 경우 * as 이름