Day 213:30-14:20 (50분)
심플 CRM 앱 - DB 연동
데이터의 영구 저장 - 프론트엔드와 백엔드의 만남
Overview
앞서 만든 심플 CRM 앱을 실제 데이터베이스(MySQL)와 연동합니다. 브라우저에서 입력한 데이터가 서버의 DB에 저장되고, 삭제하면 DB에서도 사라지는 완전한 기능을 구현합니다.
학습 목표
웹 서버와 데이터베이스의 관계 이해
라이브 서버의 DB 접속 정보 설정
고객 정보 입력(Insert) 및 삭제(Delete) 구현
실시간 데이터 동기화 확인
사용 기술
Backend
Node.js/PHP (서버 언어)
Database
MySQL/MariaDB (데이터 저장소)
SQL
데이터 조작 언어 (Query)
Step-by-Step 가이드
STEP 1
🔌 DB 연결 설정
백엔드 코드에 DB 정보 입력
AI Prompt
`db_config.js` 파일을 만들고, 아까 받은 JSON 파일의 DB 접속 정보(Host, User, Password, DB Name)를 변수로 선언해줘.
STEP 2
📝 입력 기능 (Insert)
데이터 추가 API 구현
AI Prompt
고객 정보를 받아서 DB의 `customers` 테이블에 저장하는 API를 만들어줘. SQL의 INSERT 문을 사용해야 해.
STEP 3
🗑️ 삭제 기능 (Delete)
데이터 삭제 인터페이스
AI Prompt
리스트의 각 항목 옆에 "삭제" 버튼을 만들고, 클릭하면 해당 ID의 데이터를 DB에서 지우는 API를 호출해줘.
준비물
- Session 6 완료 (서버 접속 가능 상태)
- DB 접속 정보 (JSON) 확인
강사 노트 (Tip)
💡 팁
SQL 문법을 깊게 다루기보다, "데이터가 어디에 어떻게 저장되는지" 흐름을 보여주는 데 집중하세요.
Next Session
설문조사 앱 만들기
바로가기