리액트를 시작해보자 CRA를 이용한 간단한 리액트 프로젝드 만들기

자바스크립트 기반 라이브러리 리액트에 대해 알아봅시다.

 

저번 시간에 리액트가 무엇인지 간단하게 알아봤습니다. 이번엔 간단한 프로젝트를 만들고 리액트에 대한 이점을 알아가보겠습니다.

 

리액트를 시작하기 전 소스코드 편집기인 vscode를 먼저 다운로드 하도록 하겠습니다.

https://code.visualstudio.com/

위 홈페이지에서 간단하게 설치할 수 있습니다.

vscode는 소스코드 편집 프로그램입니다. 리액트 작업 뿐만 아니라 패키지만 설치한다면 다른 언어도 컴파일할 수 있는 프로그램입니다.

 

그다음 npm을 설치해야합니다.

npm은 node package management의 약자로 노드 모듈 등을 관리해주는 툴입니다.

 

설치

1. https://nodejs.org/ko/

2. 위 홈페이지에서 LTS를 설치해줍니다.

3. 좀 전에 설치한 vscode에서 cmd+shift+`을 누르면 하단에 터미널이 켜지게 되는데요. node -v를 입력해보세요.

4. 에러가 아닌 노드 버전(v00.00)이 뜬다면 설치완료입니다.(0자리에 숫자가 들어갑니다.)

에러가 난 경우 아래 링크를 통해 해결해주세요

환경변수 입력하기

 

리액트 프로젝트 시작

vscode에서 터미널을 열어준 후 우리가 작업할 폴더를 하나 만들어야합니다.

'mkdir 폴더이름' 명령어를 사용하여 폴더를 생성할 수 있습니다.

'cd 폴더이름' 명령어를 사용하여 생성한 폴더에 진입할 수 있습니다.

 

진입한 폴더에서

npx create-react-app 프로젝트이름(대문자가 들어가면 안됩니다.)

위 명령어로 리액트 프로젝트를 생성할 수 있습니다.

 

 

저는 test라는 리액트 프로젝트를 만들었습니다.

리액트 프로젝트를 생성하면 위와같은 코드로 구성된 폴더가 생깁니다.

여기서 우리가 App.js에 우리가 만든 컴포넌트를 집어넣어 원하는 웹개발을 진행할 수 있습니다.

 

저는 유지보수와 생산성을 위해 TypeScript를 이용한 리액트 프로젝트를 주로 진행할 것인데요.

npx create-react-app 프로젝트이름 --template typescript

위 명령어로 간단한 typescript기반 cra프로젝트를 생성할 수 있습니다.

파일 확장자 이름이 다른게 보이나요? App.js - App.tsx 타입스크립트의 확장자 이름은 tsx입니다. 위와 같은 파일구성을 가진 프로젝트가 생성된다면 typescript프로젝트 생성이 완료된 것입니다.

 

 

프로젝트로 들어가서 'cd 프로젝트 이름'

저는 cd test 겠죠?

 

터미널에

npm run start

입력하면 우리가 생성한 프로젝트가 기본 브라우저에 뜨게됩니다. 저는 기본브라우저가 chrome이기 때문에 chrome에 뜨겠네요.

 

기본 포트인 3000번 포트에서 리액트 프로젝트가 열린 것을 확인할 수 있습니다.

App.tsx

위 코드는 App.tsx파일에 적힌 코드입니다.

글자를 조금 바꿔 저장해보겠습니다.

 

브라우저를 새로고침하지 않아도 글자가 바뀐 것을 확인할 수 있습니다.

 

 

명령어를 보면 알듯이 CRA는 creat-react-app의 약자입니다.

간단하게 리액트프로젝트를 생성할 수 있고 입문자 입장에서 빠르게 리액트를 시작할 수 있다는 장점이 있지만 사용하지 않을 모듈이 설치되기 때문에 실제 프로젝트에선 CRA없이 리액트 프로젝트를 생성합니다.

 

cra를 사용하지 않고 리액트 프로젝트를 생성하는 방법은 다음 글에서 다루도록 하겠습니다.