<aside> 📌 ‘FE’ 경로 말고 ‘FE/app’ 에서 작업하는 것 주의! ex) npm 설치 등 package.json에 영향 미치는 작업들

</aside>

.prettierrc.js

module.exports = {
  doubleQuote: true, // 문자열을 사용 할 때에는 " 를 사용
  semi: true, // 코드 종료시 무조건 ;(세미콜론)
  useTabs: false, // tab 대신에 스페이스를 사용
  tabWidth: 2, // 들여쓰기 크기
  trailingComma: "all", // 객체나 배열의 마지막 값에도 , 를 붙임
  printWidth: 80, // 한 줄의 최대 칸수
};

Chocolatey 설치 확인

choco --version

Next.js 프로젝트 생성

# create-next-app 설치
npm install -g create-next-app

# Next.js 프로젝트 생성
npx create-next-app app

# 프로젝트 실행
npm run dev

eslint 추가

• eslint 설치하기

  npm install eslint --save-dev
  npm eslint --init
  

prettierr 추가

• app 파일 내 .prettierrc.js 파일을 추가

  module.exports = {
    doubleQuote: true, // 문자열을 사용 할 때에는 " 를 사용
    semi: true, // 코드 종료시 무조건 ;(세미콜론)
    useTabs: false, // tab 대신에 스페이스를 사용
    tabWidth: 2, // 들여쓰기 크기
    trailingComma: "all", // 객체나 배열의 마지막 값에도 , 를 붙임
    printWidth: 80, // 한 줄의 최대 칸수
  };
  

• package.json 파일에서 스크립트 추가

  // package.json
  
  "scripts": {
      ...
      "format": "prettier --check --ignore-path .gitignore .",
      "format:fix": "prettier --write --ignore-path .gitignore ."
    },
  

절대경로 설정

• jsconfig.json 파일에 다음과 같이 작성

  // jsconfig.json
  
  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "app/*": ["app/*"],
        "styles/*": ["styles/*"],
        "components/*": ["components/*"],
        "font/*": ["public/font/*"],
        "icon/*": ["public/icon/*"],
        "image/*": ["public/image/*"],
        "util/*": ["public/util/*"]
      }
    }
  }