React와 Node.js 방명록 개발(3): 백엔드 서버 설정

React

React와 Node.js 방명록 개발(3): 백엔드 서버 설정

atomicdev 2024. 11. 2. 12:33

728x90

Node.js와 Express로 백엔드 서버 설정 및 API 구현 (1)

이 강의에서는 Node.js와 Express를 사용해 백엔드 서버를 설정하고 MySQL과 연결해 API를 구현하는 과정을 다룹니다. 백엔드 서버 설정부터 CRUD 기능을 위한 API 설계까지 상세하게 설명하므로 초보자도 쉽게 따라 할 수 있습니다.

1. Node.js와 Express 기본 서버 설정

Node.js 프로젝트 초기화
프로젝트 폴더를 만들고, 터미널을 열어 다음 명령어를 사용해 Node.js 프로젝트를 초기화합니다.위 명령어로 생성된 package.json 파일에는 프로젝트의 기본 정보와 의존성을 관리하는 설정이 포함됩니다.
```
mkdir guestbook-backend 
cd guestbook-backend 
npm init -y
```
Express 설치 및 기본 서버 구성 Express는 Node.js를 기반으로 한 웹 애플리케이션 프레임워크로, API를 빠르게 구축할 수 있도록 도와줍니다. 다음 명령어를 입력해 Express를 설치합니다.
```
npm install express
```
CORS 패키지 설치
```
npm install cors
```

서버 파일 생성 및 기본 설정 프로젝트 루트에 server.js 파일을 생성하고, 다음과 같이 Express 서버를 구성합니다.

// server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;

// CORS 설정
app.use(cors()); // 모든 도메인에서의 요청 허용
// 또는 특정 도메인만 허용하려면 아래와 같이 설정
// app.use(cors({ origin: 'http://localhost:3000' }));

// JSON 파싱을 위한 미들웨어
app.use(express.json());

// 기본 라우트
app.get('/', (req, res) => {
  res.send('서버가 정상적으로 동작하고 있습니다.');
});

app.listen(PORT, () => {
  console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
});

서버 실행 다음 명령어로 서버를 실행합니다.
```
node server.js
```
브라우저에서 http://localhost:5000에 접속해 "서버가 정상적으로 동작하고 있습니다." 메시지가 출력되는지 확인합니다.

2. MySQL과 Express 연결 설정 및 테스트

MySQL 라이브러리 설치
MySQL과 Node.js를 연결하기 위해 mysql 라이브러리를 설치합니다.
```
npm install mysql2
```

데이터베이스 연결 설정 db.js 파일을 생성하고 MySQL 데이터베이스 연결을 설정합니다.

// db.js
const mysql = require('mysql2');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',      // MySQL 사용자명
  password: 'password', // MySQL 비밀번호
  database: 'guestbook'
});

db.connect((err) => {
  if (err) {
    console.error('MySQL 연결 실패:', err);
    return;
  }
  console.log('MySQL에 연결되었습니다.');
});

module.exports = db;

데이터베이스 연결 테스트 server.js 파일에 db.js를 불러와 데이터베이스 연결 여부를 테스트합니다.
```
// server.js
const db = require('./db');

app.get('/test-db', (req, res) => {
  db.query('SELECT 1 + 1 AS solution', (err, results) => {
    if (err) {
      res.status(500).send('데이터베이스 쿼리 오류');
      return;
    }
    res.send(`DB 테스트 성공: ${results[0].solution}`);
  });
});
```
브라우저에서 http://localhost:5000/test-db에 접속하여 "DB 테스트 성공: 2"라는 응답을 받으면 데이터베이스 연결이 정상적으로 이루어진 것입니다.

이 과정에서 DB 인증 오류가 발생하면 아래 쿼리를 실행해서 root 사용자 인증 방식을 수정합니다.

-- MySQL에 다시 접속
mysql -u root -p

-- root 사용자의 인증 방식을 mysql_native_password로 설정
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_password';

-- 변경 사항을 적용
FLUSH PRIVILEGES;

3. CRUD API 설계

CRUD는 데이터의 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)을 의미합니다. Express와 MySQL을 활용해 API를 구축하는 기본 개념을 알아보겠습니다.

Create (생성) - POST 요청 사용자가 메시지를 작성하면 데이터베이스에 저장하는 API입니다.

// server.js
app.post('/api/messages', (req, res) => {
  const { name, message } = req.body;
  const sql = 'INSERT INTO messages (name, message) VALUES (?, ?)';
  db.query(sql, [name, message], (err, result) => {
    if (err) {
      res.status(500).send('메시지 저장 실패');
      return;
    }
    res.status(201).send('메시지가 저장되었습니다.');
  });
});

Read (조회) - GET 요청 작성된 모든 메시지를 데이터베이스에서 조회해 반환하는 API입니다.

app.get('/api/messages', (req, res) => {
  const sql = 'SELECT * FROM messages';
  db.query(sql, (err, results) => {
    if (err) {
      res.status(500).send('메시지 조회 실패');
      return;
    }
    res.json(results);
  });
});

