4주 과정으로 돌아가기
2주차

Cursor AI와 함께하는 자유로운 코딩의 세계

Cursor AI를 활용하여 기획서를 실제 웹사이트로 구현하기

8월 19일(화) 20:00 - 22:00

이번 주 핵심 포인트

복잡한 설정이 필요한 Next.js와 Firebase를 AI의 도움으로 다루는 경험
혼자서는 어려웠을 복잡한 프레임워크 설정과 백엔드 연동을 Cursor AI와 함께 단계별로 차근차근 구현해봅니다.

학습 목표

  • Cursor AI를 개발 환경으로 설정하고, AI와 협업하는 방식 익히기
    Cursor AI의 다양한 기능을 활용하여 효율적인 개발 워크플로우를 구축하고, AI와의 협업을 통해 생산성을 극대화하는 방법을 익힙니다.
  • Next.js와 Firebase를 연동하여 프로젝트의 기본 뼈대 구성
    React 기반의 Next.js 프레임워크와 Firebase 백엔드를 연동하여 확장 가능한 웹 애플리케이션의 기초를 구축합니다.
  • Firebase의 DB(Firestore)와 인증(Authentication) 기능 활용
    NoSQL 데이터베이스인 Firestore를 활용한 데이터 저장 및 Google Authentication을 통한 로그인 기능을 구현합니다.

실습 프로젝트

📋
1주차 과제(PRD)를 바탕으로 '나만의 TODO 앱' 프로젝트 시작
1주차에서 작성한 PRD를 기반으로 실제 웹 애플리케이션을 개발하기 시작합니다. Next.js, Firebase를 활용하여 확장 가능한 구조로 프로젝트를 구성합니다.

세부 일정 (2시간)

20:00 - 20:20
Cursor AI 개발 환경 설정
Cursor AI 설치, 기본 사용법 익히기, AI와의 협업 방식 이해
20:20 - 20:50
Next.js 프로젝트 생성 및 설정
Cursor AI를 활용한 Next.js 프로젝트 생성, 기본 구조 이해, 라우팅 설정
20:50 - 21:30
Firebase 연동 및 기본 기능 구현
Firebase 프로젝트 설정, Firestore 데이터베이스 연결, Authentication 기본 설정
21:30 - 22:00
데이터 저장 및 로그인 기능 테스트
기본적인 CRUD 기능 테스트, Google 로그인 구현, Q&A 및 다음 주차 예고

📋 실습 과제

PRD를 실제 웹으로 구현하기

1주차에 작성했던 PRD의 핵심 기능들을 Cursor AI를 활용하여 Next.js와 Firebase 기반의 웹사이트로 직접 구현해보세요.

  • 기본적인 UI 컴포넌트 구성
  • Firebase 데이터베이스 연동
  • 로그인/로그아웃 기능 구현
  • 핵심 기능 1-2개 구현

🛠️ 이번 주에 다룰 기술 스택

Cursor AI

AI 기반 코드 에디터로 자동 완성, 코드 생성, 리팩토링 등을 지원하여 개발 속도를 혁신적으로 향상시킵니다.

🎯
Next.js

React 기반의 풀스택 프레임워크로 서버사이드 렌더링, 라우팅, 최적화 등을 제공합니다.

⚡
Firebase

Google의 백엔드 플랫폼으로 데이터베이스, 인증, 호스팅 등을 제공하여 복잡한 백엔드 구성 없이 개발 가능합니다.

🔥

💡 왜 이 기술들을 선택했나요?

빠른 프로토타이핑

복잡한 설정 없이 빠르게 아이디어를 구현할 수 있습니다.

확장성

사용자가 늘어나도 안정적으로 서비스를 운영할 수 있습니다.

학습 효율성

AI의 도움으로 복잡한 개념도 단계적으로 이해할 수 있습니다.

📚 알아두면 좋은 개발 기초 지식

📜 JavaScript 프레임워크/라이브러리 발전사

