[Next.JS] 개발 환경 세팅

들어가며

Cursor IDE가 백엔드 개발자가 백오피스 프론트 구축을 좀 더 편하게 도와준다는 글을 문득 봐서
프론트엔드와 백엔드 직접적인 API 통신을 체험해보기 위해 간단하게 학습해보려 합니다.
React를 선수지식으로 얻은 후에 Next.js를 깊이 있게 학습하는 것이 좋겠지만, 깊이 보단 SSR이 가능한 프론트앤드가 필요 했기 때문에
천천히 페이지 하나씩 구현해보려합니다.
 

IDE 다운로드

 VSCode 대신 Cursor를 다운 받게 되었습니다.
https://www.cursor.com/

Cursor - The AI Code Editor

 
Cursor AI는 VSCode기반으로 인공지능을 활용한 최첨단 코드 편집기입니다. 기존의 코드 편집기와는 달리, AI 기술을 통해 개발자의 의도를 이해하고 코드 작성을 지원합니다.
 
 

Node.JS 다운로드

• React 개발인데 Node.JS 다운로드 이유
  1. 로컬에서 프론트만 따로 띄워서 실습 가능하게 하기 위해
     • npm start 명령어로 Node.js기반 개발 서버가 실행되여 변경 사항을 즉시 반영할 수 있게됩니다.
  2. React는 기본적으로 최신 JavaScript 문법(JSX, ES6+)을 사용하기 때문에 Webpack, Babel 같은 빌드 도구가 필요합니다.
  3. 개발 환경에서 Node.js를 설치하여 패키지 관리 도구와  함께 설치됩니다. 

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

 
 

프로젝트 생성

npx create-next-app
#또는
npx create-next-app [projectName] [--Option]

명령어를 입력한다.

• TypeScript - JavaScript의 상위 집합으로 정적 타입을 제공한다. (js = var a, ts = a: number) #Yes
• ESLint - 코드 스타일을 체크하고 일관성을 유지해 주는 정적 코드 분석 도구 (.eslintrc.json 을 수정해 규칙 설정 가능) #Yes
• Tailwind CSS - #No
  • 유틸리티 퍼스트(Utility-first) 스타일링 프레임워크로, CSS를 직접 작성하는 대신 클래스를 조합하여 스타일링 가능
• src/ directory - src/ 폴더 구조 사용 ? #Yes
• Turbopack - Webpack보다 빠른 번들러로, Vercel(Next.js 개발사)이 개발 #Yes
• import alias ? #No
  • 프로젝트가 커질수록 ../../components/Button 같은 상대 경로가 많아지면
    관리가 어려운데 해당 기능을 이용해 간략화 가능하다. (import Button from "@/components/Button";)

 

ESLint 설치

위에서 ESLint 옵션을 활성화 했다면 에디터에서도 사용하기 위해 아래의 Extention도 설치해주도록 하자

npm install -D eslint

npm install --save --dev eslint-config-prettier

을 Terminal에 입력해 ESLint에서 Prettier과 충돌하는 설정을 사용하지 않도록 한다

루트 폴더에 .eslintrc.js 파일 생성 ([.eslintrc.js], [.eslintrc.json], [.eslintrc] 사용 가능)
 

