OaO 환경설정 A to Z

선행학습자료

Package Manager

• Yarn

참고자료 - 참고

Essential for React Build

• TypeScript
• React
• Vite

Vite에서 Asset과 Public 폴더의 차이는?
Asset은 번들링 시에 loader를 거쳐갈 파일들이 위치한다. Public은 그냥 해당 폴더에 위치한 상태 그대로 제공될 파일들이 위치한다.

Vite는 빌드시 TypeScript 타입 체크를 별도로 수행하지 않는다.
원한다면 빌드 이전에 tsc --noEmit 명령어로 별도의 타입체크 과정을 거쳐야한다.

Vite에서는 Babel을 안쓰나요?
쓸 수 있고, 하위호환성이 필요하다면 여전히 Babel을 사용해야한다. 다만 Vite가 기본적으로 ESmodule을 지원하는 브라우저를 상정하고 있어서, 그런 사례가 많이 보이지는 않고, 별도의 plugin을 사용해서 Babel을 적용시킬 수 있다.

참고자료
- 공식문서: vite
- 참고1
- 참고2
- 참고3

Linter and Formatter

• ESLint
• Prettier

참고자료
- 공식문서: eslint
- 참고

Testing

• jest
• ts-jest

참고자료
- 공식문서: ts-jest
- 참고

State Management

• Jotai

Styling

• Styled-component
• Tailwind CSS
• twin.macro (참고)
• Tailwind-Styled-Component

고민이 필요한 영역
무엇이 정답이다 할 수 없지만, twin.macro와 tailwind-styled-component 각각 70,000과 10,000의 주간 다운로드 수를 가지고 있다. 패키지 치고는 대중적이라고 하기는 어렵다. 또한, 애초에 tailwind css의 철학 자체가 css-in-js의 철학과 어느정도 충돌한다는 관점도 꽤나 있는 듯 하다.

Backend

• Express.js