React + Typescript 빌드 부터 실행 까지

사용 기술 스택

React

Typescript

Tailwind CSS

React-Query

Luxon

React-Router-Dom

Zustand

Zod

 

node 설치하기

리액트 프로젝트를 시작하기에 앞서 node를 설치합니다. 맥 환경에서 brew를 이용해 설치해 줍니다. 

brew install node

 

설치가 잘 되었는지 확인하려면 node 명령어를 사용해서 버전을 확인해 줍니다.

 

node -v
npm -v

 

 

typescript + react 앱 생성하기

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

 

cd (change directory) 명령어를 사용해서 해당 폴더로 이동해 줍니다. 

 

cd [프로젝트 이름]

 

이동 후 아래 명령어를 사용해서 추가적으로 필요한 디펜던시를 설치해 줍니다. 

npm install tailwindcss react-query luxon react-router-dom zustand zod

 

글의 위에서 명시된 기술 스택을 다운로드 받아 주었습니다. 

 

만약 tailwindcss를 사용한다면 아래 명령어를 사용해서 init 해줘야 합니다.

npx tailwindcss init -p

 

tailwindcss 를 설정해 줍니다. 

추후에 React 앱이 생성되면 아래 코드를 src/index.css에 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

앱 빌드하기

npm intall -g serve

 

터미널에서 위 명령어를 입력해서 serve 패키지를 설치합니다.

serve 프로그램 설치가 끝나면 프로젝트 파일로 돌아와 아래 명령어를 실행해서 리액트 앱을 빌드해 줍니다.

 

npm run build

 

앱 실행하기

serve -s build

 

위 명령어를 입력하면 애플리케이션을 실행할 수 있습니다. 

경로랑 포트는 default로 http://localhost:3000 으로 설정되어 있습니다.