CRA를 이용해서 Typescript 프로젝트 만들기 (+ 유사 절대 경로 설정하기(vsCode))

이번 포스트는 정말 간단하다.

Create-React-App(이하 CRA)을 이용해서 Typescript 프로젝트를 만들어 볼 것이다.

 

0. 이번 프로젝트는 yarn을 사용한다.

yarn 다운로드 방법에 대해서는 공식 홈페이지를 참고하자.

https://classic.yarnpkg.com/en/docs/install

 

# Typescript React Project 만들기

1. global로 CRA를 설치한다.

> yarn global add create-react-app

 

터미널에 명령어를 입력하면 설치가 된다.

mac OS의 경우 권한이 없다고 에러가 나올 수 있는데 global install의 경우는 명령어 앞에 sudo 를 붙여줘야 한다.

 

* mac OS: > sudo yarn global add create-react-app

 

2. 원하는 경로로 이동한 뒤 프로젝트를 생성한다.

프로젝트를 만들기 원하는 경로로 이동한 뒤, 터미널에 프로젝트를 생성하는 명령어를 입력한다.

 

> create-react-app [만들고 싶은 프로젝트 이름] --typescript

만들고 싶은 프로젝트 이름을 입력한 뒤, 뒤의 optional 항목으로 --typescript 를 입력해주면 react app이 typescript로 만들어진다.

optional을 입력하지 않으면 js 프로젝트로 생성이 된다.

 

# CRA로 만들어진 프로젝트에서 유사 절대 경로 설정하기

 파일을 import 할 땐 절대 경로/상대 경로를 사용하는데, 사실 완전한 절대 경로로는 import를 정상적으로 할 수 없다.

그래서 파일을 기준으로 ../../../any-components.ts 이런식으로 import 하게 되는데, 썩 보기 좋지도 않고 depth가 깊어질 경우 가독성이 극히 떨어질 뿐더러 번거롭다.

 

그래서 베이스 폴더를 설정한 뒤 그 경로에서부터 파일을 절대 경로로 가져올 수 있게끔 설정해서,

파일이 어느곳에 있든 import 기준점이 설정한 베이스 폴더가 되어 깔끔하게 import 할 수 있다.

 

이제부터 설정해보자.

 

1. tsconfig.json 파일을 수정한다

우리는 CRA를 통해 typescript 프로젝트를 만들었으므로 tsconfig 파일이 이미 있다고 상정한다. 

{
  "compilerOptions": {
  // ...기존 설정 코드
    "baseUrl": "src"
  },
  "include": ["src"]
}

위와 같이  compilerOptions/baseUrl, include 항목을 추가/수정한다.

이제 우리는 어떤 파일이든 import 할 때 src 폴더를 기준으로 가져오게 된다.

 

만약 src > components > any-components.ts 아래의 파일을 import 해 온다면,

import 해오는 곳이 어디든간에 import AnyComponent from 'components/any-components.ts'

로 any-components.ts을 가져올 수 있다. depth가 깊어져도 마찬가지이다.

 

이미 이것만으로 파일 import는 정상적으로 동작하지만, VS code 안에선 import 에러가 나고 있을 것이다.

이것도 수정해주자.

 

2. vs code 설정 파일로 들어간다.

TypeScript > Preferences > Import Module Specifier 항목을 non-relative로 변경해준다.

그리고 재시작 해준다.

 

끝.