개요

간단한 CRUD (create, read, update, delete) 앱을 데이터베이스는 mysql, 프런트 엔드는 React + Redux로 만들어 보겠습니다.
이 Part1에서는 mysql을 설정하고 node.js에서 API 서버를 만들 때까지 수행합니다.

mysql 설치, 연결

먼저 mysql을 설치하십시오.

$ brew update
$ brew install mysql

설치가 끝나면 내용을 살펴 보겠습니다.

$ brew info mysql

그런 다음 데이터베이스를 시작합니다. 시작은 mysql.server start (중지는 mysql.server stop)

$ mysql.server start
Starting MySQL
. SUCCESS! 

암호를 설정하십시오.

$ mysql_secure_installation

듣는 것은 기본적으로 예로 대답합니다. 암호를 기억합시다.
설정이 끝나면 연결하십시오.

$ mysql -uroot -p
Enter password:[設定したパスワード]

연결은 exit에서 빠져 나올 수 있습니다.

mysql에서 DB, 테이블 만들기

mysql에 연결된 상태에서 먼저 DB를 만듭니다.

mysql> CREATE DATABASE sample;

DB 작성 결과를 확인하십시오.

mysql> show databases;

작성한 DB를 사용 가능하게하십시오.

mysql> use sample;

그런 다음 테이블을 만듭니다.
id 열에 auto_increment를 설정하십시오.
이름과 상태는 not null로 설정됩니다.
이름은 unique입니다.

mysql> create table user (id int auto_increment not null primary key, name varchar(10) not null unique, status varchar(10) not null);

테이블 작성 결과를 확인하십시오.

mysql> show tables;
+------------------+
| Tables_in_sample |
+------------------+
| user             |
+------------------+
1 row in set (0.01 sec)

테이블 정의 확인

mysql> desc user;
+--------+-------------+------+-----+---------+----------------+
| Field  | Type        | Null | Key | Default | Extra          |
+--------+-------------+------+-----+---------+----------------+
| id     | int(11)     | NO   | PRI | NULL    | auto_increment |
| name   | varchar(10) | NO   | UNI | NULL    |                |
| status | varchar(10) | NO   |     | NULL    |                |
+--------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

사용자를 만듭니다.
노드는 사용자이고 localhost는 호스트입니다.
나중에 암호를 사용하기 때문에 기억하십시오.

mysql> create user 'node'@'localhost' identified with mysql_native_password by 'パスワード';

사용자 생성 결과를 확인하십시오.

mysql> SHOW GRANTS for 'node'@'localhost';

참조 가능한 테이블을 지정합니다.

mysql> GRANT ALL ON sample.* to node@localhost;

권한 부여 결과를 확인하십시오.

mysql> SHOW GRANTS for 'node'@'localhost';

시험에 샘플 데이터를 작성해보십시오.

mysql> insert into user(name, status) values('Katsuomi', 'student');

확인해보십시오.

mysql> select * from staff;
+----+----------+---------+
| id | name     | status  |
+----+----------+---------+
|  1 | Katsuomi | student |
+----+----------+---------+
1 row in set (0.01 sec)

벌써 1명 만들어 보겠습니다

mysql> insert into user(name, status) values('Junki', 'student');

확인하십시오.

mysql> select * from user;
+----+----------+---------+
| id | name     | status  |
+----+----------+---------+
|  1 | Katsuomi | student |
|  2 | Junki    | student |
+----+----------+---------+
2 rows in set (0.00 sec)

안전하게 ID가 auto_increment되어 있는지 확인했습니다.

API 서버 만들기

적절하게 디렉토리를 만들고 server.js를 만들고 거기에 씁니다.

$ mkdir crud-node & cd crud-node
$ npm init -y
$ npm i mysql express body-parser

server.js

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors')({origin: true});
const app = express();
app.use(bodyParser.json());
app.use(cors);

const client = mysql.createConnection({
    host: 'localhost',
    user: 'node',
    password: 'HashSignBack1484?_!',
    port : 3306,
    database: 'sample'
});

client.connect(function (err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log('connected as id ' + client.threadId);
});

// read 
app.get('/user', (req, res) => {
    client.query('SELECT * from user;', (err, rows, fields) => {
        if (err) throw err;

        res.send(rows);
    });
});

// create 
app.post('/user/create', (req, res) => {
    const name = req.body.name;
    const status = req.body.status;
    client.query('INSERT INTO user SET ?', {name: name, status: status}, (err, result) => {
        if (err) throw err;
        res.send(result);
    })
});

// update 
app.put('/user/update', (req, res) => {
    const id = req.body.id;
    const status = req.body.status;
    client.query('UPDATE user SET status = ? WHERE id = ?', [status, id], (err, result) => {
        if (err) throw err;
        client.query('SELECT * from user;', (err, rows, fields) => {
            if (err) throw err;
            res.send(rows);
        });
    })
});

// delete 
app.delete('/user/delete', (req, res) => {
    const id = req.body.id;
    client.query(`DELETE FROM user WHERE id = ?`, [id], (err, result) => {
        if (err) throw err;
        client.query('SELECT * from user;', (err, rows, fields) => {
            if (err) throw err;
            res.send(rows);
        });
    });
});

app.listen(3001, () => console.log('Listening on port 3001!'))

이제 curl로 테스트 해 봅시다.

만들기

$ curl -X POST -H "Content-Type:application/json" http://localhost:3001/user/create  -d '{"name":"taro", "status": "adult"}'

업데이트

$ curl -X PUT -H "Content-Type:application/json" http://localhost:3001/user/update  -d '{"name":"taro", "status": "student"}'

브라우징

curl http://localhost:3001/user

삭제

$ curl -X DELETE -H "Content-Type:application/json" http://localhost:3001/user/delete  -d '{"id":1}'

마지막으로

Part2에서는 React + Redux로 프런트 엔드를 만듭니다.
Part2는 여기

Happy Hacking!