yarn 으로 설정
yarn create next-app --typescript
eslint + prettier 설정
yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
styled-components
설치
yarn add styled-components @types/styled-components
css 초기화 or 정규화 ( reset or normalize)
https://invalueable.tistory.com/201
[Css] css reset / normalize (초기화 / 정규화)
브라우저 (크롬 ,사파리 ,파이어폭스 등 .. ) 마다 제공하는 user agent stlye이라는게 존재한다 간단히 브라우저의 기본 스타일값이라고 생각하면 되겠다. 다만 브라우저마다 기본스타일이 다르기때
invalueable.tistory.com
웹 브라우저마다 다르게보이는 css를 초기화해준다. 초기화를 할것이냐 정규화를 할것이냐는 선택해주면되겠다.
createGlobalStyle 에 넣어주자!
yarn add styled-normalize
yarn add styled-reset
ssr을 위한 바벨 적용
yarn add -D babel-plugin-styled-components
.babelrc 파일을 만들어주자 !
이번 사이드프로젝트에 사용할 라이브러리
axios (데이터 페칭)
recoil (상태관리)
next-seo (seo 관련)
react-hook-form ( Input Validation, Form Submit ... 짧은코드로 form 생성 및 validation )
yarn add react-responsive @types/react-responsive (반응형처리)