[Next.js14 강의] 30강 - 개발자 경험 향상 (로컬 개발 환경, 코드 품질 도구)

안녕하세요! 그레이 해커 월횽입니다. 이번 강의에서는 개발자 경험을 향상시키기 위한 로컬 개발 환경 설정과 코드 품질 관리 도구를 알아봅니다. 개발의 효율성을 높이고, 생산성을 유지할 수 있는 다양한 도구와 방법론을 살펴봅니다.

 

 

1. 개발자 경험(Developer Experience)이란?

 

1-1. 개발자 경험의 정의

개발자 경험(Developer Experience, DX)은 개발자가 프로젝트를 진행하면서 겪는 편리함과 생산성을 의미합니다. 좋은 개발자 경험을 제공하는 환경은 개발자가 빠르고 쉽게 코드를 작성하고 유지보수할 수 있도록 돕습니다.

 

1-2. 왜 개발자 경험이 중요한가?

· 생산성 향상: 효율적인 환경을 통해 개발 속도를 높일 수 있습니다.
· 개발자의 스트레스 감소: 개발 과정에서 불필요한 복잡성을 제거하여 피로를 줄일 수 있습니다.
· 코드 품질 유지: 자동화된 도구를 통해 코드 품질을 일정 수준 이상으로 유지할 수 있습니다.

 

 

2. 로컬 개발 환경 설정

 

2-1. 프로젝트 구조 최적화

Next.js는 기본적으로 효율적인 프로젝트 구조를 제공하지만, 로컬 환경에서 더 나은 개발 경험을 위해 폴더 구조와 설정을 최적화할 수 있습니다. 예를 들어, 환경 변수를 관리하거나 폴더 구조를 명확히 정리하여 유지보수성을 높일 수 있습니다.

· 환경 변수 관리: .env.local, .env.production 파일을 통해 환경별 설정을 분리
· Alias 설정: jsconfig.json 또는 tsconfig.json에서 경로 별칭을 설정해, 복잡한 파일 경로를 줄이고 유지보수를 쉽게 할 수 있습니다.

반응형

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

 

 

2-2. Visual Studio Code 설정

많은 개발자가 사용하는 VS Code를 최적화하여 생산성을 높일 수 있습니다. 다음 확장 프로그램을 설치하고 설정하는 것이 도움이 됩니다.

· ESLint: 실시간으로 코드 스타일을 확인하고 에러를 미리 잡아줍니다.
· Prettier: 코드 스타일을 자동으로 포맷팅합니다.
· Next.js snippets: Next.js에서 자주 사용하는 코드 스니펫을 빠르게 사용할 수 있습니다.
· GitLens: Git 기록을 실시간으로 추적할 수 있어 협업 시 유용합니다.

728x90

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

 

 

 

3. 코드 품질 관리 도구

 

3-1. ESLint로 코드 품질 유지

ESLint는 JavaScript와 TypeScript 코드의 코딩 규칙을 검사하고 일관성을 유지하는 도구입니다. Next.js 프로젝트에서 ESLint를 설정하면, 코드 작성 시 버그를 미리 방지하고 유지보수성을 향상시킬 수 있습니다.

· Next.js 프로젝트에서는 기본적으로 ESLint가 설정되어 있지만, 프로젝트에 맞게 커스터마이징할 수 있습니다.
· eslint-config-next 패키지를 통해 Next.js에 맞춘 ESLint 설정을 사용할 수 있습니다.

npm install eslint eslint-config-next --save-dev

 

.eslintrc.json 파일에서 ESLint 규칙을 커스터마이즈합니다.

SMALL

{
  "extends": "next/core-web-vitals",
  "rules": {
    "react/react-in-jsx-scope": "off",
    "semi": ["error", "always"]
  }
}

 

 

3-2. Prettier로 코드 포맷팅

Prettier는 코드 스타일 자동화 도구로, 코드의 일관성을 유지하고 가독성을 높여줍니다. ESLint와 Prettier를 함께 사용하여 코드 품질과 포맷을 모두 자동화할 수 있습니다.

· Prettier는 ESLint와 충돌할 수 있으므로, 두 도구를 함께 사용하는 설정을 맞춰야 합니다.

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

 

.eslintrc.json 파일에 Prettier 설정을 추가합니다.

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

 

 

3-3. Husky와 lint-staged로 Git Hook 설정

Husky와 lint-staged를 사용하여 Git 커밋 또는 푸시 전에 코드를 자동으로 검사하고 포맷할 수 있습니다. 이를 통해 코드 일관성을 유지하면서 협업 시 코드 리뷰 시간을 절약할 수 있습니다.

npx husky-init && npm install
npm install lint-staged --save-dev

 

package.json에 다음과 같은 설정을 추가하여 커밋 전 검사를 자동화합니다.

"lint-staged": {
  "*.js": "eslint --fix",
  "*.ts": "eslint --fix",
  "*.json": "prettier --write"
}

 

 

 

4. 생산성 향상을 위한 도구

 

4-1. TurboRepo를 이용한 모노레포 관리

Next.js는 모노레포(Monorepo) 환경에서 사용하기 적합합니다. TurboRepo를 사용하면 모든 프로젝트를 하나의 저장소에서 관리하면서 중복된 작업을 캐싱하고 빌드를 더 빠르게 할 수 있습니다.

npm install turbo --save-dev

 

turbo.json 파일을 설정하여 워크스페이스에서 빌드와 테스트를 관리합니다.

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**"]
    },
    "lint": {},
    "test": {}
  }
}

 

 

4-2. Next.js DevTools

Next.js DevTools는 Next.js 애플리케이션의 실시간 성능 모니터링과 버그 분석에 도움이 되는 도구입니다. 이 도구를 활용하면 성능 병목을 찾아내고 최적화할 수 있습니다.

 

 

5. 로컬 개발 서버 최적화

 

5-1. 빠른 리로딩 설정

Next.js는 기본적으로 핫 리로딩(Hot Reloading)을 지원합니다. 이를 통해 코드 변경 시 페이지가 즉시 갱신되어 빠르게 결과를 확인할 수 있습니다.

 

5-2. TypeScript 설정

TypeScript를 사용하면 정적 타입 검사를 통해 개발 과정에서 발생할 수 있는 버그를 사전에 방지할 수 있습니다. Next.js는 TypeScript를 기본적으로 지원하므로, 프로젝트에 쉽게 통합할 수 있습니다.

npx create-next-app@latest --typescript

 

 

5-3. 로컬 HTTPS 설정

로컬 환경에서 HTTPS를 설정하면, 외부 API 통합이나 OAuth 연동 시 인증 문제가 발생하지 않도록 할 수 있습니다. localhost에서도 HTTPS를 사용할 수 있게 설정할 수 있습니다.

 

이 강의에서는 개발자 경험을 향상시키기 위한 다양한 도구와 설정 방법을 알아보았습니다. ESLint, Prettier, Husky와 같은 도구들을 활용하여 코드 품질을 높이고, TurboRepo와 같은 도구로 개발 효율성을 극대화할 수 있습니다. 좋은 로컬 개발 환경을 갖추는 것은 개발자의 생산성과 프로젝트 유지보수에 매우 중요한 요소입니다.

 

 

 

 

 

- 이전 수업 목록