VS Code에서 Next.js 프로젝트 효율적으로 사용하는 꿀팁

next.js vscode 세팅

 

VS Code와 Next.js는 웹 개발자들이 가장 사랑하는 조합 중 하나입니다. 이번 포스팅에서는 이 두 도구를 더욱 효율적으로 활용할 수 있는 팁을 소개하겠습니다.

 

🔧 0. VS Code 설치하기

Next.js 개발을 시작하려면 먼저 개발 환경을 세팅해야 합니다. 가장 기본이 되는 도구는 바로 VS Code입니다.

1. 공식 사이트 접속
   👉 https://code.visualstudio.com/
2. 운영체제에 맞는 설치 파일 다운로드
   • Windows: exe
   • macOS: zip 또는 dmg
   • Linux: deb, rpm

vscode download

🧩 1. 확장 프로그램 적극 활용하기

VS Code는 풍부한 확장 프로그램 생태계를 갖추고 있습니다. Next.js 개발자에게 추천하는 필수 확장 프로그램은 다음과 같습니다:

• ESLint: 코드 스타일 유지와 에러 방지
• Prettier: 포맷팅 자동화
• Tailwind CSS IntelliSense: Tailwind 클래스 자동완성
• Path Intellisense: 경로 자동완성

cvcode extenstion 설치

⚡ 2. Snippets로 생산성 높이기

반복적인 코드 작성은 Snippets로 해결하세요.
Next React/ES7+/React-Native snippets 확장을 설치하면 아래처럼 코드 작성을 빠르게 할 수 있습니다:

• rafce 입력 후 탭 → 화살표 함수형 컴포넌트 생성
• Next.js 관련 메서드: getStaticProps, getServerSideProps 등

vs code 확장프로그램 Snippets 설치

 

💻 3. 내장 터미널 적극 활용

VS Code에는 자체 터미널이 내장되어 있어, 별도의 콘솔 없이 바로 npm run dev 같은 명령을 실행할 수 있습니다.

• 터미널 단축키
  • Windows/Linux: Ctrl + ~
  • macOS: Cmd + ~

vscode에서 terminal 사

 

🐞 4. 디버깅 설정 활용하기

.vscode/launch.json을 설정하면 VS Code에서 직접 Next.js 앱을 디버깅할 수 있습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Next.js Debug",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

 

⚙️ 5. 자동 저장 및 포맷 기능 사용

자동 저장과 저장 시 포맷 기능을 활용하면 작업 흐름이 훨씬 매끄러워집니다.

• 설정 열기 (Ctrl + ,)
  • Files: Auto Save → afterDelay
  • Editor: Format On Save → 체크

vscode auto save

 

✨ 마무리하며

작은 설정 하나하나가 개발자의 생산성을 크게 좌우합니다.
이번에 소개한 설정들을 한 번 적용해 보세요. Next.js와 VS Code의 조합이 더욱 강력해질 것입니다.