NextJS Project Get Start

의존성 설치

가져온 프로젝트를 VSCode에서 열기
terminal 열기

npm install

코드 컨벤션 설정 적용

{
  // 저장 시 자동으로 코드 포맷팅을 적용
  "editor.formatOnSave": true,

  // .tsx 파일에 대해서 Prettier를 기본 포맷터로 설정
  "[tsx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 폰트 크기 설정 (12로 설정)
  "editor.fontSize": 12,

  // 파일을 자동 저장 활성화, 일정 시간 후 자동으로 저장
  "files.autoSave": "afterDelay",

  // 저장 시 사용되지 않는 import 문을 명시적으로 제거하고, ESLint 규칙에 따라 코드 수정 자동화
  "editor.codeActionsOnSave": {
    "source.removeUnusedImports": "explicit",
    "source.fixAll.eslint": "explicit"
  },

  // ESLint가 검사할 파일 타입을 설정 (JavaScript, TypeScript, TSX 파일)
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],

  // 모든 파일에 대해 Prettier를 기본 포맷터로 설정
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // JavaScript 파일에 대해서도 저장 시 자동 포맷팅을 활성화
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

빌드

npm run build

실행

npm run dev

스토리북 실행

npm run storybook