『Server 09 』[React] [Express] 버튼을 눌러 DB에 저장

📖 개요

이번 포스팅에서는 버튼을 눌러 DB에 저장하는 방법을 알아볼 예정이다.

 

완성된 화면 보기 👉 React

 

 

📁 프로젝트 설명

우선 프로젝트를 간략히 설명하면,

server_react 폴더에 React 코드와 server 폴더에 node.js 코드를 구현했다. (이 포스팅에서는 SERVER만 다룰 예정이다.)

React를 이용해 프론트를 구성하고, node.js를 통해 DB와 통신할 예정이다.

 

📁 폴더 구조

Server_react

웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다.

 

_Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지

_Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다.

_Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할)

_Post : DB에서 데이터 받아와서 테이블에 뿌려주는 역할

 

오늘은 Template_Create에서 버튼을 눌러 DB에 저장하는 버튼을 만들 예정이다.

 

Server

서버는 config와 route로 나누었다. config는 db 정보등 설정정보에 대한 파일들이 들어있고, route는 라우팅 정보들이 담겨있다. 

예를 들어, Template.js는 /template/board, /template/insert 등의 /template 이하 라우팅 정보를 가지고 있다.

 

/board BoardList에 뿌려줄 정보를 가지고 있다. ( SQL 쿼리 SELECT문)

/insert DB에 저장할 라우팅 (SQL 쿼리 INSERT문)

/update DB를 수정할 라우팅 (SQL 쿼리 UPDATE문)

/delete DB에 있는 정보를 삭제할 라우팅 (SQL 쿼리 DELETE문)

 

오늘은 insert를 통해 DB에 값을 넣어줄 예정이다.

 

💻 저장 버튼 구현 (Template_Create) 

onClick 이벤트를 만들었다.

axios를 호출할 때마다 url을 일일이 써주는 게 번거로워 custom을 만들었다. 자세한 건 아래 포스팅을 참고하자!

『Client 04 』 [React] 게시판 만들기 -BoardList(axios), props 전달

/template/insert에 POST로 쿼리 파라미터를 보낼 것이다.

이전 포스팅에서 저장한 inputTitle과 inputContent를 각 Title과 Content라는 파라미터로 보낸다.

 

보낸 후에 "등록 완료"라는 알람창이 뜨고, /template url로 이동할 것이다. 

함수를 이렇게 구성할 경우 성공이든 아니든 POST만 되면 알람창이 뜨기 때문에 좋지 않다.

if문을 사용하여 성공, 실패를 자세히 기재하는 것이 좋다. 자세한 건 로그인화면 포스팅을 참고하자!

const onClickTemplate = async (e) => {
    await axios_db({
      url:'/template/insert',
      method:'POST',
      headers: {
        "Content-Type": "application/json"
      },
      params: {
        'Title': inputTitle,
        'Content': inputContent,
    }
  })
  .then((res)=>{
    alert('등록 완료!');
    navigate('/template');
  })
}}

 

if 함수를 통해 제목 또는 내용이 입력 안되면 알람창이 뜨게 설정했다. 

const onClickTemplate = async (e) => {
  if(inputTitle==''){
    alert("제목을 입력해주세요!");
  }
  else if(inputContent == ''){
    alert("내용을 입력해주세요!");
  }
  else{
    await axios_db({
      url:'/template/insert',
      method:'POST',
      headers: {
        "Content-Type": "application/json"
      },
      params: {
        'Title': inputTitle,
        'Content': inputContent,
    }
  })
  .then((res)=>{
    alert('등록 완료!');
    navigate('/template');
  })
}}

 

<button> 태그에 onClick 이벤트로 위에서 만든 함수를 넣어줬다. 

<button class="button" onClick={onClickTemplate}>저장</button>

 

전체 코드

//Template_Create.js
import React, {useState} from 'react';
import { useNavigate } from 'react-router';
import Template_Editor from '../Common/Template_Editor'
import Icon from '../../image/Tray_icon.png'
import { axios_db} from '../../components/customAxios';

const TemplateCreate = () => {
  let navigate = useNavigate();
  const [inputTitle, setInputTitle] = useState('');
  const [inputContent, setInputContent] = useState('');
  const Test =  sessionStorage.getItem('pageNo');

const handleInputTitle = (e) => {
  setInputTitle(e.target.value);
}

const onClickTemplate = async (e) => {
  if(inputTitle==''){
    alert("제목을 입력해주세요!");
  }
  else if(inputContent == ''){
    alert("내용을 입력해주세요!");
  }
  else{
    await axios_db({
      url:'/template/insert',
      method:'POST',
      headers: {
        "Content-Type": "application/json"
      },
      params: {
        'Title': inputTitle,
        'Content': inputContent,
    }
  })

  .then((res)=>{
    alert('등록 완료!');
    navigate('/template');
  })
}}

  return (
    <>
      <div class="wrap-1">
          <button class="button" onClick={onClickTemplate}>저장</button>
      </div>

      <img src={Icon} alt="logo" width="50" className='icon' />
      <span className='title'> Template </span>

      <div className='editor'>
        <input className="title-input2"
                type='text'
                placeholder='제목'
                onChange={handleInputTitle}
                name='Title'
              />
          <div className="warning">※ 저장할 때 소스 해제 하고 수정해주세요!! 안할 시 소스 저장 안됩니다.</div>
          <div className ="viewer">
            <Template_Editor setInputContent={setInputContent}/>
        </div>
      </div>
    </>
  );
}

export default TemplateCreate;

 

 

💻 Server에 query문 작성

함수를 실행시키는 메인함수에 아래와 같이 라우팅을 한다.

//server.js
const template = require('./routes/template');
app.use('/template',template);

 

React에서 보낸 파라미터를 req.query.변수명으로 받을 수 있다.

//Template.js
router.post("/insert",(req, res) => {
    const Title = req.query.Title;
    const Content = req.query.Content;

    console.log(Title);
    console.log(Content);
    
    const sqlQuery = "INSERT INTO server.template (Title, Content) VALUES (?,?)";
    db.query(sqlQuery, [Title, Content], (err, result) => {
        res.send('success!');
    });
});

 

전체 코드

//Template.js
const express = require("express");
const router = express.Router();
const request = require("request");
const db = require('../config/db');

router.get("/board", (req, res) => {
    const sqlQuery = "SELECT *FROM server.template;";
    db.query(sqlQuery, (err, result) => {
      res.send(result);
    });
  });

router.post("/insert",(req, res) => {
    const Title = req.query.Title;
    const Content = req.query.Content;

    console.log(Title);
    console.log(Content);
    const sqlQuery = "INSERT INTO server.template (Title, Content) VALUES (?,?)";
    db.query(sqlQuery, [Title, Content], (err, result) => {
        res.send('success!');
    });
});

module.exports = router;

 

저장 버튼을 누르면 Server에 로그가 찍히는 것을 확인할 수 있다.