리액트, MySQL로 아주 쉽게 게시판 만들기 - 2 [React, MySQL, express, axios]

리액트로 아주 쉽게 게시판 만들기 - 2 [React, MySQL, express, axios]

 

 

이전 글에서는 프론트에서만 보이는 게시판을 입력하는 데까지 진행하였습니다.

다만 새로고침을 하게되면 사라지게 되죠.

이번엔 db중 하나인 MySQL과 연동하여 새 로고 침해도 게시물을 유지해보겠습니다.

먼저 MySQL을 설치해줍니다!

다운로드 링크 : https://dev.mysql.com/downloads/windows/installer/8.0.html

.

위 링크를 들어가면 아래와 같은 창이 나옵니다. 빨간색으로 표시해놓은

용량 435.7M의 파일을 받고 설치해줍니다.

 

이 후 자세한 설치는 아래 블로그를 참고해주세요

https://m.blog.naver.com/bjh7007/221829548634

[MySQL] MySQL 다운로드 및 설치 방법(Workbench)

 

 

설치를 다하고 나면 MySQL Workbench를 실행해줍니다.

Workbench는 MySQL의 GUI툴입니다.

다양한 기능들이 시각화되어있기 때문에 좀 더 쉽게 접근할 수 있습니다.

새로운 db를 생성하기위해 빨간색 표시의 추가 버튼을 눌러줍니다.

시작화면

 

 

크게 기입할건 없고 

원하는 ConnectionName을 기입하고 (저는 easyboard로 생성하였습니다.)

Hostname을 localhost로 수정해준 뒤 Test Connection을 눌러

연결이 잘되는지 확인해준다! 아래와 같은 알림이 뜨면 OK를 눌러 생성해줍니다.

 

연결 확인

 

 

그리고 생성한 Connection를 클릭하면

 

이렇게 easyboard라는 MySQL 환경이 보여집니다.

 

뭐가 뭘까..

 

이제 저희가 사용할 스키마와 테이블을 생성해야 합니다.

스키마란 테이블에 들어가는 data들의 이름이라고 생각하시면 편합니다.

창 왼쪽 하단에 Schemas를 들어가서 우클릭을 해주면 Create Schema... 가 있습니다.

 

스키마를 생성하자

 

그러면 스키마의 이름과 Charset/Collation을 세팅해달라고 합니다.

아래와 같이 세팅합니다.

이름은 마음대로..

 

우리가 위에서 했던 행동을 SQL Script로 해석하여 한번 더 보여줍니다.

바로 Apply 합시다.

일단 알겠다!

 

그리고 왼쪽에 보면 우리가 방금 생성한 스키마가 보입니다.

왼쪽 화살표를 눌러 펼쳐주면 4가지 항목이 보이는데요.

그중 첫 번째인 Tables를 우클릭하고, Create Table... 을 클릭하여 테이블을 생성합니다.

테이블 생성 과정

 

 

세팅은 아래 사진과 같이 해줍니다.

왜 저렇게 하는지는 여기서 따로 안내하지 않겠습니다.

딱 하나, 콜럼의 idx에 AI를 체크하는 이유는 AUTO_INCREMENT라고 하여

값이 콜럼에 갯수에 따라 자동으로 1씩 증가하는 기능이라 생각하시면 됩니다.

나중에 idx를 프론트에 출력하여 게시물 번호로 만들 것입니다. 

나머지 콜럼은 이름만 봐도 어떤 값이 들어갈지 감이 오시죠?

 

Apply를 누르고, MySQL Script를 또 한 번 보여준 뒤 생성이 완료됩니다.

다시 왼쪽에 Tables를 보면 화살표가 생겼습니다. 펼치면 저희가 생성한 테이블을 볼 수 있습니다.

 

이제 테이블까지 준비 완료

 

이제 테이블을 완성하였으니, 데이터를 전송해줄 서버 생성을 하겠습니다.

easyboard안에 server 폴더와 client 폴더를 생성해줍니다.

기존에 있던 easyboard 안 파일들을 모두 client에 넣어주고

server폴더에는 server.js를 생성해줍니다.

 

그리고 터미널 경로를 server폴더로 이동하여 (cd라는 명령어를 이용합니다 ex) cd server)

필요한 모듈을 설치하고, import 해줍니다.(nodemon제외) 각각의 용도는 사용하면서 설명하겠습니다.

설치할 모듈들 - 

• yarn add express  
• yarn add cors
• yarn add mysql
• yarn add nodemon

 

그 후 코드를 몇 줄 더 적고, 터미널에 noed server.js를 실행해봅시다!

서버가 정상적으로 열렸다.

 

 

