← 커리큘럼 목록으로
🔌
13:30-14:30 (60분)

전화번호부 서버 연동

실시간 데이터 저장/불러오기 - 내 앱이 살아 움직인다

📋 세션 개요

오전에 만든 전화번호부를 서버와 연결하여 실시간으로 데이터를 저장하고 불러오는진짜 웹 애플리케이션으로 업그레이드합니다. 이 세션부터는 여러 사람이 함께 사용할 수 있는"진짜 서비스"를 만들게 됩니다.

⚠️ 실습 데이터 주의

서버 연동 실습이지만 반드시 가짜 데이터만 사용하세요. 실제 직원/학생 전화번호는 절대 입력하지 마세요!

🎯 학습 목표

•
클라이언트-서버 통신 이해: 프론트엔드와 백엔드가 어떻게 데이터를 주고받는지 이해합니다
•
CRUD 구현: Create(생성), Read(읽기), Update(수정), Delete(삭제) 기능을 만듭니다
•
API 연동: RESTful API를 사용하여 데이터를 주고받는 방법을 배웁니다
•
실시간 동기화: 여러 사용자가 동시에 접속해도 최신 데이터를 볼 수 있게 합니다

🛠️ 사용 기술

프론트엔드 (Frontend)

  • • HTML/CSS/JavaScript
  • • Fetch API (데이터 요청)
  • • JSON 형식 (데이터 교환)

백엔드 (Backend)

  • • Node.js + Express
  • • MariaDB 데이터베이스
  • • RESTful API

⚙️ 개발 환경 설정

실습을 시작하기 전에 필요한 개발 도구들을 설치해야 합니다.

📦Node.js 설치

Node.js는 JavaScript를 서버에서 실행할 수 있게 해주는 런타임 환경입니다. 백엔드 서버를 만들기 위해 필수적으로 필요합니다.

🪟 Windows:

  1. https://nodejs.org 접속
  2. LTS 버전 (Long Term Support) 다운로드 버튼 클릭
  3. 다운로드된 설치 파일(.msi) 실행
  4. 설치 마법사의 안내에 따라 "Next" 버튼 클릭
  5. 모든 옵션 기본값으로 설치 진행

🍎 macOS:

방법 1: 공식 설치 파일 사용

  1. https://nodejs.org 접속
  2. LTS 버전 다운로드 및 설치

방법 2: Homebrew 사용 (권장)

brew install node

🐧 Linux (Ubuntu/Debian):

# NodeSource 저장소 추가 (Node.js 20.x LTS)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# Node.js 설치
sudo apt-get install -y nodejs

# 설치 확인
node --version
npm --version

✅ 설치 확인:

터미널(Windows는 명령 프롬프트 또는 PowerShell)을 열어서 다음 명령어를 입력하세요:

node --version
npm --version

버전 번호가 표시되면 성공입니다! (예: v20.11.0, 10.2.4)

🐍Python 설치 (선택사항)

Python은 이번 실습에서는 사용하지 않지만, 향후 데이터 분석이나 AI 기능 추가 시 유용합니다.

🪟 Windows:

  1. https://www.python.org/downloads/ 접속
  2. "Download Python" 버튼 클릭 (3.11 이상 권장)
  3. 다운로드된 설치 파일 실행
  4. ⚠️ 중요: 설치 화면 하단의 "Add Python to PATH" 체크박스를 반드시 선택!
  5. "Install Now" 클릭

🍎 macOS:

macOS에는 Python이 기본 설치되어 있지만, 최신 버전 사용을 권장합니다.

Homebrew 사용 (권장):

brew install python@3.11

🐧 Linux (Ubuntu/Debian):

# Python 3.11 설치
sudo apt update
sudo apt install -y python3.11 python3-pip

# 설치 확인
python3 --version
pip3 --version

✅ 설치 확인:

python --version
# 또는
python3 --version

버전 번호가 표시되면 성공입니다! (예: Python 3.11.5)

🔐데이터베이스 계정 정보

실습 서버에 MariaDB가 이미 설치되어 있으며, 신청하신 계정별로 데이터베이스 접속 정보가 제공됩니다.

제공되는 정보:

  • • 데이터베이스 호스트 (Host)
  • • 데이터베이스명 (Database)
  • • 사용자명 (Username)
  • • 비밀번호 (Password)
  • • 포트 (Port)

👨‍💻 실습: 단계별 진행

1프로젝트 초기 설정 (10분)

📝 Cursor에게 요청:

전화번호부 웹 앱을 만들고 싶어요. 
프론트엔드와 백엔드를 모두 포함해서 만들어주세요.

기능:
1. 이름, 전화번호를 입력하여 저장
2. 저장된 연락처 목록 표시
3. 연락처 삭제 기능
4. 데이터는 서버의 MariaDB에 저장

기술 스택:
- 프론트엔드: HTML + vanilla JS
- 백엔드: Node.js + Express + MariaDB (mysql2 패키지 사용)
- 포트: 3000번

MariaDB 연결 정보:
- Host: [제공받은 호스트]
- Database: [제공받은 DB명]
- User: [제공받은 사용자명]
- Password: [제공받은 비밀번호]
- Port: [제공받은 포트]

프로젝트 구조:
/phonebook-server
  /public
    index.html (프론트엔드)
  server.js (백엔드)
  package.json

2백엔드 API 구현 (15분)