JavaScript 생태계는 지난 20년간 급속도로 발전해왔습니다. 각 시대별로 등장한 주요 도구들을 이해하면 현재 개발 환경을 더 잘 파악할 수 있어요.

2006-2010: jQuery 시대 ⭐

jQuery: "Write less, do more" - DOM 조작을 쉽게 만든 혁명적 라이브러리

복잡한 JavaScript를 간단한 문법으로 바꿔주었고, 거의 모든 웹사이트에서 사용되었습니다.

// jQuery 예시 $('#button').click(function() { $('.content').hide(); });

2010-2013: MVC 프레임워크 등장 🏗️

Backbone.js (2010): 첫 번째 진짜 MVC 프레임워크
Angular.js (2010): Google이 만든 강력한 프레임워크
Ember.js (2011): "Convention over configuration"

웹 앱이 복잡해지면서 구조적인 개발 방법론이 필요해졌습니다.

2013-2015: React 혁명 ⚛️

React (2013): Facebook이 만든 컴포넌트 기반 라이브러리

  • Virtual DOM으로 성능 향상
  • 컴포넌트 재사용성
  • 선언적 프로그래밍
  • 단방향 데이터 플로우

웹 개발 패러다임을 완전히 바꾼 게임 체인저였습니다.

2014-2016: 생태계 확장 🌱

Vue.js (2014): 배우기 쉬운 프레임워크
Webpack (2012): 모듈 번들러 혁신
Babel (2014): ES6+ 코드 변환
npm (2010): 패키지 매니저 표준화

개발 도구들이 체계화되고, 모던 JavaScript 개발 환경이 구축되었습니다.

2016-2020: 프레임워크 성숙기 🚀

Angular 2+ (2016): TypeScript 기반 재설계
Create React App (2016): 설정 없는 React 시작
Vue CLI (2017): Vue 개발 도구
React Hooks (2019): 함수형 컴포넌트 혁신

각 프레임워크가 안정화되고, 개발자 경험(DX)이 크게 향상되었습니다.

2020-현재: 메타 프레임워크 시대 ✨

Next.js: React 기반 풀스택 프레임워크
Nuxt.js: Vue 기반 메타 프레임워크
SvelteKit: Svelte 기반 앱 프레임워크
Remix: 웹 표준 중심 React 프레임워크

현재 트렌드: SSR, 성능 최적화, 개발자 경험, 풀스택 솔루션

🎯 2025년 현재 상황

🥇 주류 프레임워크

React, Vue, Angular이 여전히 3대 주류

🚀 급성장

Svelte, Solid.js 등 새로운 패러다임

🔥 메타 프레임워크

Next.js, Nuxt.js가 실질적 표준

💡 초보자를 위한 선택 가이드
추천 순서: React → Next.js → 다른 프레임워크 탐색
React를 먼저 배우면 대부분의 모던 프레임워크를 쉽게 이해할 수 있고, 취업 시장에서도 가장 많은 기회가 있습니다. 우리 수업에서 Next.js를 선택한 이유도 바로 이 때문입니다!

⚡ Next.js란 무엇인가요?

Next.js는 React 기반의 웹 프레임워크로, 복잡한 설정 없이도 프로덕션 레벨의 웹 애플리케이션을 쉽게 만들 수 있게 해줍니다.

🚀 서버사이드 렌더링(SSR)

페이지를 서버에서 미리 렌더링하여 SEO와 초기 로딩 속도를 개선합니다.

📁 파일 기반 라우팅

복잡한 라우터 설정 없이 폴더와 파일명으로 자동으로 페이지 경로가 생성됩니다.

⚡ 자동 최적화

이미지 최적화, 코드 분할, 번들 최적화가 자동으로 이루어집니다.

📝 JavaScript vs TypeScript

🟨 JavaScript
  • 동적 타입 언어 (변수 타입을 런타임에 결정)
  • 빠른 프로토타이핑과 개발 속도
  • 유연하지만 런타임 에러 가능성
  • 모든 브라우저에서 직접 실행
