✍️ What I Learned/TIL
[TIL] TypeScript + React 개발환경 세팅
Jiwon()
2023. 7. 27. 21:23
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] 프로젝트 시작 전 개발환경