개요
극한의 효율적인 개발 환경을 만들기 위해 혼종을 만들어봅시다. 하하. 일단 실제로 프로젝트를 개발하고 나서 쓰는 포스팅은 아닙니다. 다만 다른 Vue 프로젝트를 진행해본 바 있고, 컴포넌트를 활용할 때 맞닥뜨리는 다양한 상황들을 미리 고려해보면서 작업 환경을 만들고자 했습니다. 실제로 개발했을 때 어느 부분에서는 실용적이지 않을 수 있습니다.
콘셉
- Typescript 로 타입 자동완성 및 타입 불일치와 같은 문제를 조기에 발견함으로써 버그&오류 미연에 방지.
- 반복해서 나오는 요소들은 React 로 컴포넌트화 + Tailwind 로 스타일 지정.
- Tailwind 로 css 코딩을 최소화하긴 했지만, 혹시나 조금이나마 있을 코드는, CSS-in-JS 느낌으로 styled-components 를 이용하여 스타일 요소도 모두 tsx 파일에 포함시키기.
- Tailwind 를 사용할 때 겹치는 부분이 많지만 props 등으로 미연의 변화를 줘야 할 때 (예: 버튼의 모양은 똑같으나 색깔만 바꿔서 구성해야 할 때
- 정말 글로벌한 세팅 (code, button 등 태그에 따른 기본 스타일 등) 은 index.css 에서
@apply활용하여 taliwind 의 기능 묶어서 재구성하기.
세팅
create-react-app 으로 Typescript + React 세팅
npx create-react-app my-app --template typescript너무너무 간단함.