Cursor, AI Coding #4 에디터 기본 설정

아트·2025년 10월 21일

AI cursor node.js

Cursor

목록 보기

4/6

앞서 뻔한 얘기들은 AI들에게 정리 시켰지만 여기부턴 거진 수동의 영역이네요.

사전 준비사항

Cursor 설치

시리즈부터가 Cursor를 통한 개발에 대한 안내라 반드시 필요합니다.

Node.js 설치

간단한 예제를 위해 Node.js를 사용합니다. 사전 지식은 없어도 되며, 요즘 인스톨러를 통해 설치하면 각종 도구들도 설치해주니 편히 설치 가능합니다.

AI를 혼낼 마음가짐

프롬프트를 아무리 디테일하게 주어도 확률에 의해 만들어지는 것이므로 맘에드는 결과물을 뽑아내기 힘들 수 있습니다. 향후 다루겠지만 이 과정이 AI를 통한 작업의 핵심되는 함정입니다.

Cursor 기능소개

가볍게 읽어주시면됩니다.

이 학습서에서 본격적으로 활용할 Cursor의 핵심 기능들을 상세히 알아보겠습니다. 이전 문서에서 개략적으로 소개했지만, 실제 프로젝트 작업에서 어떻게 활용하는지 구체적인 예시와 함께 설명하겠습니다.

Chat 기능 - AI 어시스턴트와의 대화

Cursor의 Chat 기능은 프로젝트 개발 전반에 걸쳐 가장 많이 활용되는 핵심 기능입니다:

주요 활용 방법

코드 생성 요청하기

새로운 Express 미들웨어를 만들어주세요. 요청을 로깅하고 에러를 처리하는 미들웨어가 필요합니다.

코드 리뷰 받기

내가 작성한 이 함수에서 개선할 점이 있을까요?

function createTodo(data) {
  return {
    id: Date.now(),
    title: data.title,
    completed: false
  };
}

아키텍처 조언 구하기

현재 할 일 관리 API에 사용자 인증 기능을 추가하려고 합니다. JWT 토큰을 사용하는 방법이 좋을까요? 아니면 세션 기반이 나을까요?

디버깅 도움 받기

서버에서 "Cannot use import statement outside a module" 에러가 발생합니다. package.json에 "type": "module"을 설정했는데도 문제가 해결되지 않습니다. 어떻게 해야 할까요?

Chat 기능 활용 팁

구체적인 질문하기: "코드 작성해줘" 보다는 "Express 서버에서 JWT 인증 미들웨어를 만들어줘"처럼 구체적으로 질문하세요
코드 맥락 제공하기: 현재 작성 중인 코드의 일부를 함께 공유하면 더 정확한 답변을 받을 수 있습니다
단계별 요청하기: 복잡한 기능은 여러 단계로 나누어 요청하면 더 나은 결과를 얻을 수 있습니다

Inline 기능 - 실시간 코드 개선

코드의 특정 부분을 선택하고 즉시 개선 제안을 받을 수 있는 기능입니다:

활용 예시

코드 선택 후 리팩터링 요청

// 이 부분을 선택하고 Inline 기능을 사용해보세요
if (!title) {
  return res.status(400).json({ message: 'title required' });
}

Inline 기능을 사용하면 다음과 같은 개선안을 받을 수 있습니다:

// 입력 검증 강화
if (!title || typeof title !== 'string' || title.trim().length === 0) {
  return res.status(400).json({
    message: 'Title is required and must be a non-empty string',
    received: title,
    expectedFormat: 'string with length > 0'
  });
}

변수명 개선 요청

// 이 변수명을 선택하고 더 나은 이름으로 변경 요청
const item = { id: Date.now().toString(), title, done: false };

더 의미있는 변수명으로 변경:

const newTodo = {
  id: generateId(),
  title: title.trim(),
  completed: false,
  createdAt: new Date().toISOString()
};

Composer (터미널) 기능 - 효율적인 명령어 실행

화면 하단의 Terminal 탭을 통해 명령어를 실행할 수 있습니다:

주요 활용법

패키지 관리

# 새로운 패키지 설치
npm install helmet express-rate-limit

# 개발 의존성 설치
npm install --save-dev jest supertest

# 패키지 업데이트 확인
npm outdated