let message = "Hello World"; message = 123; // 가능하지만 위험
🔷 TypeScript
  • 정적 타입 언어 (변수 타입을 미리 선언)
  • 컴파일 시점에 에러 발견 가능
  • IDE 지원으로 자동완성 및 리팩토링
  • 대규모 프로젝트에 적합
let message: string = "Hello World"; // message = 123; // 컴파일 에러!
💡 초보자를 위한 추천

처음 시작할 때는 JavaScript로 기본 개념을 익히고, 프로젝트가 커지면 TypeScript로 전환하는 것을 추천합니다. 우리 수업에서는 JavaScript로 시작하지만, TypeScript의 장점도 함께 알아봅니다.

🔍 Lint(린트)란 무엇인가요?

Lint는 코드의 문법 오류, 스타일 문제, 잠재적 버그를 자동으로 찾아주는 도구입니다. 마치 맞춤법 검사기처럼 코드의 품질을 높여줍니다.

🚨 에러 발견

문법 오류나 타입 에러를 미리 발견하여 런타임 에러를 방지합니다.

📏 코딩 스타일 통일

팀 전체가 일관된 코딩 스타일을 유지할 수 있도록 도와줍니다.

🎯 모범 사례 제안

더 나은 코드 작성 방법을 제안하여 코드 품질을 향상시킵니다.

예시:
// Lint가 찾아내는 문제들 let unusedVariable = "사용되지 않는 변수"; // ⚠️ 경고 console.log(data) // ⚠️ 세미콜론 누락 if (true) return; // ⚠️ 중괄호 누락

🤖 AI 시대의 새로운 관점

사실 TypeScript와 Lint는 AI 시대에는 예전만큼 중요하지 않을 수도 있습니다. Cursor AI나 GitHub Copilot 같은 도구들이 실시간으로 코드 오류를 잡아주고, 더 나은 코드를 제안해주기 때문입니다.

🚀 AI가 대신해주는 것들
  • 실시간 타입 체크와 오류 감지
  • 코드 스타일 자동 정리
  • 잠재적 버그 예측 및 수정 제안
  • 최적화된 코드 패턴 제안
💭 새로운 개발 패러다임
  • 빠른 프로토타이핑이 더 중요
  • AI와의 협업 스킬이 핵심
  • 아이디어를 코드로 빠르게 구현
  • 완벽한 코드보다 동작하는 제품
📈 그럼에도 알아두면 좋은 이유

기본 개념을 이해하고 있으면 AI와 더 효과적으로 소통할 수 있고, AI가 제안하는 코드를 더 잘 이해하고 판단할 수 있습니다. 하지만 처음 배울 때는 너무 완벽하게 하려고 스트레스받지 말고, 일단 동작하는 것을 만드는 데 집중하세요!

🏗️ Frontend vs Backend - 웹 개발의 두 축

🎨 Frontend (프론트엔드)

사용자가 직접 보고 상호작용하는 웹사이트의 '보이는 부분'입니다.

주요 기술:
HTMLCSSJavaScriptReactNext.js
담당 업무:
  • 사용자 인터페이스(UI) 디자인
  • 사용자 경험(UX) 최적화
  • 반응형 웹 디자인
  • 사용자 입력 처리
  • 데이터 시각화

⚙️ Backend (백엔드)

사용자에게 보이지 않지만 웹사이트가 동작하게 하는 '서버측 로직'입니다.

주요 기술:
Node.jsFirebaseMongoDBPostgreSQLAPI
담당 업무:
  • 데이터베이스 관리
  • 사용자 인증 및 보안
  • API 개발
  • 서버 로직 구현
  • 데이터 처리 및 저장

🤝 Frontend ↔ Backend 협업

Frontend와 Backend는 API를 통해 소통합니다. 우리 수업에서는 Firebase가 Backend 역할을 해주어 복잡한 서버 구성 없이도 본격적인 웹 앱을 만들 수 있습니다.

