일단 기본적으로, node.js를 설치해야 한다.
node.js 설치 시에 npm이 자동으로 설치된다.

Next App 보일러플레이트 코드 생성

# 전역적으로 yarn 패키지 매니저 설치
npm install -g yarn

# alias 옵션 빼고 모두 Yes 
yarn create next-app

프리티어 설정

## 프리티어 설정

1. Prettier - Code formatter 확장 설치
2. .prettierrc를 app의 최상위 경로에 추가 (아래 첨부)
3. Ctrl + , 을 한 뒤에 format on save 옵션 체크와 default formatter를 프리티어로 지정

**무조건 next-app을 기준으로 VSCode 열기(Prettier 설정이 오류를 일으킬 수도 있다.)**

{
	"useTabs": false,
	"printWidth": 80,
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "all",
	"endOfLine": "lf",
	"semi": true,
	"arrowParens": "always"
}

스토리북 설치 및 실행 확인

npx storybook@latest init
# 이후 yarn storybook 이후 실행 에러가 발생하면
# node_modules와 yarn.lock 삭제후 다시 yarn install

# 아래 명령어 실행 후 6006 포트에 스토리북 문서가 잘 나오는지 확인하기
yarn storybook

# yarn 버전 문제로 발생하는 문제 해결을 위해 package.json에 추가
"resolutions": {
  "jackspeak": "2.1.1"
}

tailwindCSS 연결 및 자동 완성 기능 설정

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

import '../src/app/globals.css'

tailwind CSS intellisense 확장(코드 자동 완성을 도와줌) 설치
Ctrl + Shift + P → > Open User Settings → settings.json

"files.associations": {
  "*html": "html",
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": true
},

E2E testing(playwright)