[react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ③ 서버 구축 연동하기

2020/10/30 - [프로그래밍/react] - [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스

2020/10/30 - [프로그래밍/react] - [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ② 입력 기능 구현

 

 

위 두 포스팅을 먼저 보고 오는 것을 추천한다.

 

 

완성된 프로젝트 소스코드

 

github.com/esyeon88/simple-react-board

esyeon88/simple-react-board

 

소스코드 다운받아서 해보기

 

2020/10/31 - [프로그래밍/backend] - [github] 프로젝트 소스코드 다운받아서 사용하기

[github] 프로젝트 소스코드 다운받아서 사용하기

 

 

<사이트 예시>

 

사이트 예시

 

 

 

 

---

 

 

 

이번 포스팅의 내용은 이전에 만들었던 게시판에 db를 연동해서 게시글의 내용이 서버에 저장되고 게시판을 껐다가 다시 켜도 내용이 이어서 보여지는 것을 해 보려고 한다.

 

node의 express를 이용 할 것이고 db는 mysql 을 이용할 것이다.

 

이번 예제를 진행하려면 mysql db가 준비되어 있어야 한다. 없다면 준비를 해 보고 mongo db 같은 것을 사용해도 좋다.

 

먼저 지난번에 만들어 둔 게시판의 간략한 모습이다.

 

사이트 예시

 

 

 

서버 환경 구축하기

 

위 게시판에서 작성한 내용을 서버로 보내고 db에 저장한뒤 서버에서 불러오는 과정을 진행해보려고 한다.

 

먼저 작업폴더로 들어가서 client라는 폴더를 만들고 안에 있는 내용을 모두 client 폴더 안으로 이동시킨다.

 

그리고 server 라는 폴더를 만들고 우리는 여기에 서버를 만들 것이다.

 

서버 폴더 만들기

 

 

 

 

server 폴더 안으로 들어가서 다음 명령어를 쳐준다.

npm init 으로 해도 된다.

 

$ yarn init

 

 

그리고나서 엔터를 몇번 쳐주면 진행이 완료되고 package.json 이라는 파일 하나가 생성이된다.

 

서버 만들기

 

 

그리고 몇가지 의존성 모듈(dependency)을 설치해줄 것인데 다음과 같이 입력한다.

npm install 을 사용해도 된다.

 

$ yarn add express body-parser mysql

 

 

그럼 package.json에 다음과 같이 추가된 것을 확인할 수 있다.

 

디펜던시 확인

 

 

추가적으로 nodemon 이라는 것도 설치해준다.

노드몬은 서버 코드가 수정되면 서버를 다시 켜주는 모듈이다. 작업할때 편리성을 준다.

 

$ yarn add nodemon

 

 

그리고나서 express 서버를 작성한다.

다음과 같이 코드를 작성하면 된다.

환경변수에 미리 저장이 되어 있으면 그 포트로 열고 아니면 8000번 포트로 express 서버를 오픈한다는 의미이다.

 

<index.js>

 

const express = require('express');
const app = express();
const PORT = process.env.port || 8000;

app.listen(PORT, ()=>{
    console.log(`running on port ${PORT}`);
});

 

 

 

터미널에 다음과 같이 입력해본다.

 

$ node index.js

 

 

 

node 로 서버 실행

 

 

그러면 터미널에 저렇게 콘솔이 뜨는 것을 확인할 수 있다.

 

노드몬을 통해 서버에 접속할 수 있는 환경을 만들어보자.

 

다음과 같이 package.json의 내용을 추가한 후 터미널에 yarn run dev를 입력해본다.

 

이제 노드몬으로 서버를 돌리게 되었다.

 

노드몬 서버 돌리기

 

 

이렇게 세팅을 하고나면 기본적으로 서버와 통신을 할 수 있는 구조는 완성이 되었다.

 

이제 db를 생성해보자.

 

예제는 CLI(명령어 입력방식) 를 통해 db작업을 할 것이다. 어렵다고 느끼는 사람은 GUI 툴을 이용해서 만들면 된다.

 

먼저 mysql에 접속해준다.

 

db를 하나 생성했다.

$ CREATE DATABASE simpleboard;

 

그리고 테이블을 하나 만든다.

mysql에 대한 자세한 내용은 생략한다. 간략히 말하면 title, content 내용을 테이블에 저장할 것이고 숫자는 자동으로 붙어서 1부터 올라가는 형식의 테이블이다.

 

아래 테이블에 게시판에 입력된 내용을 저장할 것이다.

 

데이터베이스 테이블 만들기

 

 

그리고 코드를 다음과 같이 수정해본다. db정보는 본인의 db정보를 넣으면 된다. 우선 아무 내용이나 db 에 입력하고 잘 들어가는지 테스트 해본다.

 

<index.js>

 

const express = require('express');
const app = express();
const mysql = require('mysql');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "123",
    database: "simpleboard"
});

app.get("/", (req, res)=>{
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES ('인셉션', '좋은 영화!')";
    db.query(sqlQuery, (err, result)=>{
        res.send('success!');
    });
})

app.listen(PORT, ()=>{
    console.log(`running on port ${PORT}`);
});

 

 

그런 다음 우리는 port 8000으로 접속했기때문에 다음 주소로 들어가서 서버가 잘 동작하는지 확인을 해보자.

 

http://localhost:8000

 

그러면 아래와 같이 success! 가 나타나는 것을 볼 수 있다. 

 

 

db에 내용이 잘 들어갔는지도 확인해보자. 다음 명령어를 치면 내용이 db에 잘 전달된 것을 확인할 수 있다.

 

$ SELECT * FROM simpleboard;

 

게시판과 db 연동

 

 

그럼 이제 게시판에서 입력한 내용을 db에 저장하는 작업을 해 본다.

 

 

 

 

 

 

게시판에 입력된 내용을 DB에 저장하기

 

이제 다시 게시판 코드로 이동한다.

 

클라이언트쪽의 내용을 서버로 전송할때 사용하는 모듈을 설치해준다.

 

client 폴더로 들어가서 다음 명령어를 입력하여 모듈을 설치한다.

 

$ yarn add axios

 

 

그리고 app.js 파일에 모듈을 다음과 같이 임포트 해 주고 버튼을 눌렀을 때 서버로 내용을 전송하는 함수를 만들어준다.

Axios 를 이용해 title, content 데이터를 post 방식으로 보내고 완료되면 alert 창을 띄워주는 코드이다.

아래 /api/insert 는 우리가 localhost:8000/api/insert/ 로 내용을 전송한다는 뜻이다.

 

const submitReview = ()=>{
    Axios.post('/api/insert', {
      title: movieContent.title,
      content: movieContent.title
    }).then(()=>{
      alert('등록 완료!');
    })
  };

 

axios 이용

 

 

 

그리고 등록버튼 onClick 안의 내용을 삭제하고 다음과 같이 변경해준다.

 

submit 버튼

 

 

다시 서버폴더의 index.js 파일로 간다.

 

코드를 아래와 같이 수정해준다.

/api/insert 로 받아온 정보를 서버쪽에서 다음과 같이 db에 저장하는 내용이다. body-parser 모듈을 사용했다.

? 로 변수를 넣을 수 있다.

 

<index.js>

 

const express = require('express');
const app = express();
const mysql = require('mysql');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "123",
    database: "simpleboard"
});