Frontend
(Next.js)
↔
API
↔
Backend
(Firebase)

🔥 Firebase 완전 정복 가이드

🚀 Firebase가 특별한 이유

Firebase는 Google에서 제공하는 'Backend as a Service(BaaS)' 플랫폼입니다. 복잡한 서버 설정이나 인프라 관리 없이도 강력한 백엔드 기능을 쉽게 사용할 수 있어, 개발자가 제품의 핵심 기능 개발에만 집중할 수 있게 해줍니다.

💡 왜 Firebase를 선택해야 할까요?
  • 빠른 시작: 몇 분 만에 백엔드 서비스 구축 가능
  • 확장성: 사용자가 늘어나도 자동으로 확장
  • 실시간: 데이터 변경사항이 즉시 모든 클라이언트에 반영
  • 보안: Google 수준의 보안 시스템
  • 무료 시작: 개발과 테스트에 충분한 무료 사용량
🔐 Authentication (인증)

사용자 로그인/회원가입을 쉽게 구현할 수 있는 서비스입니다.

지원 방식:
  • 이메일/비밀번호
  • Google, Facebook, Twitter 소셜 로그인
  • 전화번호 인증
  • 익명 로그인
🗃️ Firestore (데이터베이스)

NoSQL 클라우드 데이터베이스로 실시간 동기화가 가능합니다.

주요 특징:
  • 실시간 데이터 동기화
  • 오프라인 지원
  • 유연한 문서 기반 구조
  • 강력한 쿼리 기능
🌐 Hosting (호스팅)

빠르고 안전한 웹 호스팅 서비스로 전 세계에 앱을 배포할 수 있습니다.

제공 기능:
  • SSL 인증서 자동 적용
  • CDN을 통한 빠른 로딩
  • 원클릭 배포
  • 커스텀 도메인 지원

🌐 Firebase Hosting vs App Hosting 비교

🔥 Firebase Hosting (기본)

정적 웹사이트와 SPA(Single Page Application)를 위한 호스팅

적합한 용도:
  • React, Vue, Angular 앱
  • 정적 사이트 (HTML/CSS/JS)
  • Next.js 정적 export
  • 문서 사이트, 포트폴리오

🚀 App Hosting (새로운 서비스)

풀스택 웹 앱을 위한 서버사이드 렌더링 지원 호스팅

적합한 용도:
  • Next.js SSR 앱
  • Nuxt.js 앱
  • SvelteKit 앱
  • 동적 콘텐츠 사이트
💡 우리 수업에서는?

Next.js를 사용하므로 **App Hosting**이 더 적합하지만, 처음에는 Firebase Hosting으로 시작해서 정적 배포를 경험해보고, 나중에 필요시 App Hosting으로 업그레이드하는 것을 추천합니다.

⚡ Cloud Functions (서버리스 함수)

서버 관리 없이 백엔드 로직을 실행할 수 있는 서비스입니다.

사용 예시:
  • 데이터베이스 트리거 함수
  • HTTP API 엔드포인트
  • 스케줄된 작업
  • 이메일 발송, 이미지 처리

🤖 AI Logic (AI 통합)

2024년 새로 출시된 Google Gemini AI를 앱에 쉽게 통합할 수 있는 서비스입니다.

주요 기능:
  • Gemini API 직접 연동
  • 텍스트, 이미지, 음성 AI
  • 클라이언트 SDK 제공
  • 온디바이스 AI 처리

🧩 Extensions (확장 기능)

미리 만들어진 솔루션을 원클릭으로 설치할 수 있는 마켓플레이스입니다.

인기 확장:
  • Stripe 결제 처리
  • 이메일 발송 (SendGrid)
  • 이미지 리사이징
  • 번역 서비스

📊 Firestore 데이터 구조 이해하기

Firestore는 문서(Document) 기반의 NoSQL 데이터베이스입니다. 관계형 데이터베이스와는 다른 구조를 가지고 있어요.

계층 구조:

