[React] 작업 환경 설정

수민🐣·2022년 2월 5일
0

React

목록 보기
1/36

1. Node.js와 npm

크롬 V8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있게 해준다. (ex. 웹서버, 모바일 애플리케이션, 데스크톱 애플리케이션)
node.js에서 ECMPScript6(자바스크립트 공식 문법)를 호환시켜주는 바벨(babel), 모듈화 된 코드를 하나로 합치고 코드 수정시 웹 브라우저를 리로딩하는 등의 역할을 하는 웹팩(webpack) 등이 있다. node.js를 설치할 때 패키지 매니저 도구인 npm도 같이 설치된다.

🔎 npm이란?
패키지 매니저 도구. 다른 개발자가 만든 패키지(재사용 가능 코드)를 설치하거나 설치한 패키지의 버전 관리를 할 수 있도록 도와준다. 리액트 또한 하나의 패키지다.

Node.js 설치


2. 에디터 설치

에디터는 본인이 사용하기 편한 걸로 사용하면 된다. 나는 Visual Studio Code를 사용한다.

Visual Studio Code 설치


3. Git 설치

형상 관리 도구로 프로젝트 버전을 관리하고 협업의 핵심적인 역할을 한다.

Git 설치


4. create-react-app으로 프로젝트 생성하기

리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다.

프로젝트 생성

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

프로젝트 생성이 끝난뒤

cd <프로젝트명>
npm start

브라우저에서 자동으로 리액트 페이지가 띄어진다

0개의 댓글