app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post("/api/insert", (req, res) => {
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
        res.send('success!');
    });
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

 

 

게시판에 입력을 해 본다.

입력을 하면 다음과 같이 에러가 나게 된다. 에러가 나는 이유는 Axios로 내용을 전송할 때 /api/insert 로 전송을 했는데 그냥 이와같이 적으면 localhost:3000/api/insert 로 전송을 하겠다는 뜻이 된다.

 

우리는 localhost:8000/api/insert 로 내용을 전송을 해야한다.

 

 

서버 내용 전송 오류

 

 

 

 

app.js 코드를 살짝 수정해준다. 주소부분을 /api/insert 에서 http://localhost:8000/api/insert 로 수정해준다.

 

코드 수정

 

 

 

그리고 게시판에서 다시 입력을 해보면 다음과 같이 cors 에러가 발생한다.

자세한 설명은 생략하고 이 문제를 해결하기 위해 서버쪽에 모듈을 하나 설치해준다.

 

CORS policy

 

 

$ yarn add cors

 

 

그리고 index.js 파일에 다음 내용을 추가해준다.

 

cors 설치

 

 

그리고 다시한번 게시판에서 전송을 해 본다.

 

게시판 내용 입력

 

 

 

 

그럼 db에 다음과 같이 성공적으로 입력이 된 모습을 볼 수 있다.

 