데이터베이스 ├── 컬렉션 (Collection): "todos" │ ├── 문서 (Document): "todo1" │ │ ├── 필드: title: "공부하기" │ │ ├── 필드: completed: false │ │ └── 필드: createdAt: timestamp │ └── 문서 (Document): "todo2" │ ├── 필드: title: "운동하기" │ └── 필드: completed: true └── 컬렉션 (Collection): "users" └── 문서 (Document): "user1" ├── 필드: name: "김철수" └── 필드: email: "user@example.com"
📁 컬렉션

문서들의 그룹 (테이블과 유사)

📄 문서

실제 데이터 단위 (행과 유사)

🏷️ 필드

문서 내의 키-값 쌍 (컬럼과 유사)

🎯 Firebase 실전 활용 팁

🔒 보안 규칙 설정

사용자가 자신의 데이터만 접근할 수 있도록 보안 규칙을 설정하는 것이 중요합니다. 개발 초기에는 테스트 모드로 시작하되, 배포 전에 적절한 보안 규칙을 적용해야 합니다.

💰 비용 최적화

Firebase는 사용량에 따라 과금됩니다. 무료 할당량을 효율적으로 사용하고, 불필요한 읽기/쓰기 작업을 줄이는 것이 좋습니다.

🔄 실시간 기능 활용

Firestore의 실시간 리스너를 활용하면 채팅앱이나 협업 도구처럼 여러 사용자가 동시에 데이터를 보고 편집할 수 있는 앱을 쉽게 만들 수 있습니다.

🚀 Node.js 완전 설치 가이드 - 처음부터 끝까지

❓ Node.js가 뭔가요?

Node.js는 **웹 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 프로그램**입니다. React, Next.js 같은 모던 웹 개발 도구들을 사용하려면 반드시 필요해요!

💡 Node.js를 설치하면 함께 설치되는 것들:
  • npm: JavaScript 패키지(라이브러리) 관리자
  • npx: npm 패키지를 일회성으로 실행하는 도구
  • JavaScript 실행 환경: 브라우저 없이도 JS 코드 실행 가능

🔧 NVM - Node.js 버전 관리자

NVM(Node Version Manager)은 여러 버전의 Node.js를 쉽게 설치하고 전환할 수 있게 해주는 도구입니다. 프로젝트마다 다른 Node.js 버전이 필요할 때 매우 유용해요!

🎯 NVM을 사용하는 이유:
  • 프로젝트마다 다른 Node.js 버전 사용 가능
  • 최신 버전으로 쉽게 업데이트
  • 문제 발생시 이전 버전으로 롤백 가능
  • 여러 Node.js 버전을 동시에 유지

🪟 Windows 설치 방법 (관리자 권한 불필요!)

1단계: NVM for Windows 다운로드

브라우저에서 다음 링크로 이동하여 설치 파일을 다운로드하세요:

https://github.com/coreybutler/nvm-windows/releases

"nvm-setup.exe" 파일을 다운로드하고 실행하면 됩니다.

2단계: 설치 프로그램 실행

다운로드한 nvm-setup.exe를 더블클릭하여 설치합니다. (일반 사용자 권한으로 설치 가능)

💡 팁: 설치 과정에서 모든 기본 설정을 그대로 사용하시면 됩니다.

3단계: 명령 프롬프트 열기

시작 메뉴 → "cmd" 검색 → 명령 프롬프트 실행 (관리자 권한 불필요)

4단계: Node.js 설치
# 최신 LTS 버전 설치 nvm install lts nvm use lts

🍎 Mac 설치 방법 (sudo 불필요!)

1단계: 터미널 열기

Applications → Utilities → Terminal 또는 Cmd + Space → "터미널" 검색

2단계: NVM 직접 설치 (권한 불필요)

curl을 사용하여 NVM을 사용자 홈 디렉토리에 직접 설치합니다:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

💡 팁: 이 방법은 홈 디렉토리에 NVM을 설치하므로 관리자 권한이 필요하지 않습니다.