// ESLint 설정 파일
// Prettier와 함께 사용하기 위한 설정
module.exports = {
    // TypeScript 파서 설정
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: 'tsconfig.json', // TypeScript 설정 파일 경로
        tsconfigRootDir: __dirname, // TypeScript 설정 파일이 있는 디렉토리
        sourceType: 'module', // ES 모듈 시스템 사용
        ecmaVersion: 'latest' // 최신 ECMAScript 버전 사용
    },
    // ESLint 플러그인 설정
    plugins: [
        '@typescript-eslint/eslint-plugin', // TypeScript 전용 린트 규칙
        'prettier' // Prettier 플러그인
    ],
    // ESLint 확장 설정
    extends: [
        'plugin:@typescript-eslint/recommended', // TypeScript 권장 린트 규칙
        'plugin:prettier/recommended', // Prettier 권장 설정 (ESLint와 통합)
        'prettier' // ESLint의 포매팅 규칙을 비활성화 (Prettier와 충돌 방지)
    ],
    root: true, // 현재 설정 파일을 기준으로 상위 설정 파일 검색 중지
    env: {
        node: true, // Node.js 전역 변수 활성화
        jest: true, // Jest 테스트 환경 전역 변수 활성화
    },
    ignorePatterns: ['.eslintrc.js', 'dist', 'node_modules'], // ESLint 검사에서 제외할 파일/디렉토리
    rules: {
        // TypeScript 관련 규칙 설정
        '@typescript-eslint/interface-name-prefix': 'off', // 인터페이스 이름 접두사 규칙 비활성화
        '@typescript-eslint/explicit-function-return-type': 'off', // 함수 반환 타입 명시 규칙 비활성화
        '@typescript-eslint/explicit-module-boundary-types': 'off', // 모듈 경계 타입 명시 규칙 비활성화
        '@typescript-eslint/no-explicit-any': 'off', // any 타입 사용 허용
        // Prettier 설정
        'prettier/prettier': ['error', {
            singleQuote: true, // 작은따옴표 사용
            semi: true, // 세미콜론 사용
            tabWidth: 2, // 들여쓰기 2칸
            printWidth: 100, // 최대 줄 길이 100자
            trailingComma: 'all' // 여러 줄일 때 마지막 항목에도 쉼표 추가
        }]
    },
};

 
 
 
 

Prettier 설치

 

 
Prettier 설치 방법에는 2가지가 존재합니다.
1. Extention 설치 - 위의 그림
2. 플러그인 설치
에디터에서 Extention을 설치하게 되면 내 환경의 에디터 자체에 Rule을 설정 할 수 있지만
플러그인을 설치하게 되면, 프로젝트 자체 내에서 prettier rule을 셋팅한 것으로 다른 환경에서도 동일한 rule을 가질 수 있습니다.
 
2의 방법

npm install -D prettier

프로젝트 루트에 .prettierrc, .prettierignore 파일 생성

{
  // 한 줄당 최대 글자 수
  "printWidth": 100,
  
  // 들여쓰기 크기 (탭 사이즈)
  "tabWidth": 2,
  
  // 객체, 배열 등에서 항상 콤마 사용
  "trailingComma": "all",
  
  // 문자열에 작은따옴표 사용
  "singleQuote": true,
  
  // 코드 마지막에 세미콜론 사용
  "semi": true,
  
  // 화살표 함수의 매개변수가 하나일 때 괄호 생략
  "arrowParens": "avoid",
  
  // 객체 리터럴의 중괄호 앞뒤에 공백 추가
  "bracketSpacing": true,
  
  // JSX에서 HTML 속성을 여러 줄로 표시할 때 마지막 ">" 를 새 줄에 배치
  "jsxBracketSameLine": false,
  
  // 마크다운에서 prose wrapping 설정
  "proseWrap": "preserve",
  
  // HTML, Vue, Angular에서 공백 감지
  "htmlWhitespaceSensitivity": "css",
  
  // Vue 파일에서 script와 style 태그 들여쓰기
  "vueIndentScriptAndStyle": false,
  
  // 파일 맨 끝에 새로운 줄 추가
  "endOfLine": "lf"
}

 
공식 문서 : 
https://prettier.io/docs/en/configuration.html
http://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore
 
 

ESLint 및 Prettier 충돌 방지 설정

두 개의 플러그인 모두 "일관성 코드"에 관련된 플러그인 으로 두가지 모두 사용 시 충돌이 발생할 수 있으므로 추가 설정이 필요합니다.
아래의 설정 들이 충돌 방지용 코드이며
내가 설정한 .prettierrc.js 를 기반으로 eslint에서 해당 형식에 어긋나게 되면 에러 처리를 해줄 수 있도록 설정하는 것입니다.
 

프로젝트 내

.eslintrc.js

extends: [ 'plugin:prettier/recommended']

extends: ['prettier']
plugins: ['prettier']

rules: {
'prettier/prettier': ['error', {
            singleQuote: true,
            semi: true,
            tabWidth: 2,
            printWidth: 100,
            trailingComma: 'all'
        }]
}

 
 
 

프로젝트 시작 

npm run dev