React 작업 환경

이나영·2021년 9월 14일
0

React

목록 보기
2/10

1. Node.js

1) 정의

: JavaScript가 브라우저 밖에서도 동작하게 하는 환경.

기존 JavaScript가 브라우저 안에서 웹 동작을 제어했다면 Node.js는 반대로 JavaScript가 원하는 웹 페이지를 생산해낼 수 있도록 해주는 환경을 말한다.

JavaScript의 "탈 웹"이라 부른다.

2) 사용 이유

사실 React app이 Node.js와 직접적인 연관이 있는 것은 아니나 프로젝트 개발에 필요한 주요 도구들(ex. CRA, Babel, Webpack)이 Node.js 기반이기 때문이다.

(+) Babel: 최신 문법을 옛날 문법으로 바꿔준다.
(+) Webpack: 분리된 파일들을 하나로 합쳐준다.

2. npm

1) 정의

: Node Package Manager

Node.js로 실행하는 패키지들을 관리해준다.

2) 설치

Node.js를 설치하면 npm도 함께 자동 설치된다.

3. CRA(Create-React-App)

1) 정의

: React 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain).

2) 사용 이유

개발자가 개발 환경을 하나하나 구축하기에 상당히 힘이 드는데, 이걸 해결해주는 게 바로 toolchain이다. CRA는 그 툴체인 중 하나. 왜 굳이 CRA를 쓰냐고 묻는다면 바로, 공식 문서에 CRA를 쓰라고 나와있기 때문이다. (의외로 싱거운 이유)

4. 명령어

//React 프로젝트 생성
npx create-react-app (프로젝트명)
.
.
프로젝트 폴더로 이동
.
.
//React 프로젝트 실행
npm start

0개의 댓글