3단계: 터미널 재시작 또는 설정 적용

터미널을 새로 열거나 다음 명령어로 설정을 적용하세요:

source ~/.zshrc
4단계: NVM 설치 확인
nvm --version

버전 번호가 나오면 성공적으로 설치된 것입니다.

5단계: Node.js 설치
# 최신 LTS 버전 설치 nvm install --lts nvm use --lts nvm alias default lts/*

✅ 설치 확인하기

아래 명령어들을 실행해서 올바르게 설치되었는지 확인해보세요!

Node.js 버전 확인
node --version

v18.17.0 같은 버전이 나와야 합니다

npm 버전 확인
npm --version

9.8.1 같은 버전이 나와야 합니다

NVM 버전 확인
nvm --version

1.1.11 같은 버전이 나와야 합니다

📦 npm 기초 - 패키지 관리자 이해하기

npm은 "Node Package Manager"의 줄임말로, JavaScript 라이브러리들을 쉽게 설치하고 관리할 수 있게 해주는 도구입니다.

🔧 주요 npm 명령어

npm install 패키지명

패키지 설치

npm start

프로젝트 시작

npm run build

프로젝트 빌드

📄 package.json

프로젝트의 정보와 필요한 패키지 목록을 담고 있는 설정 파일입니다.

{ "name": "my-app", "scripts": { "dev": "next dev", "build": "next build" }, "dependencies": { "react": "^18.0.0", "next": "^13.0.0" } }

🚨 설치 중 문제가 생겼다면?

Windows: 권한 문제

PowerShell을 관리자 권한으로 실행했는지 확인

Set-ExecutionPolicy RemoteSigned
Mac: 설치 실패시

curl 명령어가 실패하는 경우 직접 다운로드 후 설치

brew install node
네트워크 문제

회사 방화벽이나 보안 프로그램 때문일 수 있음

npm config set registry https://registry.npmjs.org/

💻 터미널 완전 정복 - Windows vs Mac

🖥️ 1단계: 터미널 열기

🪟 Windows

방법 1: 키보드 단축키
Windows + R → "cmd" 입력 → Enter
방법 2: 시작 메뉴
  1. 시작 버튼 클릭
  2. "cmd" 또는 "명령 프롬프트" 검색
  3. 명령 프롬프트 실행
방법 3: PowerShell (추천)
  1. 시작 버튼 우클릭
  2. "Windows PowerShell" 선택
🤔 PowerShell vs CMD 차이점
PowerShell
  • 객체 기반 처리
  • 강력한 스크립팅
  • 별칭 지원 (ls, cat 등)
  • Git, npm 완벽 지원
  • .NET 통합
CMD (명령 프롬프트)
  • 텍스트 기반 처리
  • 기본적인 배치 스크립트
  • Windows 전통 명령어
  • 가볍고 빠른 실행
  • DOS 호환성
개발자 관점:

PowerShell은 Linux/Mac의 bash와 비슷한 기능을 제공해서 개발할 때 더 편리합니다. 예를 들어 PowerShell에서는 ls 명령어가 작동하지만 CMD에서는 dir만 사용 가능합니다.

🍎 Mac

방법 1: 키보드 단축키 (추천)
Command + Space → "터미널" 입력 → Enter
방법 2: 런치패드
  1. 런치패드 열기
  2. "기타" 폴더 찾기
  3. "터미널" 앱 실행
방법 3: Finder
  1. Finder → 응용 프로그램
  2. 유틸리티 폴더
  3. 터미널.app 실행

⚡ 2단계: 기본 명령어 익히기

📁 폴더 이동

cd 폴더명

특정 폴더로 이동합니다

📂 현재 위치 확인

pwd (Mac) / cd (Windows)

현재 있는 폴더 위치를 확인합니다

📋 파일 목록 보기

ls (Mac) / dir (Windows)

현재 폴더의 파일과 폴더 목록을 보여줍니다

