Frontend 프로젝트 설정 참고 자료

• 작성자: @Yunseo Hwang
• 작성일: 2021.10.20
• Description: Frontend 프로젝트 설정 과정에 참고한 자료들에 대한 링크. 설정에 대해서 쭉 풀어쓰기에는 너무 많고 어려워서 링크만 남깁니다,,,, ㅠ

---

기초적인 설정은 개인 Repository에서 설정 후 해당 boilerplate를 사용해서 설정했습니다.

• GitHub - hseoy/react-typescript-boilerplate: react & typescript boilerplate without CRA

위 기본 설정 과정 중 Webpack 관련 설정은 개인블로그에 정리하였으니 참고 바랍니다.

• CRA 없는 React & TypeScript 설정
• CRA 없는 React & TypeScript 설정 - 최적화 및 webpack 추가 설정

Husky & Lint-Staged는 git staged에 올라가있는 파일에 대해서만 commit 전에 lint를 수행하기 위해서 설정해둔 것으로 우아한테크캠프 두번째 프로젝트에서 작성한 위키 문서를 참고해 설정했습니다.

• LearnDocs. Husky와 Lint Staged · woowa-techcamp-2021/deal-3 Wiki

ESLint 설정은 airbnb의 규칙을 따르도록 설정해두었고 기타 testing library에 대해서도 모범사례를 따르기 위한 lint plugin을 추가했습니다. ESLint 설정은 eslint-config-airbnb-typescript 패키지 README와 우아한테크캠프/store6 등의 이전 프로젝트 설정을 참고했습니다.

• eslint-config-airbnb-typescript
• store-6/client at main · woowa-techcamp-2021/store-6

emotion 관련해서는 아래의 자료들을 참고해서 설정했습니다.

• Emotion - Introduction
• emotion/packages/babel-plugin at main · emotion-js/emotion
• emotion/css-prop.mdx at main · emotion-js/emotion
• Introducing the New JSX Transform - React Blog
• CRA + Emotion 사용시 jsx pragma 선언 없이 css 사용 방법