[TIL] TypeScript + React 개발환경 세팅

---

1. 리액트 앱 생성

// yarn
yarn create react-app my-app (--template typescript)

// npx
npx create-react-app my-app (--template typescript)

 

디렉토리 구조

package.json

• 프로젝트 정보와 의존성(dependencies)을 관리하는 문서
• 파일 안의 script 객체에서는 실행, 빌드 등의 alias를 설정하여 관리할 수 있음

tsconfig.json

• 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됨
• tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정

 

 

---

2. 절대경로 사용

// tsconfig.json
{
  "compilerOptions": {
  	...
    "jsx": "react-jsx",
    "baseUrl": "src", // 이 부분 추가
  }
}

자바스크립트로 할 때는 jsconfig.json 파일을 따로 생성해서 절대경로를 지정해줬는데, 타입스크립트 기반에서는 리액트 앱을 설치할 때 tsconfig.json 파일이 기본적으로 생성되어있어 "baseUrl": "src"를 추가만 해주면 된다.

 

 

---

3. 라이브러리 추가

• 이번 타입스크립트 투두리스트에서 연습해볼 라이브러리들을 설치해주었다.
• 이 때 유의할 점이 라이브러리에서 지원하는 type이 존재한다면 `@type/라이브러리명`으로 추가 설치 해주어야 함

yarn add react-query @types/react-query
yarn add react-redux @types/react-redux @reduxjs/toolkit
yarn add react-router-dom @types/react-router-dom

yarn add axios json-server
yarn add styled-components styled-reset

 

 

---

4. 대략적인 프로젝트 구조 잡기

📦src
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📜Footer.tsx
 ┃ ┃ ┗ 📜Header.tsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜Intro.tsx
 ┃ ┃ ┗ 📜Main.tsx
 ┃ ┣ 📂shared
 ┃ ┃ ┗ 📜Router.tsx
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜GlobalStyle.tsx
 ┃ ┗ 📂todo
 ┃ ┃ ┗ 📜AddTodo.tsx
 ┣ 📜App.tsx
 ┗ 📜index.tsx

우선은 이렇게 프로젝트 구조를 잡아주고, main, dev, feat/todolist 세 개의 브랜치까지 만들어두었다.

 

 

---

 

 

이렇게 막상 정리하고 보니 별 내용이 없는데, 실제로 세팅할 때는 처음 해보는 것이다 보니 생각보다 시간이 많이 지체되었던 것 같다. 자바스크립트 리액트 앱 처음 세팅할 때도 버벅이면서 헤맸는데, 지금은 척척 해낸다. 타입스크립트 리액트 앱도 익숙해지면 뚝딱뚝딱 해낼 수 있겠지?

 

 

---

* 참고한 블로그

[react + typescript] 프로젝트 시작 전 개발환경

https://velog.io/@swanious/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0