기획 당시 쓰고자 했던 기술 스택을 다시 정리해보자면 아래와 같다.
기본
- Next.js
- TypeScript
코드 스타일링
- prettier
- ESLint
디자인
- Tailwind CSS
- storybook
api & 데이터 상태관리
- Axios
- firebase
- 카카오톡 공유 API
- react-query
- zustand
배포 & 관리
- Vercel
- Git
이를 바탕으로 환경설정을 시작해보자..
Next.js + TypeScript
원래 next의 경우 페이지 라우팅을 사용하려고 했으나,
곧 일하게 될 회사에서 앱 라우팅을 사용하신다고 하여 그쪽으로 변경..!
역시 직접 부딪혀보며 공부해야지!,,
1. 프로젝트 생성
npx create-next-app . --typescript
mudo-everywhere 디렉토리에 Next.js + TypeScript 프로젝트를 생성해주었다.
ESLint, tailwind는 알아서 설정을 해준다.. 이득(?)
App router 방식도 적용, alias 써서 임포트 해줄테니 커스터마이즈 안함!
(나중에 알고보니 나는 @components/..이런 형태로 써주고 싶었어서.. 커스터마이징이 필요했나보다..
이후 tsconfig의 paths 부분을 @*로 변경하여 적용해주었다.)
src/ 디렉토리로 관리할지에 대한 부분은,
app/ 디렉토리를 src 폴더 아래에 둘건지, root에 둘건지를 선택하는 것이라고 한다.
대부분 root에서 관리하기도 하고, 그 쪽이 더 직관적인 파일 구조라고 생각하여 No로 선택해주었다.
2. 확인
잘 세팅이 되었다.
prettier + ESLint
prettier
prettier은 보편적으로 설정되어 있는 rule들을 .prettierrc 파일에 적용 후,
webstorm 자체적으로 run on save 설정해주었다.
이렇게 설정해주고(Actions on Save는 선호도 차이, 위는 내가 선호하는 설정이다),
코드 에디터로 가서 'reformat with prettier'을 수동으로 한 번만 해주면 다음 저장 부터는 자동으로 적용된다.
ESLint
ESLint는 airbnb 스타일 가이드를 설정하였고,
모든 설정을 켜두기 보다는 개발의 용이성을 위해 필수적인 설정만 켜두고 작업할 예정이다.
중급 프로젝트 때 사용했던 설정을 가져왔다. 이미 만들어져 있는 .eslintrc.json에 작성하였다.
npm run lint 명령어를 통해 lint가 잘 동작하는지 확인할 수 있는데, 두 가지의 에러를 만났다.
Failed to load config "airbnb" to extend from.
npx install-peerdeps -D eslint-config-airbnb
npx install-peerdeps -D eslint-config-airbnb-typescript
두 가지 패키지를 설치해준 후 해결!
Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
npm i -D eslint eslint-config-prettier eslint-plugin-prettier
위 패키지를 설치해준 후 해결!
앞으로도 저런 초록 메시지만 만나길.. (헛된 꿈) ESLint야~ 잘부탁해~
storybook
tailwind css 같은 경우 이미 설정이 되어 있으므로, storybook 설치만 추가적으로 하면 된다.
1. 설치
npx storybook@latest init
2. 확인
설치가 끝나면 자동으로 스토리북 웹 사이트가 뜬다.
npm run storybook 명령어로 접속할 수도 있다. 기본적으로 localhost:6006으로 접속된다.
친절하게 만들어진 버튼 컴포넌트 예시를 확인할 수 있다.
axios
npm install axios -> import 잘 됨!
react-query
사실 next에 react-query를 써보는 것은 처음이라, 이 블로그와 이 블로그에서 세팅하는 방법을 참고하였다.
1. 설치
npm i @tanstack/react-query
npm i @tanstack/react-query-devtools
2. Provider로 감싸기
useReactQuery 라는 커스텀 훅을 만들어서, layout.tsx에 Provider를 감싸주었다.
devtool이 정상적으로 뜨고 있는 것을 확인했고, react-query의 함수들 import도 잘 된다!
+ zustand
zustand는 아직 사용할지말지 고민 중이므로.. 사용하게 된다면 그 때 설정을 해두기로 하고 보류한다.
다음으로..
환경설정을 마쳤으니, 스토리북을 이용하여 UI 개발을 시작해보자!
