심플 CRM 앱 - DB 연동

데이터의 영구 저장 - 프론트엔드와 백엔드의 만남

"파일로 저장하는 것은 한계가 있습니다. 진짜 데이터베이스에 데이터를 저장하고 관리해봅시다."

세션 개요

앞서 만든 심플 CRM 앱을 실제 데이터베이스(MySQL)와 연동합니다. 브라우저에서 입력한 데이터가 서버의 DB에 저장되고, 삭제하면 DB에서도 사라지는 완전한 기능을 구현합니다.

웹 서버와 데이터베이스의 관계 이해

라이브 서버의 DB 접속 정보 설정

고객 정보 입력(Insert) 및 삭제(Delete) 구현

실시간 데이터 동기화 확인

브라우저(프론트) -> 서버(백엔드) -> DB(데이터) 순서로 신호가 갑니다. 우리가 주문서(Form)를 넣으면 주방(서버)에서 재료(DB)를 꺼내거나 넣는 것과 같습니다.

백엔드 코드에 DB 정보 입력

PROMPT

`db_config.js` 파일을 만들고, 아까 받은 JSON 파일의 DB 접속 정보(Host, User, Password, DB Name)를 변수로 선언해줘.

데이터 추가 API 구현

PROMPT

고객 정보를 받아서 DB의 `customers` 테이블에 저장하는 API를 만들어줘. SQL의 INSERT 문을 사용해야 해.

데이터 삭제 인터페이스

PROMPT

리스트의 각 항목 옆에 "삭제" 버튼을 만들고, 클릭하면 해당 ID의 데이터를 DB에서 지우는 API를 호출해줘.

A.DB 비밀번호가 FTP 비밀번호와 다를 수 있습니다. 접속 정보를 다시 확인하세요. 또한, 외부에서 DB에 직접 접속하는 것은 보안상 막혀있을 수 있습니다.

Backend

Node.js/PHP (서버 언어)

Database

MySQL/MariaDB (데이터 저장소)

SQL

데이터 조작 언어 (Query)

다음 단계로 넘어가기

💡

SQL 문법을 깊게 다루기보다, "데이터가 어디에 어떻게 저장되는지" 흐름을 보여주는 데 집중하세요.