제2강: 첫 번째 AI 자동완성 | Cursor AI 마스터 클래스

학습 목표

Cursor의 Tab 자동완성 기능 이해하기
효과적인 코드 주석 작성으로 AI 가이드하기
자동완성 수락, 거부, 수정하는 방법 익히기
다양한 프로그래밍 언어에서 활용하기
생산성을 극대화하는 팁과 트릭 마스터하기

Tab 자동완성의 작동 원리

Cursor의 Tab 자동완성은 단순한 코드 스니펫이 아닙니다. AI가 전체 프로젝트 컨텍스트를 이해하고, 다음에 작성할 코드를 예측하여 제안합니다.

AI는 어떻게 예측하나요?

현재 파일 컨텍스트

작성 중인 함수, 변수명, 코드 패턴을 분석합니다

프로젝트 전체 구조

다른 파일의 함수, 클래스, import를 참고합니다

주석과 문서

작성한 주석을 바탕으로 의도를 파악합니다

코딩 패턴

일반적인 코딩 패턴과 베스트 프랙티스를 적용합니다

첫 번째 Tab 경험하기

Step 1: 주석으로 의도 전달하기

AI에게 무엇을 만들고 싶은지 주석으로 알려주세요:

// Create a function that validates email addresses

💡 잠시 기다리면 회색 텍스트로 제안이 나타납니다:

function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

👉 Tab 키를 눌러 수락하세요!

Step 2: 연속적인 자동완성

함수를 수락한 후, 계속해서 코드를 작성해보세요:

타이핑: // Test the function

AI 제안:

console.log(validateEmail('user@example.com')); // true
console.log(validateEmail('invalid-email')); // false

Step 3: 더 복잡한 예제

이번엔 더 복잡한 함수를 만들어봅시다:

// Create a React component for a todo list with add, delete, and toggle functionality

AI가 생성한 전체 컴포넌트:

import React, { useState } from 'react';

function TodoList() {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
        if (inputValue.trim()) {
            setTodos([...todos, {
                id: Date.now(),
                text: inputValue,
                completed: false
            }]);
            setInputValue('');
        }
    };

    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    const toggleTodo = (id) => {
        setTodos(todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    };

    return (
        <div className="todo-list">
            <h2>Todo List</h2>
            <div className="add-todo">
                <input
                    type="text"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addTodo()}
                    placeholder="Add a new todo"
                />
                <button onClick={addTodo}>Add</button>
            </div>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id} className={todo.completed ? 'completed' : ''}>
                        <span onClick={() => toggleTodo(todo.id)}>
                            {todo.text}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TodoList;

자동완성 컨트롤 마스터하기

필수 단축키

Tab

제안 수락

Esc

제안 거부

Cmd + →

단어 단위로 수락

Cmd + ↓

라인 단위로 수락

부분 수락 테크닉

때로는 AI 제안의 일부만 필요할 때가 있습니다:

시나리오: 함수명은 좋은데 구현은 다르게 하고 싶을 때

// Calculate the average of an array
function calculateAverage(numbers) {
    return numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
}

💡 Cmd + →를 여러 번 눌러 함수 선언부만 수락하고, 내부는 직접 구현할 수 있습니다.

언어별 자동완성 활용법

JavaScript 예제

// Fetch data from API with error handling
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching user data:', error);
        throw error;
    }
}

Python 예제

# Create a class for managing a library system
class Library:
    def __init__(self, name):
        self.name = name
        self.books = []
        self.members = []
        
    def add_book(self, title, author, isbn):
        book = {
            'title': title,
            'author': author,
            'isbn': isbn,
            'available': True
        }
        self.books.append(book)
        return book
    
    def borrow_book(self, isbn, member_id):
        for book in self.books:
            if book['isbn'] == isbn and book['available']:
                book['available'] = False
                book['borrowed_by'] = member_id
                return True
        return False

TypeScript 예제

// Define interfaces for a shopping cart system
interface Product {
    id: string;
    name: string;
    price: number;
    category: string;
}

interface CartItem {
    product: Product;
    quantity: number;
}

class ShoppingCart {
    private items: CartItem[] = [];
    
