[ReactJS] Visual Studio Code + create-react-app으로 프로젝트 환경 구성 (React 기본 -2장)

2019/03/26 - [ReactJS] - [ReactJS] ReactJS 시작하기 (React 기본 -1장)

1. create-react-app이란?

React를 활용해 개발을 하기위해선 기본적으로 자바스크립트 외부 모듈인 react, react-dom, react-scripts 이 세가지의 모듈이 필수로 존재해야됩니다.,

또한 webpack, babel과 같은 외부 모듈을 이용해 ECMAScript 기준으로 비교적 상위 버전의 문법을 지원하지 않는 브라우저를 위해 상위 버전의 문법으로 작성된 자바스크립트 소스파일을 보다 낮은 버전의 문법으로의 변환 또는 트랜스파일링(Transfiling)을 가능하게하는 로직들도 직접 구성해야됩니다.

그러나 create-react-app이란 모듈은 앞서 언급한 과정들을 직접 할 필요없도록 아주 손쉽게 React 기반의 프로젝트 개발 환경을 구성해주는 모듈입니다. 

 

 

2. create-react-app 모듈 설치

여러가지의 외부모듈을 설치하기 위해서는 npm, yarn과 같은 패키지 매니저가 필요합니다.

PC에 Node.js가 설치되어 있다면 Node.js 설치를 진행할때 npm이 기본적으로 같이 설치되면서 환경변수도 함께 설정이 됩니다.

 

1. NPM 설치여부 확인 : 단축키 win + R -> cmd 입력

- NPM을 최신버전으로 업데이트하는 명령어 : npm install --global npm

 

2. NPM으로 create-react-app 모듈 설치

create-react-app 모듈은 상당히 유용하고 자주 쓸 모듈이기때문에 --global옵션 부여해서 설치하곘습니다.

 

3. React 프로젝트 폴더 생성하기

프로젝트 폴더가 성공적으로 생성되었을때의 화면입니다.

 

4. 생성한 React 프로젝트 실행하기 : 명령어 npm start 입력

 

5. 프로젝트 실행이 성공적으로 이루어졌을때의 상태

기본적으로 React의 기본 Port번호는 3000번 입니다.

 

3. 본격적으로 React 실습환경 셋팅하기

1. 생성된 React 프로젝트 폴더를 Visual Studio Code에 가져옵니다.

생성하신 폴더를 선택하셔서 Open하시면 됩니다.

 

2. create-react-app을 이용해 생성한 프로젝트의 기본 디렉토리 구조

갖가지의 파일은 처음 실행했을때 웹사이트 상에서 React 로고가 돌아가는 화면을 출력하기 위한 여러가지의 파일이 많이 존재합니다.

 

3. 개발에 필요없는 파일 삭제하기

• src/App.css
• src/index.css
• src/logo.svg
• public/favicon.ico
• public/manifest.json

위과 같은 구조로 만듭니다.

 

4. 남아있는 소스 파일 내용중에서 우리가 제거한 파일을 참조하는 부분을 다 지워줍니다.

- src/App.js

- src/index.js

- src/index.html

필요없는 주석들도 모두 지워줍니다.

 

5. React 프로젝트 메인 페이지에 Hello React 문구 출력하기

- src/App.js

 

 

이번장에서는 앞으로 React의 학습을 위해 create-react-app 모듈을 설치를 시작으로하여 프로젝트 폴더를 생성하고 Visual Studio Code를 통해 작업하기 위한 준비를 해봤습니다.

 

다음장부터 본격적으로 React의 문법에 대해 차근차근 배워보도록 하겠습니다.