코드 포맷팅 및 린팅

# 코드 포맷팅 (prettier가 설치되어 있는 경우)
npx prettier --write src/

# 린팅 (eslint가 설치되어 있는 경우)
npx eslint src/ --fix

# 타입 체크 (TypeScript 프로젝트인 경우)
npx tsc --noEmit

테스트 실행

# 단위 테스트 실행
npm test

# 특정 테스트 파일만 실행
npm test todos.test.js

# 테스트 커버리지 확인
npm run test:coverage

Git 작업

# 변경사항 스테이징
git add .

# 커밋 메시지 작성
git commit -m "feat: 할 일 관리 API 구현"

# 원격 저장소 푸시
git push origin main

Rules 기능 - 프로젝트 표준화 (공식 문서)

프로젝트의 코드 작성 규칙을 정의하고 자동으로 적용할 수 있습니다. Cursor는 4가지 유형의 규칙을 지원합니다:

규칙 유형

프로젝트 규칙 (Project Rules)

.cursor/rules/ 디렉토리에 .mdc 파일로 저장됩니다
버전 관리되며 프로젝트 범위로 적용됩니다
파일 패턴 매칭과 메타데이터를 지원합니다

사용자 규칙 (User Rules)

Cursor 설정에서 정의되며 모든 프로젝트에 적용됩니다
전역 설정으로 개인 취향이나 선호도를 반영합니다

팀 규칙 (Team Rules)

팀 및 엔터프라이즈 플랜에서 사용 가능합니다
조직 전체에 적용되며 관리자에 의해 강제 적용될 수 있습니다
Cursor 대시보드에서 중앙 관리됩니다

AGENTS.md 파일

프로젝트 루트에 위치한 간단한 마크다운 파일입니다
복잡한 설정 없이 간단한 지침을 제공합니다
프로젝트 하위 디렉토리에서도 지원됩니다

실전 활용법

프로젝트 규칙을 설정한 후 Cursor는 다음과 같은 도움을 제공합니다:

새로운 함수를 작성할 때 자동으로 JSDoc 주석 템플릿을 제안합니다
변수명이나 함수명이 규칙에 맞지 않으면 실시간으로 알림을 표시합니다
코드 리뷰 시 설정한 규칙을 기준으로 개선사항을 제안합니다

레거시 지원: 기존 .cursorrules 파일은 여전히 지원되지만 향후 deprecated될 예정입니다.

Docs 기능 - 웹페이지 크롤링으로 문맥 강화

Cursor의 Docs 기능은 웹페이지를 크롤링하여 관련 정보를 Chat 대화의 문맥에 자동으로 포함시키는 기능입니다. 기술 문서나 레퍼런스를 실시간으로 가져와 정확한 정보를 제공합니다.

주요 기능

웹페이지 크롤링

사용자가 언급한 기술이나 라이브러리의 관련 웹페이지를 자동으로 크롤링합니다
공식 문서, API 레퍼런스, 가이드를 실시간으로 가져와 문맥에 포함합니다
Chat 대화 중 관련 정보를 자동으로 추가하여 더 정확한 답변을 제공합니다

지능적 문맥 파악

대화 내용과 관련된 웹페이지를 자동으로 식별합니다
여러 소스의 정보를 종합하여 더 완전한 답변을 생성합니다
최신 정보를 실시간으로 반영합니다

활용 예시

기술 문서 참조

Chat에서 "React hooks 사용법 알려줘"라고 질문하면
Docs 기능이 React 공식 문서를 크롤링하여
최신 hooks 사용법과 예제 코드를 문맥에 포함합니다.

API 문서 활용

"Express 미들웨어 만드는 방법"에 대해 질문하면
Express 공식 문서의 미들웨어 관련 섹션이 자동으로 포함되어
정확한 구현 방법을 제공합니다.

프레임워크 설정 확인

"Next.js 프로젝트 설정 방법"을 물어보면
Next.js 공식 가이드의 설정 관련 페이지가 크롤링되어
프로젝트 구성 방법을 상세히 설명합니다.

이 기능을 통해 개발자는 최신 공식 문서를 실시간으로 참조하면서도 자연스러운 대화를 유지할 수 있습니다. 특히 복잡한 기술이나 빠르게 변화하는 생태계에서 매우 유용합니다.

