제4강: Cmd+K 완벽 가이드 | Cursor AI 마스터 클래스

학습 목표

Cmd+K(Ctrl+K)의 핵심 개념 이해하기
다양한 코드 변환 시나리오 마스터하기
효과적인 명령어 작성법 익히기
Cmd+K와 다른 기능의 조합 활용하기
생산성을 극대화하는 워크플로우 구축하기

Cmd+K란 무엇인가?

Cmd+K는 선택한 코드에 AI 명령을 내려 즉시 편집할 수 있는 Cursor의 킬러 기능입니다. 코드를 선택하고, 원하는 변환을 자연어로 설명하면, AI가 즉시 코드를 수정합니다.

Cmd+K의 특징

즉각적인 변환

선택한 코드를 바로 그 자리에서 변환

정확한 타겟팅

선택한 부분만 정확히 수정

자연어 명령

프로그래밍 용어 없이도 사용 가능

안전한 편집

언제든지 실행 취소 가능

Cmd+K 기본 사용법

3단계로 완성하는 코드 변환

코드 선택

변환하고 싶은 코드를 마우스나 키보드로 선택

→

Cmd+K 누르기

명령 입력창이 나타남

→

명령 입력

원하는 변환을 자연어로 설명

첫 번째 Cmd+K 체험

변환 전

function greet(name) {
    console.log("Hello, " + name + "!");
}

Cmd+K

변환 후

const greet = (name) => {
    console.log(`Hello, ${name}!`);
};

실전 Cmd+K 활용 예제

1. 문법 변환

Promise → Async/Await

function fetchData() {
    return fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
            return data;
        })
        .catch(error => {
            console.error(error);
        });
}

Cmd+K: "convert to async await"

async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error(error);
    }
}

2. 타입 추가 (JavaScript → TypeScript)

타입 없는 함수

function calculateTotal(items, taxRate) {
    const subtotal = items.reduce((sum, item) => 
        sum + item.price * item.quantity, 0);
    const tax = subtotal * taxRate;
    return {
        subtotal,
        tax,
        total: subtotal + tax
    };
}

Cmd+K: "add TypeScript types"

interface Item {
    price: number;
    quantity: number;
}

interface TotalResult {
    subtotal: number;
    tax: number;
    total: number;
}

function calculateTotal(items: Item[], taxRate: number): TotalResult {
    const subtotal = items.reduce((sum, item) => 
        sum + item.price * item.quantity, 0);
    const tax = subtotal * taxRate;
    return {
        subtotal,
        tax,
        total: subtotal + tax
    };
}

3. 코드 스타일 변경

클래스 컴포넌트

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>+</button>
            </div>
        );
    }
}

Cmd+K: "convert to functional component with hooks"

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+</button>
        </div>
    );
};

4. 에러 처리 추가

에러 처리 없는 코드

function parseJSON(jsonString) {
    return JSON.parse(jsonString);
}

Cmd+K: "add try-catch error handling"

function parseJSON(jsonString) {
    try {
        return JSON.parse(jsonString);
    } catch (error) {
        console.error('Failed to parse JSON:', error);
        return null;
    }
}

5. 성능 최적화

최적화되지 않은 React 컴포넌트