💡 터미널 기본 사용 팁

  • Tab 키: 파일명이나 폴더명 자동완성
  • 위/아래 화살표: 이전에 입력한 명령어 히스토리
  • Ctrl+C: 현재 실행 중인 명령어 중단
  • clear (Mac) / cls (Windows): 화면 지우기

🛠️ 3단계: 개발 환경 설정 명령어 (복사하여 사용하세요!)

1️⃣ Node.js 설치 확인

node --version

Node.js가 설치되어 있는지 확인합니다. v18 이상이 표시되어야 합니다.

2️⃣ Cursor AI 설치

공식 사이트에서 다운로드:
https://cursor.sh/

운영체제에 맞는 버전을 다운로드하여 설치하세요.

3️⃣ Next.js 프로젝트 생성

프로젝트 생성:
npx create-next-app@latest my-todo-app
프로젝트 폴더로 이동:
cd my-todo-app
개발 서버 실행:
npm run dev

브라우저에서 http://localhost:3000 을 열어 결과를 확인하세요.

4️⃣ Firebase 설치

Firebase SDK 설치:
npm install firebase
Firebase CLI 설치 (선택사항):
npm install -g firebase-tools

Firebase CLI는 배포할 때 사용합니다. 나중에 설치해도 됩니다.

🚨 자주 발생하는 문제와 해결법

❌ "node is not recognized" 에러

원인:

Node.js가 설치되지 않았거나 PATH에 등록되지 않음

해결법:
  1. nodejs.org에서 LTS 버전 다운로드
  2. 설치 후 터미널 재시작
  3. node --version으로 확인

⚠️ "permission denied" 에러

원인:

관리자 권한이 필요한 명령어를 실행할 때 발생

해결법:
  • Windows: PowerShell을 관리자로 실행
  • Mac: 명령어 앞에 sudo 추가
  • 예: sudo npm install -g firebase-tools

🔌 "Port 3000 is already in use" 에러

원인:

이미 다른 프로그램이 3000번 포트를 사용 중

해결법:
  1. 실행 중인 다른 개발 서버 종료
  2. 또는 다른 포트 사용: npm run dev -- -p 3001
  3. Ctrl+C로 현재 프로세스 종료 후 재시작

📦 "npm install" 실행 안됨

해결법:
  1. package.json 파일이 있는 폴더인지 확인
  2. 네트워크 연결 상태 확인
  3. npm cache clean --force
  4. node_modules 폴더 삭제 후 재설치

🎯 Cursor AI 자동완성 안됨

확인사항:
  • 인터넷 연결 상태 확인
  • Cursor AI 계정 로그인 확인
  • 파일 확장자가 올바른지 확인 (.js, .jsx)
  • Cursor AI 업데이트 확인

🪟 Windows 한국어 경로 문제

원인:

한국어가 포함된 폴더명에서 오류 발생

해결법:
  • 영문 폴더명만 사용하기
  • C:\Dev\my-project 형태로 생성
  • 바탕화면 대신 별도 폴더 사용

🚑 응급처치 명령어 모음

프로세스 강제 종료
Ctrl + C
캐시 삭제
npm cache clean --force
완전 재설치
rm -rf node_modules npm install
포트 강제 종료
npx kill-port 3000

🤖 Cursor AI와 효과적으로 협업하는 방법

💬 명확한 요청하기

"TODO 추가 기능을 만들어줘"보다는 "사용자가 할 일을 입력하고 추가 버튼을 누르면 Firestore에 저장되는 기능을 만들어줘"처럼 구체적으로 요청하세요.

🔍 단계별 접근

한 번에 모든 기능을 요청하지 말고, 컴포넌트 생성 → 스타일링 → 기능 구현 → 데이터베이스 연동 순서로 단계별로 진행하세요.

🎯 컨텍스트 제공

현재 프로젝트 구조, 사용 중인 라이브러리, 이전에 작성한 코드에 대한 정보를 함께 제공하면 더 정확한 결과를 얻을 수 있습니다.