[React] VS Code로 Create React App 사용하기

---

VS Code로 Create React App 사용하기

---

React 프로젝트를 진행하기 위해서는 Webpack, Babel 등의 라이브러리 설정이 필요하다.

해당 라이브러리는 기능적인 면에서도 매우 넓고 다양하여 모두 다 학습하고 설정하는 데에는 프로젝트 시작 전에 너무 많은 시간이 소요될 것이다.

이렇게 모든 걸 학습하고 적용하기엔 물리적인 시간이 부족하기 마련이다. 

 

이를 해결하기 위해 React를 개발한 페이스북에서는 Create React App이라는 CLI 도구를 제공하고 있다.

Create React App을 활용하면, 기초 세팅이 완료되어 있어 바로 React 프로젝트를 진행할 수 있다.

 

Create React App은 Boiler Plate 라는 단어로 설명할 수도 있다.

Boiler Plate는 미국 신문 업계에서 유래한 단어로 동일한 내용을 효율적으로 출력하기 위하여, 최소한의 변경으로 반복적으로 재사용하기 위해 작성된 모형을 의미한다.

즉, 프로그래밍에서는 큰 수정없이 반복적으로 사용되는 코드를 말한다.

Create React App 역시 초기 기능의 코드를 한 패키지로 생성하여 해당 패키지를 크게 수정없이 계속 사용하는 것이기 때문에 Boiler Plate로 볼 수 있다.

 

 

 

 

---

VS Code(Visual Studio Code)로 Create React App 사용하기

---

1. VS Code(Visual Studio Code) 설치

링크 ->  https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

▶ Visual Studio Code 홈페이지에 접속하여 PC OS에 맞는 인스톨러를 다운받아 설치한다.

설치할 때는 별다른 선택 옵션없이 계속 '다음'을 클릭하면 된다.

 

2. node.js 설치

링크 -> https://nodejs.org/en/download

node.js 설치

▶ node.js 홈페이지에 접속하여 PC OS에 맞는 인스톨러를 다운받아 설치한다.

설치할 때는 별다른 선택 옵션없이 계속 '다음'을 클릭하면 된다.

 

3. 폴더 추가

▶ [Open Folder]를 클릭하여 저장할 폴더를 지정한다.

VS Code 폴더 및 파일 생성

 

▶ 여기서는 'react' 이름으로 새 폴더를 생성하여 선택하였다.

폴더 지정

 

▶ 폴더를 선택하면 좌측에 선택한 폴더가 조회되는 것을 볼 수 있다.

추가 폴더 확인

 

4. Terminal

▶ Create React App 설치를 위해 Terminal을 연다.

[View] > [Appearance] > [Panel] 을 클릭하면 하단에 Terminal이 보여진다.

[View] > [Appearance] > [Panel]

terminal

 

5. npx 설치 확인

▶ Create React App 설치를 위해서는 npx가 먼저 설치되어 있어야 한다.

아래 코드를 기입하여 npx가 설치되어 있는지 확인한다.

npx -v

npx 확인

 

위 그림처럼 npx의 버전이 나오지 않으면, npx 설치부터 진행이 필요하다.

아래 코드를 기입하여 npx 설치를 진행해준다.

npm install -g npx

 

6. Create React App

▶ npx 설치가 완료된 후에는 Create React App을 진행해주면 된다.

[Project Name]에는 본인이 진행할 프로젝트 이름을 기입하면 된다.

npx create-react-app [Project Name]

create react app (1)

create react app (2)

 

▶ create react app은 컴퓨터 사양 혹은 환경에 따라 다르긴 하지만, 평균적으로 3~5분 정도면 생성이 완료되는 듯하다.

생성이 완료되면 좌측의 폴더 하위에 방금 create react app으로 생성한 프로젝트가 보이게 된다.

Project

 

7. React App Start / Stop

▶ 처음 폴더에서 terminal을 열었으므로 현재 경로는 해당 처음 폴더로 되어있다.

하지만 create react app을 통해 생성된 프로젝트는 해당 폴더 하위에 생성되었으므로, 해당 프로젝트로 경로를 변경한다.

cd [Project Name]

 

▶ React App을 실행하기 위해 아래 코드를 기입하여 시작한다.

npm start

 

Project Start

 

▶ 프로젝트를 시작하면, 아래 코드가 실행되며 웹 브라우저가 구동이 된다.

해당 브라우저는 localhost로 접속이 되므로 외부에서는 접속이 불가능하다.

Project Start 실행 결과

Project Start 웹 브라우저

 

▶ 구동된 서버를 종료하기 위해서는 terminal에 [Ctrl] + c를 누르면 아래와 같이 종료에 대한 메시지가 나오며, 해당 질문에 y 라고 답함으로 서버를 종료할 수 있다.

웹 서버 구동 종료

 

 

 

 

React App을 기본적으로 구현하였으니 안에 코드에 컴포넌트 등을 생성 및 수정하면 된다 !