[React.js] create-react-app으로 리액트 앱 시작하기

React.js 공부 관련해서 처음 작성하는 포스팅이다.

여태까지 공부 관련한 카테고리들을 만들어놓고, 프로젝트 관련 포스팅만 하느라 소홀히 했던 것 같다.

누구에게 자세히 설명할 지식은 되지 않지만, 수많은 개발자 분들이 보시기에는 시시하겠지만 그래도 미래의 나에게라도 도움이 되기 위해 공부한 것을 정리해놓을 생각이다.

---

React.js를 처음 시작할 때, 누구든지 접하게 되는 create-react-app에 대해서 다뤄보겠다.

새로운 React 앱을 만들기 위한 가장 기초적이고 쉬운 방법이다.

 

나는 React의 공식 문서를 통해 create-react-app에 대해서 배우게 되었다.

공식 문서에서 한국어를 지원하므로, 자세히 배우기에는 공식 문서만한 것이 없다고 생각한다.

새로운 React 앱 만들기 – React

▲ 새로운 React 앱 만들기 - React 공식 문서

 

공식 문서의 내용 중에서도 오늘 내가 다룰 것은 React를 공부하고 있거나 간단히 싱글 페이지 애플리케이션 (SPA - Single Page Application)을 만들 때 아주 간편한 create-react-app이다.

 

---

나의 작업 환경

MacBook Pro (2018) / macOS Big Sur 11.0.6 npm: '7.20.3' node: '16.7.0'

Node.js 설치

새 리액트 앱을 시작하기 전에, 준비해야할 것은 다음과 같다.

• Node.js
• npm
• npx

React 공식 문서에서는 create-react-app을 사용하기 위해서 npm은 5.6 이상의 버전을, node는 14.0 이상의 버전을 필요로 한다고 적어두었다. Node.js를 설치하면 npm 또한 같이 설치되므로 두 가지를 모두 설치할 필요는 없다. npx의 경우에도 npm가 5.2.0 이상의 버전이라면 npx 명령어를 사용할 수 있으므로 부가적으로 설치해줄 필요는 없다.

 

Node.js

Node.js는 자바스크립트의 런타임, 즉 실행환경이다. 웹 서버 등 확장성이 있는 프로그램들의 개발을 위해 제작되었다고 한다.

아직 나 스스로가 Node.js에 대해 자세히 배워 본 적은 없으므로 이번 포스팅에서는 Node.js가 어떤 것인지만 알고 넘어가도록 하겠다.

 

npm (Node Package Maneger)

npm은 Node.js로 작성되어있는 패키지들을 관리해주는 모듈이다. 파이썬의 pip와 비슷한 역할을 가진 듯 하다.

 

npx

npm 5.2.0 버전부터 추가된 도구이며, npm을 더 원활하게 사용할 수 있게 도와주는 역할을 합니다.

 

Node.js

위 페이지에서 Node.js를 자신의 환경에 맞게 설치해주도록 하자.

 

Node.js 설치 확인하기

node.js가 로컬에 설치되어 있는지 확인하려면 다음과 같이 입력하여 확인한다.

node -v

 

create-react-app 사용해보기

create-react-app으로 새 리액트 앱을 시작하려면 다음과 같이 입력한다.

npx create-react-app (앱 이름)

자신이 새 앱을 만들고 싶은 디렉토리로 이동한 뒤에 위의 명령어를 입력해준다. (앱 이름)에는 자신이 만들 React 앱의 이름을 적어주면 된다. 앱의 이름은 대문자를 포함하면 안된다. 따라서 대문자를 넣고싶다면 우선 소문자를 사용해서 만들어 준 뒤 이름을 바꿔주자.

 

create-react-app을 사용해서 cratest라는 이름의 리액트 앱을 만들었다.

 

cd 명령어를 사용해서 해당 앱의 디렉토리로 이동하여 리액트 앱을 실행한다. 실행 방법은 다음과 같다.

cd (앱 이름)
혹은 npm start

 

해당 명령어를 입력하게 되면, 로컬호스트를 통해 실행되는 리액트 앱을 확인할 수 있다.

npm 대신 yarn을 사용해도 되지만, 둘 사이의 차이점을 아직은 잘 모르는 관계로, yarn을 공부하게 되면 둘의 차이점에 대해서도 포스팅을 남기도록 하겠다.

실행된 리액트 앱의 모습.

이제 새로운 React 앱을 만들었다. 

 

React로 나만의 앱을 만들어나가기 위해서는 JSX라는 새로운 언어를 사용해야 하는데, 다음 포스팅에서는 이 JSX에 대해서 공부한 것을 정리해보도록 하겠다.