Cursor에서 JavaScript 및 TypeScript 개발에 오신 것을 환영합니다! 이 에디터는 확장 생태계를 통해 JS/TS 개발에 대한 뛰어난 지원을 제공합니다. Cursor를 최대한 활용하기 위해 알아야 할 내용은 다음과 같습니다.

​
필수 확장 프로그램

Cursor는 사용자가 선호하는 모든 확장 프로그램과 잘 작동하지만, 처음 시작하는 분들에게는 다음과 같은 확장 프로그램을 권장합니다:
  • ESLint - Cursor의 AI 기반 린트 수정 기능에 필요
  • JavaScript and TypeScript Language Features - 향상된 언어 지원 및 IntelliSense
  • Path Intellisense - 파일 경로에 대한 지능형 경로 자동 완성

​
Cursor 기능

Cursor는 기존 JavaScript/TypeScript 워크플로우를 다음과 같이 향상시킵니다:
  • Tab 자동완성: 프로젝트 구조를 이해하는 컨텍스트 인식 코드 자동완성
  • 자동 Import: Tab이 라이브러리를 사용하는 즉시 자동으로 import할 수 있습니다
  • 인라인 편집: 어떤 줄에서든 CMD+K를 사용하여 완벽한 구문으로 편집
  • Composer 가이드: Composer로 여러 파일에 걸쳐 코드를 계획하고 편집

​
@Docs를 통한 프레임워크 인텔리전스

Cursor의 @Docs 기능을 사용하면 AI가 참조할 수 있는 사용자 정의 문서 소스를 추가하여 JavaScript 개발을 강화할 수 있습니다. MDN, Node.js 또는 선호하는 프레임워크의 문서를 추가하여 더 정확하고 맥락적인 코드 제안을 받으세요.

@Docs에 대해 더 알아보기

Cursor에서 사용자 정의 문서 소스를 추가하고 관리하는 방법을 알아보세요.

​
자동 린팅 해결

Cursor의 뛰어난 기능 중 하나는 Linter 확장과의 원활한 통합입니다. ESLint와 같은 린터가 설정되어 있는지 확인하고 ‘Iterate on Lints’ 설정을 활성화하세요. 그러면 Composer에서 Agent 모드를 사용할 때, AI가 쿼리에 답변을 시도하고 코드 변경을 수행한 후, 자동으로 린터의 출력을 읽고 알지 못했던 린트 오류를 수정하려고 시도합니다.

​
프레임워크 지원

Cursor는 다음과 같은 모든 주요 JavaScript 프레임워크 및 라이브러리와 원활하게 작동합니다:

​
React & Next.js

  • 지능적인 컴포넌트 제안과 함께 완전한 JSX/TSX 지원
  • Next.js를 위한 서버 컴포넌트 및 API 라우트 인텔리전스
  • 권장사항: React Developer Tools 확장

​
Vue.js

  • Volar 통합을 통한 템플릿 구문 지원
  • 컴포넌트 자동 완성 및 타입 검사
  • 권장사항: Vue Language Features

​
Angular

  • 템플릿 검증 및 TypeScript 데코레이터 지원
  • 컴포넌트 및 서비스 생성
  • 권장사항: Angular Language Service

​
Svelte

  • 컴포넌트 구문 하이라이팅 및 지능적인 완성
  • 반응형 문 및 스토어 제안
  • 권장사항: Svelte for VS Code

​
백엔드 프레임워크 (Express/NestJS)

  • 라우트 및 미들웨어 인텔리전스
  • NestJS를 위한 TypeScript 데코레이터 지원
  • API 테스팅 도구 통합
Cursor의 AI 기능은 이러한 모든 프레임워크와 잘 작동하며, 각 프레임워크의 패턴과 모범 사례를 이해하여 관련성 있는 제안을 제공한다는 점을 기억하세요. AI는 컴포넌트 생성부터 복잡한 리팩토링 작업까지 모든 것을 도와주며, 프로젝트의 기존 패턴을 존중합니다.