[VSCode] React + nodejs + mySQL로 게시판 만들기 4편 - 서버 환경 구성

이번 포스팅에서는 서버 프로젝트를 생성하고, 클라이언트 요청이 정상적으로 들어가는지부터 데이터베이스에 연동하는 것까지 진행하겠다.

나 같은 입문자를 기준으로 포스팅을 해야 하기 때문에 내용이 매우 길어질 수 있겠다.

 

먼저, 기존에 만들었던 클라이언트 폴더와 별도로 서버 프로젝트용 폴더를 하나 생성 후 vscode로 연다.

 

 

1. 터미널에 아래 명령어 입력

 

npm init -y

 

2. 관련 모듈 설치를 위해 아래 명령어 입력

 

npm install express body-parser mysql

 

3. nodemon 설치

nodemon은 서버 코드가 수정됐을 때 자동으로 서버를 재시작해주는 모듈이다.

 

npm install nodemon

 

4. index.js 작성

root 경로에 index.js 파일을 생성한 후 아래 코드를 입력한다.

 

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

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

 

5. 서버 실행을 위해 터미널에 아래 명령어를 입력한다.

 

node index.js

아래와 같이 보이면 정상이다.

 

6. package.json의 scripts에 아래 코드 추가

 

"start": "node index.js",
"dev": "nodemon index.js"

 

7. 터미널에서 Ctrl+C를 눌러 켜져 있던 서버를 끄고 아래 명령어를 입력

 

npm run dev

nodemon으로 서버를 켠 것이다.

 

반응형

 

서버 세팅은 정상적으로 된 것이다.

그럼, 서버와 정상적으로 통신이 가능한지 테스트 url을 만들어서 호출해보자.

 

index.js 파일을 수정하자.

 

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

app.get("/", (req, res) => {
  console.log("requested.");
});

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

 

툴을 사용하여 request를 해봐도 되지만, 편하게 브라우저 상에서 URL을 호출해보자.

크롬 브라우저의 URL에 localhost:8000 입력

 

그리고 서버 프로젝트의 터미널에 로그가 찍히는지 확인

 

 

클라이언트와 서버는 정상적으로 통신이 되고 있으니, 서버와 DB가 정상적으로 연동이 되는지 확인해보자.

 

1. MySQL Workbench를 열어서 DB 서버에 접속한다.

 

 

2. 새로운 데이터베이스를 생성한다.

데이터베이스를 어디서 확인하는지 모르는 분들을 위해 화면 UI도 계속해서 첨부하겠다.

명령어 입력 후 새로고침을 하면 생성된 데이터베이스를 확인할 수 있다.

 

 

3. 데이터베이스 사용

아래 명령어를 입력하여 앞으로 실행되는 명령문은 bbs라는 데이터베이스에서 실행될 수 있도록 한다.

 

use bbs;

 

Workbench 화면 하단 Output에서 방금 실행한 쿼리 명령문 결과를 확인할 수 있다.

 

 

4. 테스트용 테이블 생성

아래 명령어를 입력한다. 단순히 요청이 들어오는지 카운트만 체크할 것이기 때문에 대충 만들겠다.

입력 후 Ctrl+Enter를 누르면 명령어가 실행된다.

 

create table requested(
	rowno int
);

 

5. 서버 프로젝트의 index.js 수정

데이터베이스 연동을 위해 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: "1234",
  database: "bbs",
});

app.get("/", (req, res) => {
  const sqlQuery = "INSERT INTO requested (rowno) VALUES (1)";
  db.query(sqlQuery, (err, result) => {
    res.send("success!");
  });
});

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

 

6. 정상적으로 연동이 되는지 확인

쿼리가 정상적으로 실행이 되는지 확인하기 위해 아까와 같이 브라우저에 localhost:8000을 입력해본다.

 

오! 한방에 성공?

테이블에 데이터가 정상적으로 들어갔는지 확인해보자.

 

7. Workbench에서 아래 쿼리를 실행

 

select *from requested;

 

그런데 테이블이 비어있다.

 

 

아무래도 success 메시지는 내가 에러 여부와 상관없이 내려줘서 그런 것 같다.

에러 내용을 확인하기 위해서 응답 부분에 log를 찍었다.

실제로 에러가 나고 있었다.

ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

 

구글링 해보니 해당 오류는 흔한 것 같았고, 당연히 해결방법도 있었다.

 

아래 명령어를 한 줄씩 순서대로 입력 후 실행하자.

 

CREATE USER 'root'@'%' IDENTIFIED BY 'root';

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

FLUSH PRIVILEGES;

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '사용할비밀번호';

 

 

 

다들 이렇게 해서 해결했다는데 나는 안됐다.

여전히 동일한 에러가 발생했다.

그리고 아래 명령어를 입력해서 해결했다.

 

기본 구조
ALTER USER '[MYSQL 아이디]'@'[MYSQL 주소]' IDENTIFIED WITH mysql_native_password BY '[MYSQL 비밀번호]';

나의 경우
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '1234';

 

우여곡절 끝에 테이블에 데이터가 생긴 것 확인

신나서 두 번 했다..

 

 

그럼 이제 마지막으로 클라이언트에서 서버 요청 > 서버에서 데이터베이스로 데이터 insert까지 한 번에 확인을 해봐야겠지?

서버에서 데이터베이스에 insert 하는 URL은 이미 만들었으므로 클라이언트에서 그 URL을 호출만 해주면 된다.

 

 

 

그럼 이미 만들었던 '글쓰기' 버튼에 URL을 호출하는 로직을 테스트용으로 넣어보자.

리액트에서 서버와 통신할 때는 주로 axios 라이브러리를 사용하기 때문에 모듈을 설치해야 한다.

 

1. 클라이언트 프로젝트 터미널에 아래 명령어를 입력

 

npm i axios

 

2. BoardList.tsx에 axios 로직 추가

아래 코드는 BoardList class 위쪽에 추가한다.

 

import Axios from "axios";

const submitTest = () => {
    Axios.get("http://localhost:8000/", {}).then(() => {
        alert("등록 완료!");
    });
};

 

3. BoardList.tsx의 글쓰기 버튼에 아래 코드를 추가

 

기존
<Button variant="info">글쓰기</Button>

변경
<Button variant="info" onClick={submitTest}>글쓰기</Button>

 

4. 글쓰기 버튼 클릭

이번엔 CORS 오류가 발생했다.

 

 

CORS 에러는 처음 서버를 세팅했을 때 아주 흔하게 발생하는 오류라서 해결방법은 별도로 포스팅했다.

https://artistjay.tistory.com/26

[React] axios cors 에러 해결방법

 

 

CORS 에러 해결 후 다시 글쓰기 버튼을 클릭하면 정상적으로 된다.

 

 

실제 데이터도 확인해보자.

 

테스트하면서 포스팅을 했더니.. 들어간 데이터가 좀 많다.

 

 

이제 진짜 기본적인 세팅은 끝났으니 본격적으로 게시판을 만들어보자.

다음 포스팅에서..