프로젝트 생성

cursor의 경우 vscode와 생태계가 완전히 같다고 볼 수 있습니다. vscode에서 되는건 cursor에서 어지간해서 된다고 보면 됩니다.

우선 디렉토리를 생성하고 cursor로 열면됩니다.

mkdir -p rest-api-server
#명령어로 열거면 아래 방식. gui는 직접 열어서 디렉토리 선택
cursor ./rest-api-server

이후 작업은 cursor 내 터미널에서 작업을 이어서 할 수 있습니다만, 목표는 AI가 직접일을 하게 만드는 것이니 에디터 설정을 조금 건드려 보겠습니다.

에디터 설정

에디터 우측 상단에 보면 네가지 아이콘이 있습니다.

순서대로 다음과 같습니다. :
1. 프로젝트 탐색기 : 파일 탐색기입니다.
2. 터미널 : 위에서 컴포저라 했던 것 입니다.
3. 대화 : AI와 대화하는 창입니다.
4. 설정 : 에디터 설정입니다. 이것을 열어야 해요

Chat

Chat 항목에서 Auto-Run을 찾아보면 Mode가 있을건데, 기호에 따라 수동 허가형 자동 실행형을 선택하면됩니다. 자동실행시 멋대로 파일을 삭제하거나 하는 행위가 발생할 수 있으니 규칙을 세세하게 잡지 않으면 피곤한 일이 발생할 수 있어요.

MCP

설명은 궁금하면 읽어 보세요

🧩 MCP란?

MCP는 LLM 기반 앱(예: Claude, Cursor, VS Code Copilot 등)을 외부 데이터 소스·도구·워크플로우와 표준 방식으로 연결하는 오픈 프로토콜입니다. 한 번의 통합으로 여러 앱에서 재사용 가능한 “AI용 USB-C 포트”를 제공한다고 이해하면 쉽습니다.

예) 로컬 파일/DB 조회, GitHub 이슈 생성, 사내 API 호출, 검색 엔진 사용, 사내 프롬프트 카탈로그 노출 등

🏗️ 구성 요소

Host(호스트 앱): 사용자가 상호작용하는 애플리케이션(예: IDE, 채팅 앱).
MCP Client(클라이언트): 호스트 앱 내에서 특정 MCP 서버와의 세션을 관리하는 프로토콜 구성요소.
MCP Server(서버): 외부 시스템을 대신해 Tools/Resources/Prompts를 표준 인터페이스로 노출.
- Tools: 호출 가능한 동작(예: search, createIssue, runSQL)
- Resources: 읽기 전용 컨텍스트(예: 문서, 설정, 스키마)
- Prompts: 재사용 가능한 프롬프트 템플릿(파라미터 포함)

🔁 동작 흐름(요약)

연결 & 핸드셰이크: 클라이언트↔서버가 버전/기능을 교환
디스커버리: 서버가 제공하는 tools/resources/prompts를 목록화
호출: 사용자의 지시에 따라 클라이언트가 Tool 호출(JSON-RPC 기반), 결과를 모델 컨텍스트로 반영
세션 유지: 필요 시 스트리밍/점진적 업데이트, 상태 공유
버전 규칙: 사양은 YYYY-MM-DD 형식 버전을 사용(하위 호환 변경은 버전 유지)

🔒 보안·거버넌스 포인트

최소 권한: 서버 단에서 노출할 도구/리소스를 명시적으로 제한
인증/비밀 관리: OS/플랫폼 비밀 보관소, 단기·에페메럴 자격 증명 지향
신뢰 관리: 호스트 앱에서 서버 신뢰 승인(allowlist)을 거치고, 호출 로그/감사를 활성화
조직 정책: 아이덴티티 단편화 방지(인간·머신 계정의 중앙집중 접근 제어), JIT 권한 적용

🌐 생태계 & 지원

공식 사이트/스펙/SDK: 프로토콜 정의와 레퍼런스 구현, Python/TS SDK 제공
Anthropic: 공개 표준으로 MCP 소개(Claude 데스크톱 등에서 활용)
Cursor: MCP 서버 디렉토리/설정 제공, cursor-agent가 관련 도구를 자동 탐지·사용
VS Code: Copilot 환경에서 MCP 서버 연결 가이드 제공

