install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/beginner-guide" ~/.claude/skills/diegosouzapw-awesome-omni-skill-beginner-guide && rm -rf "$T"
manifest:
skills/design/beginner-guide/SKILL.mdsource content
완전 초보자를 위한 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 명령어로 시작하세요.