react 프로젝트 시작할 때 세팅목록 part2

 

part1 에 이어서 작성하겠다.

---

1. emotion 세팅

1. 설치
yarn add @emotion/react @emotion/styled

2. emotion/react 를 jsxImportSource 로 사용할 수 있게끔 config 파일들 수정
- vite.config.ts
react({ jsxImportSource: '@emotion/react'})
- tsconfig
"jsxImportSource": "@emotion/react"

3. eslint 에서 html 의 어트리뷰트가 아닌 css 를 쓸 수 있게끔 허용
- @nr2p/eslint-config 에 이미 해놓았으니 넘어간다.

4. 리셋 스타일 추가
- 브라우저 기본 스타일을 제거하는 리셋 스타일을 적용한다.

 

---

 

2. axios, zustand, react-query 세팅

1. 라이브러리들 설치
yarn add axios @tanstack/react-query zustand @tanstack/react-query-devtools

2. axios instance 및 interceptor 설정
- axios instance 설정
- axios Api res, error 타입 설정

3. react-query, devtools 설정
- globalConfig 설정
- devtools 설정

4. zustand 훅, 폴더 추가
- mode 에 따라 devtool 을 붙이고 안 붙이는 그런 훅을 추가

 

더 이상 코드로 추가하기가 힘들다.

비공개 레포 PR 링크로 파일은 대신하겠다. ㅜ

---

3. Router, Global ErrorBoundary, UI  세팅

 

react-query 의 글로벌 옵션으로 thorwError true 로 해주었기 때문에..

까먹고 에러 처리를 해주지 않는다면..! 흰 화면이 뜰 것이기 때문에

그걸 방지해주는 Global ErrorBoundary 를 세팅해준다.

 

기타 UI 들도 추가해준다.

이쯤되면 디자인 시스템도 하나 publish 하는게 나을 것 같다.

 

PR 링크

 

---

3. Jest  세팅

 

- 이건 이전 포스팅에 올렸으니 굳이 다시 적지 않겠다..

---

글을 적는건 참.. 힘들다.. 

커밋을 정리하고 글로 정리하면서 하니까 시간이 배로 걸리고

자꾸 글 쓰기 귀찮아서 프로젝트도 밀리는 느낌;;이다.

 

일단은 과제라서 중간에 첨부한 링크는 공개가 어렵습니다.

나중에 공개 레포하나 작업하게 되면

그 링크로 교체해놓겠습니다 ㅠㅠ