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

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

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

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

사전 지식 평가

수업을 더 효과적으로 진행하기 위해 각 분야에 대한 현재 지식 수준을 평가해주세요. 각 항목을 선택할 때마다 실시간으로 통계가 업데이트됩니다.

지식 수준 평가

실시간 통계 (총 0명 참여)

Cursor AI 사용 경험데이터 없음
Next.js 지식데이터 없음
Firebase 경험데이터 없음
JavaScript 실력데이터 없음
전반적인 개발 경험데이터 없음

이번 주 핵심 포인트

복잡한 설정이 필요한 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에 저장되는 기능을 만들어줘"처럼 구체적으로 요청하세요.

🔍 단계별 접근

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

🎯 컨텍스트 제공

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