[TIL] 11/8 React.ts 살펴보기

1. 리액트 프로젝트 생성: CRA vs Vite

CRA 는 초기설정과 구성을 자동화해서 개발자가 빠르게 리액트 앱을 생성할 수 있도록 도와준다. 웹팩과 바벨을 사용해서 개발 서버를 실행하고 HMR(Hot Mode Reloading)을 제공해준다. 웹팩을 통해 빌드시 코드를 컴파일하고 압축하는 역할도 해준다. (가장 대중적으로 많이 쓰임)

+ 환경변수: process.env.KEY

 

Vite 는 빠른 속도와 효율로 최근에 많이 주목 받고 있다. 웹팩 대신 롤업을 사용해서 빌드하는데, 웹팩에 비해 속도가 크게 개선된 버전이다. 또 HMR 에서 굉장히 빠른 속도를 자랑한다. CRA 는 HMR 을 할 때 소스 전체를 빌드하지만 Vite 는 모듈 단위로 빌드해서 브라우저에 제공하기 때문에 CRA 보다 속도가 빠르다.  

+ 환경변수: import.meta.env.KEY

 

 

 

2. 프로젝트 디렉토리 구조

• pages - 라우트에 대응하는 페이지 컴포넌트 
• components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
• utils - 유틸리티
• hooks - 리액트 훅
• model - 모델(타입)
• api - api 연동을 위한 fetcher 등

 

 

3. React CLI 추가해주기

 

pakage.json 파일에 작성되어 있는 scripts 필드이다. 여기에 타입 체크를 해주는 typecheck 명령어를 추가해주었다. 

터미널에서 tsc --noEmit --skipLibCheck 를 치면 잘못된 타입이 있는지 체크해줄 수 있다. 

 

명령어를 간단하게 설명하면,

tsc: 타입스크립트의 컴파일 명령어

--noEmit 옵션: 자바스크립트 파일을 출력해서 컴파일하는 부분을 비활성화하겠다는 옵션

--skipLibCheck 옵션: 작성한 코드의 외부 라이브러리 타입체크를 생략하겠다는 옵션 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },