🌐

13:00-13:30 (30분)

웹서비스 구조 이해

서버·DB·실시간 연결 개념 쉽게 보기

🎯 학습 목표

✓클라이언트-서버 구조의 기본 개념 이해
✓프론트엔드(Next.js)와 백엔드(NestJS)의 역할 구분
✓데이터베이스(MariaDB)의 필요성과 동작 원리
✓오전(HTML 파일)과 오후(웹 서비스)의 차이점 명확히 알기

🔄 오전 vs 오후: 무엇이 달라지나?

🌅

오전: 혼자 쓰는 앱

📄 구조

HTML 파일 하나
브라우저에서 직접 실행

💾 데이터 저장

localStorage
(내 컴퓨터 브라우저에만)

👤 사용자

나 혼자 or 파일 공유

💰 비용

무료 (서버 불필요)

✅ 장점

간단, 빠름, 비용 없음

❌ 한계

공유 어려움, 동시 사용 불가

🌇

오후: 함께 쓰는 플랫폼

🌐 구조

프론트엔드 + 백엔드 + DB
서버에서 실행

💾 데이터 저장

MariaDB 데이터베이스
(서버에 영구 저장)

👥 사용자

누구나 URL로 접속
동시 사용 가능

💰 비용

월 1-5만원 (호스팅)

✅ 장점

공유 쉬움, 실시간 동기화

❌ 한계

복잡함, 호스팅 비용

🏗️ 웹 서비스의 3단 구조

레스토랑에 비유하면?

웹 서비스 구조를 식당에 비유해봅시다

🍽️

프론트엔드 (Front-end)

= 홀/테이블 (손님이 보고 만지는 곳)

🔧 기술: Next.js (React 프레임워크)

사용자가 보는 화면, 버튼, 폼, 디자인 등 모든 UI를 담당합니다.

역할

• 화면 표시
• 사용자 입력 받기
• 버튼 클릭 처리

비유

메뉴판, 테이블, 종업원

💡 Cursor 프롬프트 예: "파란색 버튼을 만들어줘. 클릭하면 이름을 입력받는 폼이 나오게 해줘"

👨‍🍳

백엔드 (Back-end)

= 주방 (요리하고 준비하는 곳)

🔧 기술: NestJS (Node.js 프레임워크)

비즈니스 로직, 데이터 처리, 인증, API 등 모든 핵심 기능을 담당합니다.

역할

• 데이터 처리
• 로그인 확인
• API 제공
• DB와 통신

비유

주방장, 조리대, 레시피

💡 Cursor 프롬프트 예: "사용자가 이름을 입력하면 데이터베이스에 저장하고, 중복 체크도 해줘"

🗄️

데이터베이스 (Database)

= 창고/냉장고 (재료 보관하는 곳)

🔧 기술: MariaDB (MySQL 호환)

모든 데이터를 안전하게 영구 저장하고, 빠르게 검색할 수 있게 해줍니다.

역할

• 데이터 영구 저장
• 빠른 검색
• 데이터 무결성

비유

냉장고, 창고, 재고 목록

💡 Cursor 프롬프트 예: "users 테이블을 만들어줘. name, email, phone 컬럼이 필요해"

🔄 데이터 흐름 (사용자가 "로그인" 버튼을 클릭하면?)

1️⃣ 프론트엔드
이메일/비밀번호 받음

→

2️⃣ 백엔드
DB에 확인 요청

↓

3️⃣ 데이터베이스
사용자 정보 검색

→

4️⃣ 백엔드
일치 여부 판단

↓

5️⃣ 프론트엔드
"로그인 성공!" 또는 "비밀번호가 틀렸습니다" 표시

🔌 API: 프론트와 백엔드를 연결하는 다리

API (Application Programming Interface)란?

레스토랑의 메뉴판이라고 생각하면 됩니다. 손님(프론트엔드)이 주방(백엔드)에 주문하는 방법을 정해놓은 것입니다.

📤 요청 (Request)

POST /api/login
{
  "email": "user@church.com",
  "password": "1234"
}

"로그인해주세요" 요청

📥 응답 (Response)

{
  "success": true,
  "user": {
    "name": "김목사",
    "role": "admin"
  }
}

"로그인 성공!" 응답

💡 Cursor와 API

"사용자 목록을 가져오는 API를 만들어줘" 라고 요청하면, Cursor가 프론트엔드의 fetch 코드와 백엔드의 API 엔드포인트를 자동으로 생성해줍니다!

⚡ 실시간 통신: Socket.IO

일반 HTTP vs WebSocket (Socket.IO)

❌ 일반 HTTP

📞 전화 한 번 끊고 다시 걸기

• 클라이언트가 요청해야 응답
• 서버가 먼저 알려줄 수 없음
• 새로고침해야 업데이트 확인

✅ WebSocket

📞 전화 계속 연결된 상태

• 양방향 실시간 통신
• 서버가 먼저 알림 가능
• 즉시 화면 업데이트

🎯 실시간이 필요한 경우

• 채팅 앱: 상대방 메시지 즉시 표시
• 퀴즈 대회: 누군가 답을 맞히면 전체 점수판 업데이트
• 타자 게임: 다른 참가자의 진행 상황 실시간 확인
• 공동 편집: 구글 문서처럼 여러 명이 동시 작업

🛠️ 오후에 사용할 기술 스택

⚛️

Next.js (프론트엔드)

React 기반의 풀스택 프레임워크

장점

빠른 개발, SEO 최적화, 파일 기반 라우팅

Cursor 프롬프트

"Next.js 앱 페이지 라우터로 만들어줘"

🐱

NestJS (백엔드)

TypeScript 기반의 서버 프레임워크

장점

구조화된 아키텍처, TypeScript 지원

Cursor 프롬프트

"NestJS로 users API CRUD 만들어줘"

🐬

MariaDB (데이터베이스)

MySQL 호환 오픈소스 RDBMS

장점

빠름, 안정적, 무료, MySQL 호환

Cursor 프롬프트

"Prisma로 MariaDB 연결 설정해줘"

⚡

Socket.IO (실시간 통신)

WebSocket 기반 실시간 라이브러리

장점

사용 쉬움, 자동 재연결, 룸 기능

Cursor 프롬프트

"Socket.IO로 채팅 기능 구현해줘"

🤖 Cursor로 풀스택 앱 개발하기

프롬프팅 순서

1️⃣ 데이터베이스 스키마 정의

"Prisma 스키마에 Quiz 모델을 만들어줘. question(문자열), options(JSON 배열), answer(숫자) 필드가 필요해"

2️⃣ 백엔드 API 생성

"NestJS로 Quiz CRUD API를 만들어줘. GET(전체조회), POST(생성), PATCH(수정), DELETE(삭제)"

3️⃣ 프론트엔드 화면 구성

"Next.js로 퀴즈 목록을 보여주는 페이지를 만들어줘. API에서 데이터를 가져와서 테이블로 표시해줘"

4️⃣ API 연결

"프론트엔드에서 백엔드 API를 호출하는 axios 클라이언트를 만들어줘"

5️⃣ 실시간 기능 추가

"Socket.IO로 퀴즈 방을 만들고, 참가자가 답을 제출하면 실시간으로 전체에게 알려줘"

💡 핵심 포인트

Cursor는 전체 프로젝트 구조를 이해합니다!
"프론트에서 백엔드 API를 호출해줘" 라고 하면, 알아서 fetch 코드를 작성하고 API 엔드포인트를 찾아 연결해줍니다.

🚀 다음 세션: 실전 적용!

🏆 성경 타자경기 앱 업그레이드

지금까지 배운 개념을 실제로 적용합니다!
오전에 만든 타자연습기를 실시간 멀티플레이어 게임으로 발전시켜봅니다.

✨ 새로운 기능

• QR 코드로 입장
• 실시간 순위표
• 동시 진행

🔧 사용 기술

• Socket.IO
• MariaDB
• Next.js + NestJS

👨‍🏫 강사 노트

⏰ 시간 배분: 이론 15분, 비유 설명 10분, 질문답변 5분

🎯 핵심 메시지: "복잡해 보이지만 Cursor가 다 해줍니다. 여러분은 한국어로 말만 하세요!"

📊 시각 자료: 화이트보드에 프론트-백-DB 다이어그램 그리며 설명

🍽️ 레스토랑 비유: 참가자들이 가장 이해하기 쉬워하는 비유. 반복 강조

💬 참여 유도: "여러분이 자주 쓰는 웹사이트는?" 질문 후 구조 분석해보기

⚠️ 주의: 너무 기술적으로 깊게 들어가지 말 것. 개념만 이해하면 충분

🔄 전환: "이제 직접 만들어봅시다!" 분위기 전환