Vue.js + Express + MySQL로 Node API 서버 구성하기 Quick Start — Part 2
Express + MySQL로 DB 연동하기
Part1에서는 Vue.js와 Express로 프론트엔드와 백엔드 간의 통신 방법을 다뤄보았습니다.
이번 파트에서는 Vue.js를 제외하고, Express에 MySQL 연동하여 간단한 사용자 정보를 입력받을 수 있는 예제를 소개합니다.
Step1. MySQL Workbench 설치 및 실행
MySQL 서버를 구동하는 방법은 여러가지가 있겠지만, MySQL Workbench는 GUI로 되어 있어 비교적 쉽게 다룰 수 있다는 장점이 있습니다.
MySQL Workbench을 아래 경로에서 다운 받습니다.
https://dev.mysql.com/downloads/workbench/
설치를 하는 과정에서 Root 계정의 비밀번호를 받는데, 이때 입력한 비밀번호를 반드시 기억하도록 합니다.
설치가 완료된 Workbench를 실행하면 다음과 같은 화면을 확인할 수 있습니다. 설치 과정에서 세팅한 관리자 계정으로 MySQL 서버를 실행합니다.
Step2. DB 생성
디스크 모양의 버튼을 눌러 새로운 DB(Schema)를 생성합니다.
DB 이름과 Charset 을 입력합니다.
Apply 버튼을 누르면, DB 생성 쿼리(CREATE SCHEMA 'test_crud' DEFAULT CHARACTER SET utf8;)가 나오게 되는데, 그 밑에 다음과 같은 쿼리를 추가하여 사용자의 아이디, 이름, 주소를 저장하는 테이블을 하나 생성합니다.
CREATE TABLE test_crud.users (
userid VARCHAR(45) NOT NULL ,
name VARCHAR(45) NULL ,
address VARCHAR(45) NULL ,
PRIMARY KEY (userid) );왼쪽 Navigator에서 DB(test_crud) > Tables > 테이블(users)을 선택한 뒤, 테이블 모양의 아이콘을 누르면 SELECT * FROM test_crud.users; 라는 쿼리가 실행되면서, 테이블이 정상적으로 생성되었다는 것을 확인할 수 있습니다. 현재는 아무런 데이터가 없기 때문에 비어 보입니다.
Step3. 데이터를 입력받을 프론트 화면 마크업
public/index.html 파일을 하나 생성하고 데이터를 받을 수 있는 간단한 마크업을 추가합니다. submit을 누르면, 각 인풋에 선언된 name 값을 통해 데이터를 전송합니다.
<h1>사용자 정보를 입력하세요.</h1>
<form name="user" method="post" action="/regist">
<div class="input-row">
<label for="userid">아이디</label>
<input id="userid" name="userid" type="text">
</div>
<div class="input-row">
<label for="name">이름</label>
<input id="name" name="name" type="text">
</div>
<div class="input-row">
<label for="address">주소</label>
<input id="address" name="address" type="text">
</div>
<button type="submit">전송</button>
</form>여기에 약간의 스타일을 더해 다음과 같은 화면을 만들었습니다. npm start로 서버를 실행한 뒤, localhost:3000에서 확인합니다.
Step4. 백엔드 처리
npm install mysql --save 명령어로 mysql 패키지를 설치한 뒤, app.js에 다음 내용을 추가합니다. connection 객체는 설치한 DB 환경에 맞는 값으로 변경해줍니다.
var mysql = require('mysql');// Connection 객체 생성
var connection = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'root',
password: 'password',
database: 'test_crud'
}); // Connect
connection.connect(function (err) {
if (err) {
console.error('mysql connection error');
console.error(err);
throw err;
}
});
입력받은 값을 처리하는 구문은 다음과 같습니다.
// insert
app.post('/regist', function (req, res) {
var user = {
'userid': req.body.userid,
'name': req.body.name,
'address': req.body.address
};
var query = connection.query('insert into users set ?', user, function (err, result) {
if (err) {
console.error(err);
throw err;
}
res.status(200).send('success');
});
});npm start로 서버를 다시 실행하고, 데이터를 입력해봅니다. 모든 과정에 문제가 없다면, success라는 메시지를 확인할 수 있고, DB 테이블에 레코드가 하나 생긴 것을 확인할 수 있습니다.
입력에 성공했기 때문에 쿼리만 변경한다면 불러오는 것도 가능합니다.
Part3에서는 Vue.js와 Express, MySQL을 모두 활용해 간단한 회원가입/로그인 기능 구현 방법을 소개하겠습니다.
시리즈 정보
- Part1: Vue.js + Express로 프론트엔드와 백엔드 통신 이해하기
- Part2: Express + MySQL로 DB 연동하기
- Part3: Mix All — 로그인/회원가입 기능 개발하기
