beginner-guide
초보자를 위한 SaaS 개발 완전 가이드 - 아무것도 몰라도 OK
When & Why to Use This Skill
This comprehensive Claude skill serves as an all-in-one SaaS development guide tailored for absolute beginners. It covers the entire lifecycle of building a modern web application, from fundamental internet concepts and SaaS business models to full-stack development using Next.js, TypeScript, and AI API integration. By providing structured explanations of essential tools like Git, Node.js, and VS Code, it effectively lowers the barrier to entry for aspiring developers and entrepreneurs looking to launch their own software services.
Use Cases
- Foundational learning for individuals with zero programming experience who want to understand and build a SaaS (Software as a Service) product from scratch.
- A structured curriculum for students to master modern web architecture, including the client-server model, REST APIs, and database management.
- Step-by-step guidance for setting up a professional development environment, including terminal commands, version control with Git, and code editor optimization.
- Practical implementation guide for developers looking to integrate advanced AI capabilities from OpenAI and Anthropic into their web applications.
- A quick-reference resource for troubleshooting common development errors such as port conflicts, TypeScript type mismatches, and CORS issues.
| name | beginner-guide |
|---|---|
| description | 초보자를 위한 SaaS 개발 완전 가이드 - 아무것도 몰라도 OK |
완전 초보자를 위한 SaaS 개발 가이드
프로그래밍을 전혀 몰라도 이해할 수 있도록 모든 것을 자세히 설명합니다.
목차
- 인터넷과 웹의 기초
- SaaS란 무엇인가?
- 웹 개발의 구조 이해하기
- 프로그래밍 언어 기초
- 필수 도구 완전 정복
- 첫 프로젝트 만들기
- 데이터베이스 이해하기
- 로그인 시스템 이해하기
- 결제 시스템 이해하기
- AI 기능 추가하기
- 배포와 운영
- 자주 묻는 질문
1. 인터넷과 웹의 기초
인터넷이란?
🌐 인터넷 = 전 세계 컴퓨터가 연결된 거대한 네트워크
비유: 전 세계 도로망
- 도로 = 인터넷 케이블/와이파이
- 자동차 = 데이터(정보)
- 집/건물 = 서버(컴퓨터)
- 주소 = URL/IP 주소
┌─────────────────────────────────────────────────────────────┐
│ 인터넷 구조도 │
│ │
│ 🏠 당신의 컴퓨터 │
│ ↓ │
│ 📡 공유기 (와이파이) │
│ ↓ │
│ 🏢 인터넷 서비스 제공자 (KT, SK, LG 등) │
│ ↓ │
│ 🌍 인터넷 백본 (해저 케이블, 위성) │
│ ↓ │
│ 🏭 데이터센터 (구글, 네이버 등의 서버) │
└─────────────────────────────────────────────────────────────┘
웹(WWW)이란?
🕸️ 웹 (World Wide Web) = 인터넷 위에서 동작하는 서비스 중 하나
비유: 인터넷이 도로라면, 웹은 그 도로를 달리는 택시 서비스
웹 vs 다른 인터넷 서비스:
┌────────────────┬─────────────────────────────────────┐
│ 서비스 │ 설명 │
├────────────────┼─────────────────────────────────────┤
│ 웹 (HTTP) │ 웹사이트 보기 (크롬, 사파리) │
│ 이메일 (SMTP) │ 이메일 주고받기 (Gmail, 네이버) │
│ 파일전송 (FTP) │ 파일 업로드/다운로드 │
│ 화상통화 (RTC) │ Zoom, 카카오톡 영상통화 │
└────────────────┴─────────────────────────────────────┘
URL 이해하기
URL = 웹에서 특정 페이지의 주소
예시: https://www.example.com/products/shoes?color=red&size=270
분해:
┌─────────────────────────────────────────────────────────────┐
│ │
│ https:// www.example.com /products/shoes ?color=red │
│ ↓ ↓ ↓ ↓ │
│ 프로토콜 도메인 경로 쿼리 │
│ (보안연결) (웹사이트 이름) (페이지 위치) (추가 정보) │
│ │
└─────────────────────────────────────────────────────────────┘
프로토콜:
- http:// = 일반 연결 (보안 취약)
- https:// = 암호화된 연결 (안전) ✅ 필수!
도메인:
- www = 서브도메인 (생략 가능)
- example = 도메인 이름
- .com = 최상위 도메인 (TLD)
- .com = 기업
- .org = 비영리
- .kr = 한국
- .io = 기술 스타트업에서 많이 사용
브라우저란?
🌍 브라우저 = 웹사이트를 보여주는 프로그램
종류:
- Chrome (구글) - 가장 많이 사용 ⭐
- Safari (애플) - 맥/아이폰 기본
- Firefox (모질라) - 오픈소스
- Edge (마이크로소프트) - 윈도우 기본
브라우저가 하는 일:
1. URL 입력 받기
2. 서버에 페이지 요청
3. HTML, CSS, JavaScript 받기
4. 화면에 그려주기 (렌더링)
5. 사용자 입력 처리
개발자 도구 (매우 중요! ⭐):
- 열기: F12 또는 Ctrl+Shift+I (맥: Cmd+Option+I)
- Elements 탭: HTML 구조 보기
- Console 탭: 에러 메시지 확인
- Network 탭: 데이터 요청 확인
- Application 탭: 저장된 데이터 확인
2. SaaS란 무엇인가?
SaaS의 정의
📦 SaaS = Software as a Service (서비스형 소프트웨어)
쉽게 말해: 설치 없이 인터넷으로 사용하는 프로그램
과거 소프트웨어:
1. 가게에서 CD 구매 💿
2. 컴퓨터에 설치 💾
3. 한 번 구매로 평생 사용 (업데이트 별도)
4. 그 컴퓨터에서만 사용 가능
현재 SaaS:
1. 웹사이트 접속 🌐
2. 설치 필요 없음 ✅
3. 월/년 구독료 지불 💳
4. 어디서든 접속 가능 (폰, 태블릿, PC)
5. 항상 최신 버전
예시 비교:
┌────────────────┬─────────────────┬────────────────────┐
│ 과거 │ SaaS │ 차이점 │
├────────────────┼─────────────────┼────────────────────┤
│ MS Office CD │ Microsoft 365 │ 클라우드 저장 │
│ 포토샵 CD │ Adobe CC │ 월 구독 │
│ 한글 CD │ 한컴오피스 웹 │ 어디서든 접속 │
│ 로컬 메모장 │ Notion │ 실시간 동기화 │
│ Outlook 설치 │ Gmail │ 웹에서 바로 사용 │
└────────────────┴─────────────────┴────────────────────┘
SaaS의 장점
사용자 입장:
✅ 설치 불필요 - 브라우저만 있으면 OK
✅ 자동 업데이트 - 항상 최신 버전
✅ 어디서든 접속 - 폰, 태블릿, PC 동기화
✅ 초기 비용 낮음 - 비싼 소프트웨어 한 번에 구매 X
✅ 무료 체험 가능 - 써보고 결정
개발자/사업자 입장:
✅ 꾸준한 수익 - 구독료로 예측 가능한 매출
✅ 빠른 업데이트 - 모든 사용자에게 즉시 적용
✅ 사용 데이터 수집 - 서비스 개선에 활용
✅ 낮은 유통 비용 - CD 제작, 배송 불필요
✅ 글로벌 판매 - 인터넷으로 전 세계 판매
SaaS 비즈니스 모델
💰 SaaS 수익 모델 종류
1. 프리미엄 (Freemium)
┌─────────────────────────────────────┐
│ 무료 플랜 │ 유료 플랜 │
├─────────────────────────────────────┤
│ 기본 기능 │ 고급 기능 │
│ 제한된 용량 │ 무제한 용량 │
│ 광고 있음 │ 광고 없음 │
│ 워터마크 │ 워터마크 없음 │
└─────────────────────────────────────┘
예: Notion, Canva, Spotify
2. 구독제 (Subscription)
- 월간: $9.99/월
- 연간: $99/년 (2개월 무료)
예: Netflix, Adobe CC, Microsoft 365
3. 사용량 기반 (Usage-based)
- API 호출당 $0.001
- 저장 용량 GB당 $0.02
- 사용자 수당 $5/월
예: AWS, OpenAI API, Twilio
4. 1회성 + 유지보수
- 소프트웨어: $199 (1회)
- 업데이트/지원: $49/년
예: 일부 전문 소프트웨어
5. 티어 기반 (Tiered)
┌─────────┬──────────┬──────────┬──────────┐
│ Free │ Basic │ Pro │ Enterprise│
├─────────┼──────────┼──────────┼──────────┤
│ $0 │ $9/월 │ $29/월 │ 문의 │
│ 1명 │ 5명 │ 무제한 │ 무제한 │
│ 1GB │ 10GB │ 100GB │ 무제한 │
└─────────┴──────────┴──────────┴──────────┘
유명한 SaaS 서비스들
📊 분야별 SaaS 예시
생산성:
- Notion - 올인원 워크스페이스
- Slack - 팀 메신저
- Trello - 프로젝트 관리
- Figma - 디자인 협업
비즈니스:
- Salesforce - CRM (고객 관리)
- HubSpot - 마케팅 자동화
- Zendesk - 고객 지원
- QuickBooks - 회계
개발:
- GitHub - 코드 저장소
- Vercel - 웹 배포
- Supabase - 데이터베이스
- Stripe - 결제
AI:
- ChatGPT - AI 챗봇
- Midjourney - AI 이미지 생성
- Jasper - AI 글쓰기
- Copy.ai - AI 마케팅
한국 SaaS:
- 채널톡 - 고객 상담
- 토스페이먼츠 - 결제
- 센드버드 - 채팅 API
- 스티비 - 이메일 마케팅
3. 웹 개발의 구조 이해하기
클라이언트-서버 구조
🖥️ 클라이언트-서버 = 웹의 기본 구조
클라이언트 = 요청하는 쪽 (브라우저, 앱)
서버 = 응답하는 쪽 (웹 서버, 데이터베이스)
비유: 식당
┌─────────────────────────────────────────────────────────────┐
│ │
│ 👤 손님 (클라이언트) │
│ "짜장면 주세요" → 📋 주문서 (HTTP 요청) │
│ │
│ ↓ │
│ │
│ 👨🍳 주방 (서버) │
│ 짜장면 조리 → 🍜 음식 (HTTP 응답) │
│ │
│ ↓ │
│ │
│ 👤 손님이 짜장면 받음 │
│ │
└─────────────────────────────────────────────────────────────┘
웹에서:
1. 브라우저에서 URL 입력 (주문)
2. 서버가 요청 받음
3. 서버가 페이지 만들어서 보냄 (응답)
4. 브라우저가 페이지 표시
프론트엔드 상세 설명
👁️ 프론트엔드 = 사용자가 보고 만지는 모든 것
구성 요소:
1. HTML (뼈대)
┌─────────────────────────────────────────┐
│ <html> │
│ <head> │
│ <title>내 웹사이트</title> │
│ </head> │
│ <body> │
│ <h1>제목</h1> │
│ <p>내용</p> │
│ <button>클릭</button> │
│ </body> │
│ </html> │
└─────────────────────────────────────────┘
역할: 페이지의 구조와 내용 정의
비유: 건물의 철근 뼈대
2. CSS (디자인)
┌─────────────────────────────────────────┐
│ h1 { │
│ color: blue; /* 글자색 */ │
│ font-size: 32px; /* 글자 크기 */ │
│ margin: 20px; /* 여백 */ │
│ } │
│ │
│ button { │
│ background: green; /* 배경색 */ │
│ border-radius: 8px; /* 둥근 모서리 */ │
│ } │
└─────────────────────────────────────────┘
역할: 색상, 크기, 레이아웃, 애니메이션
비유: 건물의 페인트, 인테리어
3. JavaScript (동작)
┌─────────────────────────────────────────┐
│ // 버튼 클릭하면 알림 표시 │
│ button.onclick = function() { │
│ alert('버튼을 클릭했습니다!'); │
│ } │
│ │
│ // 3초 후에 메시지 변경 │
│ setTimeout(() => { │
│ title.textContent = '새로운 제목'; │
│ }, 3000); │
└─────────────────────────────────────────┘
역할: 클릭, 입력, 애니메이션 등 상호작용
비유: 건물의 전기, 엘리베이터, 자동문
프론트엔드 프레임워크 (더 쉽게 개발):
┌────────────┬───────────────────────────────────┐
│ React │ Facebook이 만듦, 가장 인기 │
│ Vue │ 배우기 쉬움, 한국에서 인기 │
│ Angular │ Google이 만듦, 대기업에서 사용 │
│ Svelte │ 가볍고 빠름, 떠오르는 신예 │
│ Next.js │ React 기반, 서버 기능 포함 ⭐ │
└────────────┴───────────────────────────────────┘
백엔드 상세 설명
🧠 백엔드 = 보이지 않는 곳에서 일하는 모든 것
역할:
1. 데이터 저장/조회/수정/삭제 (CRUD)
2. 로그인/회원가입 처리 (인증)
3. 결제 처리
4. 이메일 발송
5. 파일 업로드
6. 외부 API 연동
구성 요소:
1. 웹 서버
┌─────────────────────────────────────────┐
│ 요청을 받고 응답을 보내는 프로그램 │
│ │
│ - Express (Node.js) - 가장 쉬움 ⭐ │
│ - Fastify (Node.js) - 빠름 │
│ - Hono (Edge Runtime) - 초경량, 빠름 │
│ - Django (Python) - 기능 풍부 │
│ - FastAPI (Python) - 현대적, 빠름 ⭐ │
│ - Spring Boot (Java) - 대기업 │
│ - NestJS (Node.js) - 구조적 │
└─────────────────────────────────────────┘
2. 데이터베이스
┌─────────────────────────────────────────┐
│ 데이터를 영구적으로 저장하는 곳 │
│ │
│ SQL (관계형): │
│ - PostgreSQL - 가장 강력 ⭐ │
│ - MySQL - 가장 많이 사용 │
│ - SQLite - 가벼움, 파일 기반 │
│ │
│ NoSQL (비관계형): │
│ - MongoDB - 유연한 구조 │
│ - Redis - 초고속 캐시 │
│ - Firebase - 실시간 동기화 │
└─────────────────────────────────────────┘
3. API (Application Programming Interface)
┌─────────────────────────────────────────┐
│ 프론트엔드와 백엔드가 대화하는 방법 │
│ │
│ REST API (가장 흔함): │
│ GET /users → 사용자 목록 조회 │
│ POST /users → 새 사용자 생성 │
│ GET /users/123 → 특정 사용자 조회 │
│ PUT /users/123 → 사용자 정보 수정 │
│ DELETE /users/123 → 사용자 삭제 │
│ │
│ GraphQL (유연함): │
│ 필요한 데이터만 정확히 요청 가능 │
└─────────────────────────────────────────┘
API 상세 설명
📡 API = 프로그램끼리 대화하는 약속된 방법
비유: 레스토랑 메뉴판
손님(프론트엔드)은 메뉴판(API 문서)을 보고
웨이터(API)에게 주문(요청)하고
주방(백엔드)에서 만든 음식(데이터)을 받음
HTTP 메서드 (요청 종류):
┌─────────┬────────────────────────────────────┐
│ GET │ 데이터 조회 (읽기만) │
│ │ "이 상품 정보 보여줘" │
├─────────┼────────────────────────────────────┤
│ POST │ 새 데이터 생성 │
│ │ "새 회원 등록해줘" │
├─────────┼────────────────────────────────────┤
│ PUT │ 데이터 전체 수정 │
│ │ "이 상품 정보 전부 바꿔줘" │
├─────────┼────────────────────────────────────┤
│ PATCH │ 데이터 일부 수정 │
│ │ "이름만 바꿔줘" │
├─────────┼────────────────────────────────────┤
│ DELETE │ 데이터 삭제 │
│ │ "이 댓글 삭제해줘" │
└─────────┴────────────────────────────────────┘
실제 예시:
1. 사용자 목록 조회
요청: GET /api/users
응답:
{
"users": [
{ "id": 1, "name": "김철수", "email": "kim@example.com" },
{ "id": 2, "name": "이영희", "email": "lee@example.com" }
]
}
2. 새 사용자 생성
요청: POST /api/users
보내는 데이터:
{
"name": "박민수",
"email": "park@example.com",
"password": "secure123"
}
응답:
{
"id": 3,
"name": "박민수",
"message": "사용자가 생성되었습니다"
}
상태 코드 (응답 결과):
┌───────┬────────────────────────────────────────┐
│ 200 │ ✅ 성공 (OK) │
│ 201 │ ✅ 생성 성공 (Created) │
│ 400 │ ❌ 잘못된 요청 (Bad Request) │
│ 401 │ ❌ 인증 필요 (Unauthorized) │
│ 403 │ ❌ 권한 없음 (Forbidden) │
│ 404 │ ❌ 찾을 수 없음 (Not Found) │
│ 500 │ ❌ 서버 오류 (Internal Server Error) │
└───────┴────────────────────────────────────────┘
풀스택이란?
🎯 풀스택 = 프론트엔드 + 백엔드 모두 다루는 것
풀스택 개발자의 역할:
┌─────────────────────────────────────────────────────────────┐
│ │
│ 📱 프론트엔드 │
│ - UI/UX 디자인 구현 │
│ - 사용자 상호작용 │
│ - API 연동 │
│ ↕️ │
│ 🔌 API 계층 │
│ - 요청/응답 처리 │
│ - 데이터 변환 │
│ - 인증/권한 │
│ ↕️ │
│ 💾 백엔드/데이터베이스 │
│ - 비즈니스 로직 │
│ - 데이터 저장 │
│ - 외부 서비스 연동 │
│ ↕️ │
│ 🚀 배포/인프라 │
│ - 서버 설정 │
│ - 도메인 연결 │
│ - 모니터링 │
│ │
└─────────────────────────────────────────────────────────────┘
Next.js가 풀스택에 좋은 이유:
- 하나의 프로젝트에서 프론트+백엔드 모두 작성
- 서버 컴포넌트로 데이터베이스 직접 접근
- API 라우트로 백엔드 API 쉽게 생성
- Vercel로 원클릭 배포
4. 프로그래밍 언어 기초
프로그래밍이란?
💻 프로그래밍 = 컴퓨터에게 일을 시키기 위해 명령어를 작성하는 것
비유: 레시피 작성
요리 레시피:
1. 물 500ml를 냄비에 넣는다
2. 불을 켜고 끓인다
3. 라면을 넣는다
4. 4분간 기다린다
5. 불을 끈다
프로그래밍:
1. 변수에 값을 저장한다
2. 조건을 확인한다
3. 반복 작업을 수행한다
4. 결과를 화면에 표시한다
5. 프로그램을 종료한다
차이점:
- 레시피: 사람이 이해하고 실행
- 프로그램: 컴퓨터가 이해하고 실행
컴퓨터는 바보다!
- 정확한 명령만 이해함
- 애매한 표현 이해 못함
- 순서대로만 실행함
- 실수하면 에러 발생
JavaScript 기초
📜 JavaScript = 웹에서 가장 많이 쓰이는 프로그래밍 언어
왜 JavaScript?
- 브라우저에서 바로 실행됨
- 프론트엔드 필수
- 백엔드도 가능 (Node.js)
- 배우기 쉬움
- 취업 시장에서 수요 많음
1. 변수 (데이터 저장)
┌─────────────────────────────────────────────────────────────┐
│ // 변수 선언 방법 3가지 │
│ │
│ const name = "김철수"; // 상수 (변경 불가) ⭐ 권장 │
│ let age = 25; // 변수 (변경 가능) │
│ var old = "옛날 방식"; // 오래된 방식 (사용 X) │
│ │
│ // 변수 변경 │
│ age = 26; // let은 변경 가능 │
│ name = "이영희"; // ❌ const는 에러! │
│ │
│ // 데이터 타입 │
│ const text = "문자열"; // String (문자) │
│ const number = 42; // Number (숫자) │
│ const isTrue = true; // Boolean (참/거짓) │
│ const nothing = null; // 의도적 비어있음 │
│ const notDefined = undefined; // 정의되지 않음 │
│ const list = [1, 2, 3]; // Array (배열) │
│ const person = { // Object (객체) │
│ name: "철수", │
│ age: 25 │
│ }; │
└─────────────────────────────────────────────────────────────┘
2. 조건문 (만약 ~라면)
┌─────────────────────────────────────────────────────────────┐
│ const age = 20; │
│ │
│ if (age >= 19) { │
│ console.log("성인입니다"); │
│ } else if (age >= 14) { │
│ console.log("청소년입니다"); │
│ } else { │
│ console.log("어린이입니다"); │
│ } │
│ │
│ // 비교 연산자 │
│ // === 같다 (타입까지 비교, 권장) │
│ // == 같다 (타입 무시) │
│ // !== 다르다 │
│ // > 크다 │
│ // < 작다 │
│ // >= 크거나 같다 │
│ // <= 작거나 같다 │
│ │
│ // 논리 연산자 │
│ // && 그리고 (AND) │
│ // || 또는 (OR) │
│ // ! 아니다 (NOT) │
│ │
│ if (age >= 19 && age < 65) { │
│ console.log("일할 수 있는 나이"); │
│ } │
└─────────────────────────────────────────────────────────────┘
3. 반복문 (여러 번 실행)
┌─────────────────────────────────────────────────────────────┐
│ // for 반복문 │
│ for (let i = 0; i < 5; i++) { │
│ console.log(i); // 0, 1, 2, 3, 4 출력 │
│ } │
│ │
│ // 배열 순회 (for...of) ⭐ 권장 │
│ const fruits = ["사과", "바나나", "오렌지"]; │
│ for (const fruit of fruits) { │
│ console.log(fruit); // 사과, 바나나, 오렌지 │
│ } │
│ │
│ // 배열 메서드 (더 현대적) │
│ fruits.forEach((fruit) => { │
│ console.log(fruit); │
│ }); │
│ │
│ // map (변환) │
│ const upperFruits = fruits.map((fruit) => { │
│ return fruit.toUpperCase(); │
│ }); │
│ // ["사과", "바나나", "오렌지"] (변환 예시) │
│ │
│ // filter (필터링) │
│ const numbers = [1, 2, 3, 4, 5]; │
│ const evenNumbers = numbers.filter((n) => n % 2 === 0); │
│ // [2, 4] │
└─────────────────────────────────────────────────────────────┘
4. 함수 (재사용 가능한 코드 묶음)
┌─────────────────────────────────────────────────────────────┐
│ // 함수 선언 │
│ function greet(name) { │
│ return `안녕하세요, ${name}님!`; │
│ } │
│ │
│ // 함수 호출 │
│ const message = greet("철수"); │
│ console.log(message); // "안녕하세요, 철수님!" │
│ │
│ // 화살표 함수 (현대적 방식) ⭐ │
│ const greet2 = (name) => { │
│ return `안녕하세요, ${name}님!`; │
│ }; │
│ │
│ // 한 줄일 때 더 간단히 │
│ const greet3 = (name) => `안녕하세요, ${name}님!`; │
│ │
│ // 여러 매개변수 │
│ const add = (a, b) => a + b; │
│ console.log(add(3, 5)); // 8 │
│ │
│ // 기본값 설정 │
│ const greet4 = (name = "손님") => `안녕, ${name}!`; │
│ console.log(greet4()); // "안녕, 손님!" │
│ console.log(greet4("영희")); // "안녕, 영희!" │
└─────────────────────────────────────────────────────────────┘
5. 비동기 처리 (기다리기)
┌─────────────────────────────────────────────────────────────┐
│ // 왜 필요한가? │
│ // 서버에서 데이터 가져오는 건 시간이 걸림 │
│ // 기다리는 동안 다른 작업을 할 수 있게 해줌 │
│ │
│ // async/await 방식 (권장) ⭐ │
│ async function fetchUser() { │
│ try { │
│ // 서버에 요청하고 응답 기다리기 │
│ const response = await fetch('/api/user'); │
│ // JSON으로 변환 │
│ const data = await response.json(); │
│ console.log(data); │
│ } catch (error) { │
│ console.error('에러 발생:', error); │
│ } │
│ } │
│ │
│ // 사용 │
│ fetchUser(); │
│ │
│ // Promise 방식 (async/await의 기반) │
│ fetch('/api/user') │
│ .then(response => response.json()) │
│ .then(data => console.log(data)) │
│ .catch(error => console.error(error)); │
└─────────────────────────────────────────────────────────────┘
TypeScript 기초
📘 TypeScript = JavaScript + 타입
왜 TypeScript?
- 에러를 미리 발견
- 자동완성이 더 잘 됨
- 큰 프로젝트에서 필수
- 취업 시 필수 스킬
기본 문법:
┌─────────────────────────────────────────────────────────────┐
│ // 타입 명시 │
│ const name: string = "철수"; │
│ const age: number = 25; │
│ const isStudent: boolean = true; │
│ const hobbies: string[] = ["독서", "운동"]; │
│ │
│ // 객체 타입 │
│ interface User { │
│ id: number; │
│ name: string; │
│ email: string; │
│ age?: number; // ? = 선택적 (없어도 됨) │
│ } │
│ │
│ const user: User = { │
│ id: 1, │
│ name: "철수", │
│ email: "kim@example.com" │
│ // age는 없어도 OK │
│ }; │
│ │
│ // 함수 타입 │
│ function greet(name: string): string { │
│ return `안녕, ${name}!`; │
│ } │
│ │
│ // 화살표 함수 타입 │
│ const add = (a: number, b: number): number => { │
│ return a + b; │
│ }; │
│ │
│ // 유니온 타입 (여러 타입 중 하나) │
│ let value: string | number; │
│ value = "문자열"; // OK │
│ value = 42; // OK │
│ value = true; // ❌ 에러! │
│ │
│ // 제네릭 (타입을 매개변수로) │
│ function first<T>(arr: T[]): T { │
│ return arr[0]; │
│ } │
│ const firstNumber = first([1, 2, 3]); // number │
│ const firstString = first(["a", "b"]); // string │
└─────────────────────────────────────────────────────────────┘
에러 방지 예시:
┌─────────────────────────────────────────────────────────────┐
│ // JavaScript (에러 발견 어려움) │
│ function getUser(id) { │
│ // id가 뭔지 모름... │
│ // 실수로 문자열을 넣을 수도 있음 │
│ } │
│ getUser("abc"); // 실행 시 에러 │
│ │
│ // TypeScript (미리 에러 발견) │
│ function getUser(id: number) { │
│ // id는 반드시 숫자 │
│ } │
│ getUser("abc"); // ❌ 컴파일 에러! (실행 전에 발견) │
└─────────────────────────────────────────────────────────────┘
5. 필수 도구 완전 정복
터미널 마스터하기
⌨️ 터미널 = 컴퓨터에게 글로 명령하는 창
왜 필요한가?
- 개발 도구 대부분이 터미널에서 실행
- 클릭보다 빠름
- 자동화 가능
- 서버 관리 시 필수
열기:
- Windows: Win 키 → "cmd" 또는 "PowerShell"
- Mac: Spotlight(Cmd+Space) → "터미널"
- VS Code: Ctrl+` (백틱)
기본 명령어 상세:
┌─────────────────────────────────────────────────────────────┐
│ 📂 폴더 이동 │
│ │
│ cd Documents # Documents 폴더로 이동 │
│ cd my-project # 하위 폴더로 이동 │
│ cd .. # 상위 폴더로 이동 │
│ cd ~ # 홈 폴더로 이동 (Mac/Linux) │
│ cd / # 루트 폴더로 이동 │
│ cd - # 이전 폴더로 이동 │
│ │
│ 예시: │
│ /Users/kim $ # 현재 위치 │
│ /Users/kim $ cd Documents │
│ /Users/kim/Documents $ # 이동됨 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📋 목록 보기 │
│ │
│ ls # 파일 목록 (Mac/Linux) │
│ ls -la # 자세한 목록 (숨김 파일 포함) │
│ dir # 파일 목록 (Windows) │
│ │
│ 출력 예시: │
│ drwxr-xr-x 5 kim staff 160 Jan 4 10:30 my-project │
│ -rw-r--r-- 1 kim staff 1234 Jan 4 10:30 package.json │
│ │ │ │ │
│ └─권한 └─소유자 └─파일명 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📁 폴더 생성/삭제 │
│ │
│ mkdir my-folder # 폴더 생성 │
│ mkdir -p a/b/c # 중첩 폴더 한 번에 생성 │
│ rmdir my-folder # 빈 폴더 삭제 │
│ rm -rf my-folder # 폴더와 내용물 모두 삭제 ⚠️ 주의 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📄 파일 작업 │
│ │
│ touch file.txt # 빈 파일 생성 │
│ cat file.txt # 파일 내용 보기 │
│ cp file.txt copy.txt # 파일 복사 │
│ mv file.txt new.txt # 파일 이동/이름 변경 │
│ rm file.txt # 파일 삭제 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 🔍 찾기 │
│ │
│ pwd # 현재 위치 표시 │
│ which node # 프로그램 위치 찾기 │
│ find . -name "*.js" # 파일 찾기 (Mac/Linux) │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 🛠️ 기타 유용한 명령어 │
│ │
│ clear # 화면 지우기 │
│ history # 명령어 히스토리 │
│ ↑ / ↓ # 이전/다음 명령어 │
│ Tab # 자동 완성 │
│ Ctrl+C # 현재 작업 중단 │
│ Ctrl+D # 터미널 종료 │
└─────────────────────────────────────────────────────────────┘
Node.js 완전 정복
🟢 Node.js = JavaScript를 컴퓨터에서 실행하게 해주는 프로그램
원래 JavaScript는 브라우저에서만 실행 가능
Node.js로 컴퓨터에서도 실행 가능
→ 서버 프로그램 작성 가능!
설치:
1. https://nodejs.org 접속
2. LTS 버전 다운로드 (안정적)
- LTS = Long Term Support (오래 지원)
- Current = 최신 기능 (불안정할 수 있음)
3. 설치 파일 실행 → 다음 → 다음 → 완료
확인:
┌─────────────────────────────────────────────────────────────┐
│ $ node --version │
│ v22.12.0 # 버전 표시되면 성공! │
│ │
│ $ npm --version │
│ 10.9.0 # npm도 함께 설치됨 │
└─────────────────────────────────────────────────────────────┘
npm이란?
- Node Package Manager
- 다른 사람이 만든 코드를 쉽게 설치
- 전 세계 개발자가 공유하는 라이브러리 저장소
주요 명령어:
┌─────────────────────────────────────────────────────────────┐
│ npm init # 새 프로젝트 시작 │
│ npm init -y # 기본값으로 빠르게 시작 │
│ │
│ npm install 패키지명 # 패키지 설치 │
│ npm install # package.json의 모든 패키지 설치 │
│ npm install -D 패키지명 # 개발용 패키지 설치 │
│ npm install -g 패키지명 # 전역 설치 │
│ │
│ npm uninstall 패키지명 # 패키지 삭제 │
│ npm update # 패키지 업데이트 │
│ npm outdated # 업데이트 가능한 패키지 확인 │
│ │
│ npm run 스크립트명 # 스크립트 실행 │
│ npm run dev # 개발 서버 실행 │
│ npm run build # 프로덕션 빌드 │
│ npm run start # 프로덕션 실행 │
└─────────────────────────────────────────────────────────────┘
package.json 이해하기:
┌─────────────────────────────────────────────────────────────┐
│ { │
│ "name": "my-saas", // 프로젝트 이름 │
│ "version": "1.0.0", // 버전 │
│ "description": "내 SaaS", // 설명 │
│ │
│ "scripts": { // 실행 스크립트 │
│ "dev": "next dev", // npm run dev │
│ "build": "next build", // npm run build │
│ "start": "next start" // npm run start │
│ }, │
│ │
│ "dependencies": { // 필수 패키지 │
│ "next": "14.0.0", │
│ "react": "18.2.0" │
│ }, │
│ │
│ "devDependencies": { // 개발용 패키지 │
│ "typescript": "5.0.0", │
│ "eslint": "8.0.0" │
│ } │
│ } │
└─────────────────────────────────────────────────────────────┘
VS Code 완전 정복
💻 VS Code = 가장 인기 있는 무료 코드 에디터
설치:
1. https://code.visualstudio.com 접속
2. 다운로드 & 설치
첫 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. 한글화 │
│ - Ctrl+Shift+X (확장 프로그램) │
│ - "Korean" 검색 │
│ - "Korean Language Pack" 설치 │
│ - VS Code 재시작 │
│ │
│ 2. 테마 변경 │
│ - Ctrl+K → Ctrl+T │
│ - 원하는 테마 선택 │
│ - 추천: "One Dark Pro", "GitHub Dark" │
│ │
│ 3. 글꼴 변경 │
│ - File → Preferences → Settings │
│ - "font" 검색 │
│ - Font Family: 'Fira Code', monospace │
│ - Font Ligatures: 체크 (=> → ≡ 등 합자 표시) │
└─────────────────────────────────────────────────────────────┘
필수 확장 프로그램:
┌─────────────────────────────────────────────────────────────┐
│ 기본: │
│ - Korean Language Pack 한글화 │
│ - Prettier 코드 자동 정리 │
│ - ESLint 코드 오류 검사 │
│ - GitLens Git 히스토리 보기 │
│ │
│ 웹 개발: │
│ - Tailwind CSS IntelliSense Tailwind 자동완성 │
│ - Auto Rename Tag HTML 태그 자동 수정 │
│ - Path Intellisense 파일 경로 자동완성 │
│ - ES7+ React Snippets React 코드 조각 │
│ │
│ 편의: │
│ - Material Icon Theme 파일 아이콘 │
│ - Error Lens 에러 바로 표시 │
│ - Todo Tree TODO 주석 관리 │
│ - Thunder Client API 테스트 │
└─────────────────────────────────────────────────────────────┘
핵심 단축키:
┌─────────────────────────────────────────────────────────────┐
│ 파일: │
│ Ctrl+S 저장 │
│ Ctrl+N 새 파일 │
│ Ctrl+O 파일 열기 │
│ Ctrl+P 파일 검색 (빠른 열기) │
│ Ctrl+Shift+N 새 창 │
│ │
│ 편집: │
│ Ctrl+X 잘라내기 (줄 전체) │
│ Ctrl+C 복사 (줄 전체) │
│ Ctrl+V 붙여넣기 │
│ Ctrl+Z 되돌리기 │
│ Ctrl+Shift+Z 다시 실행 │
│ Ctrl+D 같은 단어 선택 │
│ Ctrl+/ 주석 토글 │
│ Alt+Up/Down 줄 이동 │
│ Ctrl+Shift+K 줄 삭제 │
│ │
│ 검색: │
│ Ctrl+F 찾기 │
│ Ctrl+H 찾아 바꾸기 │
│ Ctrl+Shift+F 전체 파일에서 찾기 │
│ │
│ 보기: │
│ Ctrl+` 터미널 열기/닫기 │
│ Ctrl+B 사이드바 토글 │
│ Ctrl+Shift+E 탐색기 │
│ Ctrl+Shift+X 확장 프로그램 │
│ Ctrl+Shift+G Git │
│ │
│ 멀티 커서: │
│ Alt+클릭 커서 추가 │
│ Ctrl+Alt+Up 위에 커서 추가 │
│ Ctrl+Alt+Down 아래에 커서 추가 │
└─────────────────────────────────────────────────────────────┘
자동 저장 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. File → Preferences → Settings │
│ 2. "auto save" 검색 │
│ 3. Files: Auto Save → "afterDelay" │
│ 4. Files: Auto Save Delay → 1000 (1초) │
└─────────────────────────────────────────────────────────────┘
Prettier 자동 포맷 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. File → Preferences → Settings │
│ 2. "format on save" 검색 → 체크 │
│ 3. "default formatter" 검색 → Prettier 선택 │
└─────────────────────────────────────────────────────────────┘
Git 완전 정복
🔄 Git = 코드 버전 관리 시스템
왜 필요한가?
┌─────────────────────────────────────────────────────────────┐
│ Git 없이: │
│ - project_최종.zip │
│ - project_최종_진짜최종.zip │
│ - project_최종_진짜최종_수정.zip │
│ - project_최종_진짜최종_수정_real.zip │
│ │
│ Git 사용 시: │
│ - 모든 변경 기록 저장 │
│ - 언제든 이전 상태로 되돌리기 │
│ - 여러 버전 동시 작업 (브랜치) │
│ - 팀원과 협업 │
└─────────────────────────────────────────────────────────────┘
설치:
1. https://git-scm.com 접속
2. 다운로드 & 설치
3. 설치 확인: git --version
초기 설정 (딱 한 번):
┌─────────────────────────────────────────────────────────────┐
│ # 이름 설정 (커밋에 표시됨) │
│ git config --global user.name "내 이름" │
│ │
│ # 이메일 설정 (GitHub 계정과 동일하게) │
│ git config --global user.email "my@email.com" │
│ │
│ # 기본 브랜치 이름 설정 │
│ git config --global init.defaultBranch main │
│ │
│ # 설정 확인 │
│ git config --list │
└─────────────────────────────────────────────────────────────┘
핵심 개념:
┌─────────────────────────────────────────────────────────────┐
│ │
│ 작업 디렉토리 스테이징 영역 로컬 저장소 원격 │
│ (Working) (Staging) (Local Repo) (Remote)│
│ │ │ │ │ │
│ 📄 파일 수정 │ │ │ │
│ │ │ │ │ │
│ └─── git add ───→│ │ │ │
│ │ │ │ │
│ └── git commit ───→│ │ │
│ │ │ │
│ └── git push ──→│ │
│ │ │
│ ←──────────────── git pull ─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Working Directory: 실제 파일들
Staging Area: 커밋 대기 상태
Local Repository: 내 컴퓨터의 Git 저장소
Remote Repository: GitHub 등 원격 저장소
기본 명령어:
┌─────────────────────────────────────────────────────────────┐
│ # 저장소 초기화 (새 프로젝트 시작) │
│ git init │
│ │
│ # 현재 상태 확인 │
│ git status │
│ │
│ # 변경사항 확인 │
│ git diff │
│ │
│ # 스테이징에 추가 │
│ git add 파일명 # 특정 파일 │
│ git add . # 모든 변경 파일 │
│ │
│ # 커밋 (변경사항 저장) │
│ git commit -m "변경 내용 설명" │
│ │
│ # 커밋 히스토리 보기 │
│ git log # 자세히 │
│ git log --oneline # 한 줄씩 │
│ │
│ # 원격 저장소 연결 │
│ git remote add origin https://github.com/username/repo.git │
│ │
│ # 원격에 푸시 (업로드) │
│ git push origin main │
│ git push -u origin main # 첫 푸시 시 (-u 옵션) │
│ │
│ # 원격에서 풀 (다운로드) │
│ git pull origin main │
│ │
│ # 저장소 복제 │
│ git clone https://github.com/username/repo.git │
└─────────────────────────────────────────────────────────────┘
브랜치 (가지):
┌─────────────────────────────────────────────────────────────┐
│ 브랜치 = 독립적인 작업 공간 │
│ │
│ main ─────●─────●─────●──────────────●───── │
│ ╲ ╱ │
│ feature ●────●────● │
│ (새 기능 작업) │
│ │
│ # 브랜치 목록 │
│ git branch │
│ │
│ # 새 브랜치 생성 │
│ git branch feature-login │
│ │
│ # 브랜치 이동 │
│ git checkout feature-login │
│ git switch feature-login # 최신 방식 │
│ │
│ # 생성 + 이동 한 번에 │
│ git checkout -b feature-login │
│ git switch -c feature-login # 최신 방식 │
│ │
│ # 브랜치 병합 (main에서 실행) │
│ git checkout main │
│ git merge feature-login │
│ │
│ # 브랜치 삭제 │
│ git branch -d feature-login │
└─────────────────────────────────────────────────────────────┘
실수 복구:
┌─────────────────────────────────────────────────────────────┐
│ # 마지막 커밋 취소 (변경사항 유지) │
│ git reset --soft HEAD~1 │
│ │
│ # 마지막 커밋 취소 (변경사항 삭제) │
│ git reset --hard HEAD~1 │
│ │
│ # 특정 파일 되돌리기 │
│ git checkout -- 파일명 │
│ │
│ # 모든 변경사항 버리기 │
│ git checkout . │
│ │
│ # 스테이징 취소 │
│ git reset HEAD 파일명 │
│ git reset HEAD # 모든 파일 │
└─────────────────────────────────────────────────────────────┘
.gitignore 파일:
┌─────────────────────────────────────────────────────────────┐
│ # .gitignore - Git에서 추적하지 않을 파일 목록 │
│ │
│ # 의존성 │
│ node_modules/ │
│ │
│ # 빌드 결과물 │
│ .next/ │
│ dist/ │
│ build/ │
│ │
│ # 환경 변수 (비밀 정보!) │
│ .env │
│ .env.local │
│ .env*.local │
│ │
│ # OS 파일 │
│ .DS_Store │
│ Thumbs.db │
│ │
│ # IDE │
│ .idea/ │
│ .vscode/ │
│ │
│ # 로그 │
│ *.log │
│ npm-debug.log* │
└─────────────────────────────────────────────────────────────┘
6. 첫 프로젝트 만들기
[기존 내용 유지하면서 더 상세하게...]
Next.js 프로젝트 생성
🚀 Next.js = React 기반 풀스택 프레임워크
왜 Next.js?
- 프론트엔드 + 백엔드 한 번에
- 파일 기반 라우팅 (폴더 = URL)
- 서버 사이드 렌더링 (SEO 좋음)
- 자동 코드 분할 (빠른 로딩)
- Vercel과 완벽 호환
프로젝트 생성 (상세):
┌─────────────────────────────────────────────────────────────┐
│ # 1. 터미널 열기 │
│ │
│ # 2. 원하는 폴더로 이동 │
│ cd Documents │
│ │
│ # 3. 프로젝트 생성 │
│ npx create-next-app@latest my-saas │
│ │
│ # 4. 질문에 답하기 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ✔ Would you like to use TypeScript? → Yes │ │
│ │ (타입 안전성, 에러 방지) │ │
│ │ │ │
│ │ ✔ Would you like to use ESLint? → Yes │ │
│ │ (코드 오류 검사) │ │
│ │ │ │
│ │ ✔ Would you like to use Tailwind CSS? → Yes │ │
│ │ (CSS 쉽게 작성) │ │
│ │ │ │
│ │ ✔ Would you like to use `src/` directory? → Yes │ │
│ │ (깔끔한 폴더 구조) │ │
│ │ │ │
│ │ ✔ Would you like to use App Router? → Yes │ │
│ │ (최신 라우팅 방식) │ │
│ │ │ │
│ │ ✔ Would you like to customize import alias? → No │ │
│ │ (기본값 @/* 사용) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ # 5. 프로젝트 폴더로 이동 │
│ cd my-saas │
│ │
│ # 6. VS Code로 열기 │
│ code . │
│ │
│ # 7. 개발 서버 실행 │
│ npm run dev │
│ │
│ # 8. 브라우저에서 확인 │
│ http://localhost:3000 │
└─────────────────────────────────────────────────────────────┘
[이하 생략 - 너무 길어서 계속됩니다...]
10. AI 기능 추가하기
AI API 이해하기
🤖 AI API = AI 모델을 API로 호출하는 것
과거:
- 직접 AI 모델 학습 (수개월~수년)
- 비싼 GPU 서버 필요 (수억원)
- 전문 지식 필요 (박사급)
현재:
- API 호출 한 번으로 AI 사용
- 사용한 만큼만 비용 지불
- 코드 몇 줄이면 끝!
어떻게 동작하나?
┌─────────────────────────────────────────────────────────────┐
│ │
│ 👤 사용자 입력 │
│ "오늘 날씨 어때?" │
│ │ │
│ ↓ │
│ 💻 당신의 SaaS 서버 │
│ API 키로 OpenAI/Claude에 요청 │
│ │ │
│ ↓ │
│ 🌐 AI 회사 서버 (OpenAI, Anthropic 등) │
│ 거대한 GPU로 AI 모델 실행 │
│ │ │
│ ↓ │
│ 📤 응답 반환 │
│ "오늘은 맑고 따뜻한 날씨입니다..." │
│ │ │
│ ↓ │
│ 👤 사용자에게 표시 │
│ │
└─────────────────────────────────────────────────────────────┘
OpenAI API 사용하기
// 1. 패키지 설치
// npm install openai
// 2. API 키 설정 (.env.local)
// OPENAI_API_KEY=sk-...
// 3. 코드 작성
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
// 기본 대화
async function chat(message: string) {
const response = await openai.chat.completions.create({
model: "gpt-4o", // 또는 "o3-mini", "gpt-4.1"
messages: [
{ role: "system", content: "친절한 AI 어시스턴트입니다." },
{ role: "user", content: message }
],
temperature: 0.7, // 창의성 (0~2, 높을수록 창의적)
max_tokens: 1000, // 최대 응답 길이
});
return response.choices[0].message.content;
}
// 사용
const answer = await chat("안녕하세요!");
console.log(answer); // "안녕하세요! 무엇을 도와드릴까요?"
Claude API 사용하기
// 1. 패키지 설치
// npm install @anthropic-ai/sdk
// 2. API 키 설정 (.env.local)
// ANTHROPIC_API_KEY=sk-ant-...
// 3. 코드 작성
import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY,
});
async function chat(message: string) {
const response = await anthropic.messages.create({
model: "claude-sonnet-4-20250514", // 또는 "claude-opus-4-20250514"
max_tokens: 1024,
system: "친절한 AI 어시스턴트입니다.",
messages: [
{ role: "user", content: message }
],
});
// Claude는 응답 구조가 조금 다름
return response.content[0].type === 'text'
? response.content[0].text
: '';
}
Vercel AI SDK (추천)
// 여러 AI를 쉽게 통합!
// 1. 패키지 설치
// npm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google
// 2. 스트리밍 응답 (실시간으로 글자가 나타남)
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openai('gpt-4o'),
messages,
});
return result.toDataStreamResponse();
}
// 3. 프론트엔드에서 사용
import { useChat } from 'ai/react';
function ChatComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>
{m.role}: {m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
<button type="submit">전송</button>
</form>
</div>
);
}
12. 자주 묻는 질문
에러 해결 총정리
🔴 자주 발생하는 에러와 해결법
1. "Module not found" 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 패키지가 설치되지 않음 │
│ │
│ 해결: │
│ npm install # 모든 패키지 재설치 │
│ npm install 패키지명 # 특정 패키지 설치 │
│ │
│ 그래도 안 되면: │
│ rm -rf node_modules # 폴더 삭제 │
│ rm package-lock.json # 락 파일 삭제 │
│ npm install # 재설치 │
└─────────────────────────────────────────────────────────────┘
2. "Port 3000 is already in use" 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 다른 프로그램이 3000번 포트 사용 중 │
│ │
│ 해결: │
│ # Mac/Linux │
│ lsof -i :3000 # 사용 중인 프로세스 찾기 │
│ kill -9 PID번호 # 프로세스 종료 │
│ │
│ # Windows │
│ netstat -ano | findstr :3000 # 사용 중인 프로세스 찾기 │
│ taskkill /PID 번호 /F # 프로세스 종료 │
│ │
│ # 또는 다른 포트 사용 │
│ npm run dev -- -p 3001 │
└─────────────────────────────────────────────────────────────┘
3. TypeScript 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 타입이 맞지 않음 │
│ │
│ 자주 보는 에러: │
│ "Type 'string' is not assignable to type 'number'" │
│ → 문자열을 숫자 자리에 넣으려 함 │
│ │
│ "Property 'xxx' does not exist on type 'yyy'" │
│ → 없는 속성에 접근하려 함 │
│ │
│ "Object is possibly 'undefined'" │
│ → 값이 없을 수 있음 (옵셔널 체이닝 사용) │
│ user?.name # user가 있을 때만 name 접근 │
│ user?.profile?.image # 중첩도 가능 │
└─────────────────────────────────────────────────────────────┘
4. CORS 에러
┌─────────────────────────────────────────────────────────────┐
│ "Access to fetch has been blocked by CORS policy" │
│ │
│ 원인: 다른 도메인의 API를 호출할 때 발생 │
│ │
│ 해결: │
│ 1. 백엔드에서 CORS 허용 설정 │
│ 2. API Route를 통해 호출 (Next.js) │
│ 3. 프록시 설정 │
└─────────────────────────────────────────────────────────────┘
5. 환경 변수 에러
┌─────────────────────────────────────────────────────────────┐
│ "NEXT_PUBLIC_XXX is undefined" │
│ │
│ 원인: │
│ - .env.local 파일이 없음 │
│ - 변수명이 다름 │
│ - 서버 재시작 필요 │
│ │
│ 해결: │
│ 1. .env.local 파일 확인 │
│ 2. NEXT_PUBLIC_ 접두사 확인 (프론트엔드용) │
│ 3. npm run dev 재시작 │
└─────────────────────────────────────────────────────────────┘
마무리
🎉 축하합니다! 이제 SaaS 개발의 기초를 이해했습니다.
배운 것들:
✅ 인터넷과 웹의 동작 원리
✅ SaaS 비즈니스 모델
✅ 프론트엔드, 백엔드, API 구조
✅ JavaScript/TypeScript 기초
✅ 터미널, Node.js, VS Code, Git 사용법
✅ Next.js 프로젝트 생성
✅ 데이터베이스, 로그인, 결제 이해
✅ AI 기능 추가
✅ 배포와 운영
다음 단계:
1. 직접 간단한 프로젝트 만들어보기
2. 공식 문서 읽어보기
3. 다른 사람 코드 분석해보기
4. 커뮤니티 참여하기
KreatSaaS가 도와드립니다!
/kreatsaas 명령어로 시작하세요.