db에 내용 전달

 

 

 

db에서 리스트를 가져와서 게시판에 보여주기

 

 

이렇게 입력하는 것까지 해 봤고 이제 데이터베이스에서 내용을 가져와서 게시판에 보여주는 것을 해 본다.

 

서버쪽부터 작업을 한다.

 

<index.js>

 

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "123",
    database: "simpleboard"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
    const sqlQuery = "SELECT * FROM simpleboard;";
    db.query(sqlQuery, (err, result)=>{
        res.send(result);
    })
})

app.post("/api/insert", (req, res) => {
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
        res.send('success!');
    });
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

 

/api/get 주소에 db에서 내용을 가지고 오는 코드를 추가했다.

이제 게시판쪽 코드에서 내용을 요청해서 받아오는 부분을 추가하면 된다.

 

다음과 같은 내용을 추가한다.

 

useEffect 훅을 사용하는데 2번째 인자에 [] 빈 배열을 넣어주면 이 코드를 처음 1회만 실행한다는 의미이다.

아까 서버쪽에 작성한 코드로 요청을 보내고 그에 대한 응답을 콘솔로 찍으면 아래 사진처럼 data에 내용을 받아오는 것을 확인할 수 있다.

 

<client/app.js>

 

client 손보기

 

서버에서 내용 가져오기

 

 

 

이제 이렇게 받아온 데이터를 아까전에 만들어놓은 빈 배열 state인 viewContent 에 담아줄 것이다.

response.data 를 viewCount 에 업데이트 해주고 나면 아래와 같이 db의 내용이 화면에 잘 출력되는 것을 볼 수 있다!

 

axios 로 응답 불러오기

 

 

게시판에 내용 보여주기

 

 

이제 내용을 입력하고 다음과 같이 등록을 누르면 등록완료 창이 뜨면서 등록이 된다.

 

게시판 내용 입력

 

 

 

새로고침을 하고나면 성공적으로 등록이 완료 된 모습

 

게시판 목록

 

 

근데 여기서 새로고침을 하지 않으면 등록된 모습을 확인할 수 없다. 그 이유는 useEffect 함수의 두번째 인자로 빈 배열을 주면 처음 사이트에 들어갔을 1회만 렌더링이 되기 때문에 다시 값을 불러오지 않는다.

 

그래서 다음과 같이 수정해 주면 등록이 완료될 때 게시판이 업데이트 되는 모습을 확인할 수 있다.

 

useEffect 렌더링

 

 

이것으로 모든 게시판의 내용이 완성 되었다.

 

추후에 기회가 된다면 게시물 삭제, 수정 기능도 올려보겠다.

그리고 지금 현재 에디터에 사진 올리는 기능이 포함되어 있지만 그 부분도 따로 기능 구현을 해 줘야 한다.

 

그부분도 이후에 추가적으로 포스팅해보도록 하겠다.