🧰 언제 쓰면 좋은가?

IDE나 에디터에서 프로젝트 문맥(파일, 코드 인덱스, 빌드/테스트 툴)과 LLM을 안전하게 연결하고 싶을 때
사내 DB·API·위키 등 사일로화된 지식을 통일된 표준으로 LLM에게 제공하고 싶을 때
프롬프트/워크플로우를 템플릿화하여 팀 전반에 재사용하고 싶을 때
기존 함수 호출(Function Calling)을 넘어서 교차 앱·교차 도구 표준화를 원할 때

Sequential-Thinking 설치

우선 설정-> Tools & MCP를 통해 New MCP Server를 눌러봅니다.

그럼 json을 통해 어떤 MCP를 사용할 것 인지 등록할 수 있습니다.
아래 내용을 통해 등록 해주면 설정은 완료입니다. :

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sequential-thinking"
      ]
    }
  }
}

그리고 터미널에 서버를 설치해야합니다.

npx -y @modelcontextprotocol/server-sequential-thinking

이렇게 하고 설정으로 복귀하면 아래 사진처럼 활성화가 되어있는 것을 볼 수 있습니다.

시퀀셜 띵킹은 쉽게 말해서 AI Agent가 작업을 진행할 때 사고과정을 전개할 수 있도록 도와주는 도구입니다.

Rules

Rules는 대화를 통해 직접 mdc 파일 형태로 작성하도록 유도할 것이라 여기선 배제하겠습니다.

Indexing & Docs

Indexing은 사실상 프로젝트내 파일을 색인하는 작업이니 간단히 넘어가겠습니다.

.cursorignore에 등록된 항목은 색인하지 않습니다. 쉽게 말해서 무거운 이미지나 사운드, 불필요한 모듈들을 등록하면 색인을 가볍게 해 컨텍스트 길이를 단축할 수 있습니다.

gitignore와 같으니 쉽게할 수 있으리라 믿습니다.

Docs

커서에게 웹크롤러를 이용해 자료를 미리 로컬에 정리해두라고 하는 기능입니다. 여기선 Node.js 문서만 등록해보겠습니다.

저는 22 LTS 버전을 사용하고 있습니다. 당연히 버전을 맞춰서 자료를 정리하도록 해야 AI가 다른 버전의 코드를 이용하지 않아 품질을 유지할 수 있습니다.

공식 문서의 URL은 다음과 같습니다.

https://nodejs.org/docs/latest-v22.x/api/index.html

이제 "+Add Doc"을 눌러 등록해줄 것 입니다.

url 우선 등록
이름 변경
"Share With Team"을 누르면 팀원으로 등록된 멤버들에게도 이 설정이 공유됩니다.
인덱싱 되고 있는 장면
완료되면 다음과 같이 됩니다.

이제 프로젝트와 관련된 설정을 해야하는데 시간이 없어서 다음 글에 작성하겠습니다.

아트

이전 포스트

Cursor, AI Coding #3 소통과 지시를 위한 배경지식

다음 포스트

Cursor, AI Coding #4 에디터 기본 설정

Cursor

사전 준비사항

Cursor 설치

Node.js 설치

AI를 혼낼 마음가짐

Cursor 기능소개

Chat 기능 - AI 어시스턴트와의 대화

주요 활용 방법

Chat 기능 활용 팁

Inline 기능 - 실시간 코드 개선

활용 예시

Composer (터미널) 기능 - 효율적인 명령어 실행

주요 활용법

Rules 기능 - 프로젝트 표준화 (공식 문서)

규칙 유형

실전 활용법

Docs 기능 - 웹페이지 크롤링으로 문맥 강화

주요 기능

활용 예시

프로젝트 생성

에디터 설정

Chat

MCP

🧩 MCP란?

🏗️ 구성 요소

🔁 동작 흐름(요약)

🔒 보안·거버넌스 포인트

🌐 생태계 & 지원

🧰 언제 쓰면 좋은가?

Sequential-Thinking 설치

Rules

Indexing & Docs

Docs

다음 글

Cursor, AI Coding #3 소통과 지시를 위한 배경지식

Cursor, AI Coding #5 Rules 셋팅

0개의 댓글