    addItem(product: Product, quantity: number = 1): void {
        const existingItem = this.items.find(item => item.product.id === product.id);
        
        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            this.items.push({ product, quantity });
        }
    }
    
    getTotalPrice(): number {
        return this.items.reduce((total, item) => {
            return total + (item.product.price * item.quantity);
        }, 0);
    }
}

Java 예제

// Create a singleton database connection manager
public class DatabaseManager {
    private static DatabaseManager instance;
    private Connection connection;
    
    private DatabaseManager() {
        // Private constructor to prevent instantiation
    }
    
    public static synchronized DatabaseManager getInstance() {
        if (instance == null) {
            instance = new DatabaseManager();
        }
        return instance;
    }
    
    public void connect(String url, String username, String password) throws SQLException {
        if (connection != null && !connection.isClosed()) {
            return;
        }
        
        connection = DriverManager.getConnection(url, username, password);
    }
    
    public Connection getConnection() {
        return connection;
    }
}

프로 팁: 자동완성 극대화하기

1. 명확한 주석 작성

구체적이고 명확한 주석을 작성할수록 AI의 제안이 정확해집니다.

✅ 좋은 예:

// Create a function that validates credit card numbers using Luhn algorithm

❌ 나쁜 예:

// validate card

2. 컨텍스트 제공하기

관련 코드나 import를 먼저 작성하면 AI가 더 적절한 제안을 합니다.

import { useState, useEffect } from 'react';
import axios from 'axios';

// Now AI knows you're using React hooks and axios

3. 반복 패턴 활용

비슷한 패턴의 코드를 여러 개 작성할 때, 첫 번째를 작성하면 AI가 패턴을 학습합니다.

const [name, setName] = useState('');
const [email, setEmail] = useState('');
// AI will suggest: const [phone, setPhone] = useState('');

4. 잠시 기다리기

타이핑을 멈추고 1-2초 기다리면 더 정확한 제안이 나타납니다.

실습: Tab 자동완성 마스터하기

미니 프로젝트: 사용자 관리 시스템

Tab 자동완성만을 사용해서 간단한 사용자 관리 시스템을 만들어봅시다.

Step 1: User 클래스 생성

다음 주석을 작성하고 Tab으로 완성하세요:

// Create a User class with properties: id, name, email, role, createdAt

Step 2: UserManager 클래스

사용자 관리 기능을 추가합니다:

// Create a UserManager class with methods: addUser, removeUser, findUserById, findUserByEmail, getAllUsers

Step 3: 유효성 검사 추가

이메일 검증과 에러 처리를 추가합니다:

// Add email validation and error handling to the addUser method

Step 4: 테스트 코드

작성한 클래스를 테스트합니다:

// Create test cases for UserManager

🏆 도전 과제

다음 기능들을 Tab 자동완성만으로 추가해보세요:

사용자 역할(role) 기반 권한 시스템
비밀번호 해싱 기능
사용자 검색 및 필터링
JSON 파일로 데이터 저장/불러오기

문제 해결

자동완성이 나타나지 않아요

Settings → Features → "Tab Autocomplete"가 활성화되어 있는지 확인
인터넷 연결 상태 확인
Cursor 재시작 시도

제안이 부정확해요

더 구체적인 주석 작성
관련 import나 변수 선언을 먼저 작성
프로젝트 컨텍스트가 로드될 때까지 잠시 대기

제안이 너무 길어요

부분 수락 기능 활용 (Cmd/Ctrl + →)
더 작은 단위로 주석 작성
필요한 부분만 수락하고 나머지는 직접 수정

핵심 정리

Tab은 마법의 키

단순한 자동완성이 아닌, AI가 전체 컨텍스트를 이해하고 제안하는 지능형 코딩 도우미입니다.

주석이 곧 프롬프트

명확하고 구체적인 주석을 작성하면 AI가 정확한 코드를 생성합니다.

부분 수락의 유연성

전체를 수락할 필요 없이, 필요한 부분만 선택적으로 사용할 수 있습니다.

컨텍스트가 핵심

프로젝트의 다른 파일들과 현재 코드를 함께 고려하여 더 정확한 제안을 제공합니다.

다음 강의 예고

다음 강의에서는 AI Chat 기능을 통해 코드에 대해 질문하고, 설명을 듣고, 즉시 수정하는 방법을 배웁니다.

다음 강의로 이동