const ExpensiveList = ({ items, filter }) => {
    const filteredItems = items.filter(item => 
        item.name.toLowerCase().includes(filter.toLowerCase())
    );

    return (
        <ul>
            {filteredItems.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

Cmd+K: "optimize with useMemo"

import React, { useMemo } from 'react';

const ExpensiveList = ({ items, filter }) => {
    const filteredItems = useMemo(() => 
        items.filter(item => 
            item.name.toLowerCase().includes(filter.toLowerCase())
        ), [items, filter]
    );

    return (
        <ul>
            {filteredItems.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

효과적인 Cmd+K 명령어

명령어 작성 팁

🔄 변환 명령어

"convert to arrow function"
"change to async/await"
"make this a class method"
"convert to template literal"
"change var to const/let"

➕ 추가 명령어

"add error handling"
"add JSDoc comments"
"add TypeScript types"
"add console.log for debugging"
"add null check"

🔧 리팩토링 명령어

"extract to separate function"
"simplify this code"
"make this more readable"
"optimize performance"
"remove duplication"

🎨 스타일 명령어

"format with prettier"
"fix indentation"
"add semicolons"
"use single quotes"
"follow ESLint rules"

고급 명령어 패턴

복합 명령어

"convert to TypeScript and add proper error handling with custom error types"

여러 작업을 한 번에 수행

조건부 명령어

"add loading state if this is an async function"

조건에 따른 변환

컨텍스트 인식 명령어

"refactor to match the style of other functions in this file"

주변 코드 스타일에 맞춤

Cmd+K 고급 활용법

1. 다중 선택과 Cmd+K

여러 곳을 동시에 선택하고 Cmd+K를 사용할 수 있습니다:

// Cmd+D로 여러 곳을 선택
const width = 100;
const height = 200;
const depth = 50;

Cmd+K: "rename to camelCase with dimension prefix"

const dimensionWidth = 100;
const dimensionHeight = 200;
const dimensionDepth = 50;

2. 정규식 패턴 활용

복잡한 패턴 변환도 가능합니다:

// 여러 console.log 문
console.log('user:', user);
console.log('data:', data);
console.log('error:', error);

Cmd+K: "convert all console.log to debug function calls"

debug('user:', user);
debug('data:', data);
debug('error:', error);

3. 코드 생성

빈 함수에서 구현을 생성할 수도 있습니다:

function validateEmail(email) {
    // TODO: implement email validation
}

Cmd+K: "implement email validation with regex"

function validateEmail(email) {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
}

실습: Cmd+K로 코드 리팩토링

레거시 코드 현대화 프로젝트

오래된 JavaScript 코드를 현대적인 ES6+ 코드로 변환해봅시다.

원본 코드

var UserManager = function() {
    var users = [];
    
    this.addUser = function(name, email) {
        var user = {
            id: Date.now(),
            name: name,
            email: email
        };
        users.push(user);
        return user;
    };
    
    this.getUsers = function() {
        return users;
    };
    
    this.findUser = function(id) {
        for (var i = 0; i < users.length; i++) {
            if (users[i].id == id) {
                return users[i];
            }
        }
        return null;
    };
    
    this.removeUser = function(id) {
        for (var i = 0; i < users.length; i++) {
            if (users[i].id == id) {
                users.splice(i, 1);
                return true;
            }
        }
        return false;
    };
};

리팩토링 단계

Step 1: 클래스로 변환

전체 코드를 선택하고:

Cmd+K: "convert to ES6 class"

Step 2: 메서드 현대화

findUser 메서드를 선택하고:

Cmd+K: "use array find method instead of for loop"

Step 3: TypeScript 타입 추가

클래스 전체를 선택하고:

Cmd+K: "add TypeScript interfaces and types"

Step 4: 검증 로직 추가

addUser 메서드를 선택하고:

Cmd+K: "add email validation and duplicate check"

예상 결과

interface User {
    id: number;
    name: string;
    email: string;
}

class UserManager {
    private users: User[] = [];

    addUser(name: string, email: string): User | null {
        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            throw new Error('Invalid email format');
        }

        // Duplicate check
        const existingUser = this.users.find(u => u.email === email);
        if (existingUser) {
            throw new Error('User with this email already exists');
        }

        const user: User = {
            id: Date.now(),
            name,
            email
        };
        
        this.users.push(user);
        return user;
    }

    getUsers(): User[] {
        return [...this.users];
    }

    findUser(id: number): User | null {
        return this.users.find(user => user.id === id) || null;
    }

    removeUser(id: number): boolean {
        const index = this.users.findIndex(user => user.id === id);
        if (index !== -1) {
            this.users.splice(index, 1);
            return true;
        }
        return false;
    }
}

Cmd+K 워크플로우 통합

효율적인 작업 흐름

패턴 1: Write → Select → Transform

기본 코드를 빠르게 작성
개선이 필요한 부분 선택
Cmd+K로 즉시 변환

패턴 2: Copy → Paste → Adapt

유사한 코드 복사
새 위치에 붙여넣기
Cmd+K로 컨텍스트에 맞게 수정

패턴 3: Prototype → Refine

프로토타입 코드 작성
Cmd+K로 에러 처리 추가
Cmd+K로 타입 추가
Cmd+K로 최적화

다른 기능과의 조합

Tab + Cmd+K

AI 자동완성으로 기본 구조를 만들고, Cmd+K로 세부 조정

Chat + Cmd+K

Chat에서 전체적인 접근 방법을 물어보고, Cmd+K로 구체적인 구현

Multi-cursor + Cmd+K

여러 위치를 동시에 선택하고 일괄 변환

핵심 정리

즉각적인 코드 변환

선택한 코드를 자연어 명령으로 즉시 변환할 수 있는 강력한 도구입니다.

컨텍스트 인식

주변 코드와 프로젝트 구조를 이해하여 적절한 변환을 수행합니다.

다양한 활용 시나리오

문법 변환, 리팩토링, 최적화, 스타일 변경 등 모든 종류의 코드 편집에 활용 가능합니다.

워크플로우 가속화

반복적인 코드 수정 작업을 자동화하여 개발 속도를 획기적으로 향상시킵니다.

다음 강의 예고

다음 강의에서는 Cursor가 프로젝트 전체를 어떻게 이해하고 활용하는지, 프로젝트 컨텍스트를 최대한 활용하는 방법을 배웁니다.

다음 강의로 이동