리액트 | create-react-app을 이용한 리액트 프로젝트 생성

create-react-app 커맨드를 이용해 리액트 프로젝트를 생성하는 방법에 대해 정리하고자 한다.

---

crate-react-app 커맨드란?

create-react-app 커맨드는 리액트 프로젝트에 필요한 기본 설정들을 자동으로 생성해주는 커맨드이다. 리액트 어플리케이션을 만드는데 필요한 많은 script와 기본 사전 설정들을 자동으로 만들어준다.

 

create-react-app 커맨드를 통해 리액트 프로젝트를 생성하면 아래와 같은 기본적인 기능들을 제공한다.

• 개발 서버 접근
• 자동 새로고침
• 어플리케이션 내 필요한 기본 script 및 setting 자동 생성

위에 적은 것 이외에도 많은 기능들을 제공한다.

---

node.js 설치

create-react-app 커맨드를 사용하기 위해서는 node.js를 설치해야 한다.

 

node.js는 아래 사이트에서 다운받을 수 있다.

https://nodejs.org/en

Node.js

 

설치 파일을 다운받은 후 설치가 완료되면 터미널(cmd 혹은 powershell)을 열어 node -v 커맨드가 정상적으로 실행되는지 확인한다.

node.js가 정상적으로 설치되었다면 해당 컴퓨터에 설치되어 있는 node.js의 버전이 출력될 것이고, 에러가 출력된다면 정상적으로 설치된 것이 아니니 node.js를 클린삭제 후 컴퓨터를 재시작하여 다시 설치한다.

 

이후 npx 커맨드도 정상적으로 실행되는지 확인한다.

 

node -v 커맨드와 npx 커맨드가 정상적으로 실행된다면 node.js가 정상적으로 설치된 것이다.

---

새로운 리액트 프로젝트 시작

새로운 리액트 프로젝트를 시작하기 위해서는 터미널(cmd 혹은 powershell)을 실행한 후, 프로젝트 디렉토리를 생성할 위치로 이동한다.

 

위치로 이동하면 아래와 같이 create-react-app 커맨드를 이용하여 리액트 프로젝트를 생성한다.

npx create-react-app {project_name}

{project_name} 부분에 본인의 프로젝트 이름을 입력하면 된다. (프로젝트 이름은 해당 리액트 프로젝트 파일들이 위치할 폴더명이 된다.) 만약 react-start 라는 리액트 프로젝트를 만든다면, npx create-react-app react-start라고 입력하면 된다.

 

프로젝트 폴더를 vscode에서 열고, vscode 터미널에서 npm start 명령어를 입력하면 node.js를 이용한 local server를 실행할 수 있다.

 

프로젝트에서 실행할 때 필요한 모든 파일이 위치하는 곳은 src 폴더이다. 이 src 폴더 내에서도 index.js 파일과 app.js 파일이 가장 기본이 되는 파일이다.

index.js 파일은 public/index.html 파일에 페이지 렌더를 위한 자바스크립트 파일이다. 이 파일을 이용하여 리액트 프로젝트가 웹페이지에 렌더링되는 것이다. app.js는 <App /> 컴포넌트가 위치하는 파일이다. <App /> 컴포넌트는 쉽게 가장 최상단에 위치하는 컴포넌트라고 생각하면 되며, 리액트 프로젝트의 전체적인 구조를 담당하고 있다고 보면 된다.

 

추후 리액트 프로젝트의 파일구조에 대해 자세히 알아볼 기회가 있다면 다시 정리하도록 하겠다.