Update (수정) - PUT 요청 특정 메시지의 내용을 수정하는 API입니다.

app.put('/api/messages/:id', (req, res) => {
  const { id } = req.params;
  const { message } = req.body;
  const sql = 'UPDATE messages SET message = ? WHERE id = ?';
  db.query(sql, [message, id], (err, result) => {
    if (err) {
      res.status(500).send('메시지 수정 실패');
      return;
    }
    res.send('메시지가 수정되었습니다.');
  });
});

Delete (삭제) - DELETE 요청 특정 메시지를 삭제하는 API입니다.

app.delete('/api/messages/:id', (req, res) => {
  const { id } = req.params;
  const sql = 'DELETE FROM messages WHERE id = ?';
  db.query(sql, [id], (err, result) => {
    if (err) {
      res.status(500).send('메시지 삭제 실패');
      return;
    }
    res.send('메시지가 삭제되었습니다.');
  });
});

요약

Node.js와 Express 서버 기본 설정
Express 서버를 설정하고, / 라우트를 통해 서버가 정상 동작하는지 확인했습니다.
MySQL과 연결 설정 및 테스트
MySQL 라이브러리를 통해 데이터베이스에 연결하고 쿼리 테스트를 진행했습니다.
CRUD API 설계
RESTful API의 기본 개념을 바탕으로 메시지를 생성, 조회, 수정, 삭제하는 API를 설계하고 구현했습니다.
server.js 최종 소스

// server.js
const express = require('express');
const app = express();
const PORT = 5000;
const db = require('./db');

// JSON 파싱을 위한 미들웨어
app.use(express.json());

// 기본 라우트
app.get('/', (req, res) => {
  res.send('서버가 정상적으로 동작하고 있습니다.');
});

app.listen(PORT, () => {
  console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
});

app.get('/test-db', (req, res) => {
    db.query('SELECT 1 + 1 AS solution', (err, results) => {
      if (err) {
        res.status(500).send('데이터베이스 쿼리 오류');
        return;
      }
      res.send(`DB 테스트 성공: ${results[0].solution}`);
    });
  });

  app.post('/api/messages', (req, res) => {
    const { name, message } = req.body;
    const sql = 'INSERT INTO messages (name, message) VALUES (?, ?)';
    db.query(sql, [name, message], (err, result) => {
      if (err) {
        res.status(500).send('메시지 저장 실패');
        return;
      }
      res.status(201).send('메시지가 저장되었습니다.');
    });
  });

  app.get('/api/messages', (req, res) => {
    const sql = 'SELECT * FROM messages';
    db.query(sql, (err, results) => {
      if (err) {
        res.status(500).send('메시지 조회 실패');
        return;
      }
      res.json(results);
    });
  });

  app.put('/api/messages/:id', (req, res) => {
    const { id } = req.params;
    const { message } = req.body;
    const sql = 'UPDATE messages SET message = ? WHERE id = ?';
    db.query(sql, [message, id], (err, result) => {
      if (err) {
        res.status(500).send('메시지 수정 실패');
        return;
      }
      res.send('메시지가 수정되었습니다.');
    });
  });

  app.delete('/api/messages/:id', (req, res) => {
    const { id } = req.params;
    const sql = 'DELETE FROM messages WHERE id = ?';
    db.query(sql, [id], (err, result) => {
      if (err) {
        res.status(500).send('메시지 삭제 실패');
        return;
      }
      res.send('메시지가 삭제되었습니다.');
    });
  });

이번 강의를 통해 Node.js와 Express를 사용해 간단한 API를 구현하는 기초를 배울 수 있습니다. 다음 강의에서는 이 API를 활용해 React 프론트엔드와 연동하여 사용자 인터페이스를 구현하는 방법을 다룰 예정입니다.

728x90

'React' 카테고리의 다른 글

React와 Node.js 방명록 개발(5): React 프로젝트 생성 (0)	2024.11.02
React와 Node.js 방명록 개발(4): 방명록 CRUD API (0)	2024.11.02
React와 Node.js 방명록 개발(2): 데이터베이스 설계 (0)	2024.11.02
React와 Node.js 방명록 개발(1): 프로젝트 개요 및 환경 설정 (1)	2024.11.02
React와 Node.js를 활용한 풀스택 프로젝트(방명록) (0)	2024.11.01

현재글React와 Node.js 방명록 개발(3): 백엔드 서버 설정

atomicdev 님의 블로그

자유로운 개발자 | Developing Life 30년간의 개발 경험을 바탕으로 자유롭고 창의적인 개발 노하우를 공유합니다. 발전을 꿈꾸는 개발자와 개발자를 꿈꾸는 미래의 개발자 모두와 함께 만들어 가고 싶습니다.

250x250

react 상태 관리, react상태관리, nodejs, Redux, react개발, ReactRedux, 웹개발, 건강한강아지간식, 프론트엔드, javascript, 강아지간식, 팻셰프세라전, ReactNative, reduxtoolkit, 반려견영양, 프론트엔드개발, 상태관리, 홈메이드도그트릿, React, flutter,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

atomicdev 님의 블로그