📝 Cursor에게 요청:

server.js에 다음 API 엔드포인트를 만들어주세요:

1. GET /api/contacts - 모든 연락처 조회
2. POST /api/contacts - 새 연락처 추가
3. DELETE /api/contacts/:id - 연락처 삭제

MariaDB 연결 후 contacts 테이블 생성:
CREATE TABLE IF NOT EXISTS contacts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  phone VARCHAR(20) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

에러 처리도 포함해주세요.

💡 확인 포인트:

  • ✅ MariaDB 연결이 정상적으로 이루어지는가?
  • ✅ 데이터베이스 테이블이 자동 생성되는가?
  • ✅ CORS 설정이 되어 있는가?
  • ✅ 에러 발생 시 적절한 메시지가 반환되는가?

3프론트엔드 구현 (20분)

📝 Cursor에게 요청:

public/index.html을 만들어주세요.

기능:
1. 이름과 전화번호 입력 폼
2. 저장 버튼 클릭 시 POST /api/contacts 호출
3. 페이지 로드 시 GET /api/contacts로 목록 가져오기
4. 각 연락처에 삭제 버튼
5. 깔끔한 UI (카드 형태)

fetch API를 사용하고,
async/await로 작성해주세요.

💡 핵심 코드 패턴:

// 연락처 목록 불러오기
async function loadContacts() {
  const response = await fetch('/api/contacts');
  const contacts = await response.json();
  displayContacts(contacts);
}

// 새 연락처 추가
async function addContact(name, phone) {
  await fetch('/api/contacts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, phone })
  });
  loadContacts(); // 목록 새로고침
}

4서버 실행 및 테스트 (10분)

📝 Cursor에게 요청:

package.json에 다음 스크립트를 추가해주세요:
"start": "node server.js"

그리고 서버 실행 방법을 알려주세요.

💡 터미널 명령어:

cd phonebook-server
npm install
npm start

✅ 테스트:

  • 1. 브라우저에서 http://localhost:3000 열기
  • 2. 가짜 연락처 추가해보기 (예: 홍길동, 010-1234-5678)
  • 3. 새로고침해도 데이터가 남아있는지 확인
  • 4. 삭제 버튼 동작 확인

5기능 개선 및 확장 (5분)

📝 Cursor에게 요청할 수 있는 추가 기능들:

  • ✨ 연락처 수정 기능 추가
  • 🔍 이름으로 검색 기능
  • 📊 연락처 개수 표시
  • 🎨 UI 개선 (색상, 레이아웃)
  • ⚠️ 입력 유효성 검사 (빈 값, 전화번호 형식)

✅ 완성 체크리스트

💡 핵심 포인트

🔄클라이언트-서버 분리: 프론트엔드(UI)와 백엔드(데이터)는 API로 통신합니다

📡RESTful API: HTTP 메서드(GET, POST, DELETE)로 데이터를 주고받습니다

💾영구 저장: 데이터베이스를 사용하면 서버를 껐다 켜도 데이터가 남습니다

⚡비동기 처리: async/await를 사용하여 서버 응답을 기다립니다

💼 업무 활용

📝 부서 연락망

부서 직원 비상연락망 관리 시스템

📚 도서 관리

부서 내 도서 대여 및 반납 관리

🎯 업무 요청

부서 간 업무 요청 및 진행 상황 추적

📊 자산 관리

부서 비품 및 장비 관리 시스템

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

🔸 포트가 이미 사용 중입니다

해결: "다른 포트(예: 3001)를 사용하도록 server.js를 수정해줘"

🔸 CORS 에러가 발생합니다

해결: "CORS 설정을 추가해줘 (cors 패키지 사용)"

🔸 데이터가 저장되지 않습니다

해결: "데이터베이스 파일 경로를 확인하고, 쓰기 권한이 있는지 체크해줘"

🔸 삭제가 동작하지 않습니다

해결: "DELETE 요청이 올바른 ID를 전달하는지 콘솔로 확인해줘"

🚀 도전 과제

⭐ Level 1: 연락처 수정 기능 추가하기

⭐⭐ Level 2: 이름으로 실시간 검색 기능 만들기

⭐⭐⭐ Level 3: 부서별 그룹 기능 추가하기

⭐⭐⭐⭐ Level 4: CSV 파일로 연락처 내보내기/가져오기

📢 다음 실습 예고

Session 7: 설문조사 앱 만들기

다양한 입력 타입(객관식, 주관식, 체크박스)과 실시간 결과 집계 기능을 가진 설문조사 시스템을 만들어봅니다.

💡 미리 생각해보기: 우리 부서에서 필요한 설문 주제는 무엇이 있을까요?

👨‍🏫 강사 노트

⏰ 시간 배분: 초기 설정 10분, 백엔드 15분, 프론트엔드 20분, 테스트 10분, 추가 기능 5분

🎯 핵심 개념: 클라이언트-서버 아키텍처, RESTful API, 비동기 통신

💬 참여 유도: "데이터가 저장되는 걸 보니 어떤가요?" 질문

⚠️ 주의사항: 포트 충돌, CORS 에러 미리 설명, 가짜 데이터 사용 강조

🔒 보안 언급: 실제 서비스는 인증, 암호화 등 추가 보안 필요

🎨 선택적 개선: 시간이 남으면 UI 개선, 검색 기능 추가