[react] 첫 번째 리액트 프로젝트 만들기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

Setting

프로젝트를 만들기 앞서 node.js 프로그램과 타입스크립트 컴파일러를 설치해야 한다.

*node.js: 자바스크립트 웹 서버를 개발하는 프로그램

#타입스크립트 컴파일러 설치
npm i -g typescript ts-node

타입스크립트 컴파일러 잘 설치 되었는지 확인

 

 

 

리액트 프로젝트 만들기

리액트 웹 애플리케이션은 CRA라는 프로그램으로 Node.js 프로젝트를 생성해서 제작한다.

 

- CRA로 타입스크립트용 리액트 프로젝트 생성하는 명령어:

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

 

npm(node package manager): Node.js 프로젝트에서 개발에 필요한 오픈 소스 라이브러리들을 쉽게 설치/사용할 수 있게 해주는 프로그램
npx:npm i -g 명령과 같은 의미. 패키지들의 가장 최신 버전을 찾아내 설치해주는 프로그램

나는 프로젝트 이름을 test로 정해 주었고, 위 명령어를 실행하게 되면 test 폴더와 하위 폴더들이 생긴다.

(env 폴더는 내가 사용하는 가상환경(virtualenv)임!)

 

- public 폴더

리액트 프로젝트에 필요한 html 파일과 favicon 등 정적인 파일들이 담겨 있다.

/public/index.html 파일 위에서 만든 리액트 앱이 표시된다.

- src 폴더

실제 리액트를 가지고 프로그래밍할 자바스크립트 파일들을 보관하고 있다.

 

src/index파일

HTML의 div 태그에 리액트 애플리케이션을 삽입사는 코드!

 

 

package.json파일

리액트 프로젝트는 기본적으로 Node.js 프로젝트이며, 모든 Node.js 프로젝트는 root dir에 항상 package.json 파일이 존재한다.

package.json

그 중에서도 scripts 항목에는 package.json 파일이 있는 폴더에서 실행할 수 있는 명령어들이 정의되어 있다.

ex)

npm run start: 프로젝트를 개발 모드로 실행

npm run build: 프로젝트를 빌드 모드로 실행

 

 

설치된 node.js 라이브러리 확인하기: npm list