이때 server.js에서 새로 작성한 코드들은 서버를 껐다켜줘야 적용이 되는데요.

이러면 코드를 변경할 때마다 node server.js를 반복해서 실행해줘야 하는 번거로움이 생깁니다.

이런 번거로움을 덜어주는 모듈이 nodemon입니다.

 

사용법은 server 폴더의 package.json를 열어줍니다.

대략 아래 사진과 비슷하게 구성이 되어있을 텐데요.

여기서 8번째 줄 scripts안에 새로운 코드를 적어줍니다.

"dev": "nodemon server.js"

 

다시 서버를 실행해주는데 node server.js가 아닌 yarn run dev로 실행해줍니다.

이제 server.js가 변경될 때마다 파일 저장만 해도 바로 적용됩니다.

 

 

이어서 MySQL을 연동해줍니다.

password에는 MySQL 가입 시 만든 비밀번호를 넣어주면 됩니다.

MySQL도 연결되었다.

 

 

그리고 데이터를 쏴줄 api를 미리 생성해줍니다.

api에서 받아올 게시물의 변수를 만들어주고,

sqlQuery 변수에는 MySQL Script를 스트링으로 할당해놓습니다.

VALUES는 각 콤마(,)로 구분하고?로 기입해놓으면 query문으로 값을 할당시킬 수 있습니다.

server.js

 

이제 /api/insert로 데이터를 쏴주기만 하면, 서버에서 알아서 db로 전송해줄 것입니다.

현재까지 server.js의 코드는 아래와 같습니다.

 

const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
const app = express();
const PORT = 8000;

const db = mysql.createConnection({ 
    host: "localhost",
    prot:'3306',
    user:"root",
    password:"비밀번호",
    database:"easyboard"
});

db.connect(err => { if (err) console.log("MySQL 연결 실패 : ", err); console.log("MySQL가 연결되었습니다!"); }) // 오류해결 https://www.inflearn.com/questions/3637

// insert에 들어온 data를 쿼리에 전송하는 것 
app.post("/api/insert", (req,res) => {
    const title = req.body.title;
    const content = req.body.content;
    const date = req.body.date
    const sqlQuery = "INSERT INTO easyboard (title, content, date) VALUES (?,?,?)";
    db.query(sqlQuery, [title, content, date], (err, result) => {
        res.send('succ');
    })
})

app.listen(PORT, ()=>{
    console.log(`포트 ${PORT}번으로 서버를 열었습니다.`);
});

 

이제 다시 리액트의 App.js로 돌아와 api통신을 도와줄 axios를 설치해줍니다.

(상위 경로로 돌아갈 때는 터미널에 cd.. 을 실행합니다.)

client 경로에서 yarn add axios를 실행해줍니다!

42초나 걸렸다.

그리고 App.js에 import 시켜줍니다.

App.js

 

전에 등록버튼에 할당한 submit 함수를 

Axios를 통해 /api/insert로 데이터를 전송해주는 함수로 교체해줍니다.

리액트는 실행 시 기본적으로 포트번호가 3000이라서 Axios 경로에 '/api/insert'만 적을 시 작동이 안 됩니다.

우리가 만든 서버의 포트는 8000이기 때문에 정확히 기입해줍니다.

경로 확인!

api에는 date까지 받도록 코드를 짜 놨습니다. 그거에 맞춰

간단하게 날짜도 만들어 전송해줍니다. 

날짜도 전송해준다.

이제 웹으로 들어가서 게시물을 등록해보고

db에 잘 들어가는지 확인해봅시다!

...

안되시는 게 정상입니다.

간단히 말하자면 서로 주소가 다른데 데이터를 주고받으려니

그것을 알아서 막아주는 것입니다.

이제 server.js에서 설치한 cors를 사용해줍니다.

 

그냥 추가만 해주면 끝입니다.

 

다시 한번 게시물을 등록해봅시다!

몇 초 뒤에 콘솔 창을 확인해보면 짜잔 오류가 나타납니다.

또 오류

 

왜 한 번에 안 하는지 이해 못 하실 수도 있지만

코드가 어떤 역할을 하는지 궁금할 수도 있기 때문에

에러가 뜰 때에 맞춰 기입하였습니다.

 

아래에 코드 한줄 더 추가

이제 정말 완료됐습니다.

게시물 등록을 해봅시다.

등록을 눌러도 알림 창 같은 건 설정해놓지 않았기 때문에

아무 반응이 없습니다. 그렇지만 MySQL로 가서 새로고침을 해봅시다.

아까 기입한 input의 내용과 submit 버튼을 누른 순간의 날짜와 시간이 저장되었습니다.

 

다음 글에서는 db를 다시 서버를 통해 프론트에 출력하도록 하겠습니다.