즐거운인생

본 포스트는 Express 기반의 Node.js 애플리케이션 서버를 구성할 때 mysql2 라이브러리를 이용하여 MySQL 연계 환경을 구성하는 방법을 설명합니다.

express 서버의 기본적인 환경 설정은 이전 포스트인 아래 링크를 참고하여 설정합니다. 아래 포스트에서 설정한 내용에 이어서 MySQL 환경 구성을 진행해보겠습니다.

Node.js Express 환경 설정 :: 즐거운인생 (tistory.com)

MySQL 설치

먼저 사용할 데이터베이스를 로컬에 설치 해보겠습니다. MySQL은 아래 링크에서 자신의 환경에 맞는 설치 파일을 다운로드하여 설치합니다.

https://dev.mysql.com/downloads/mysql/

설치 과정은 별로 특별할 것이 없으므로 별도로 설명하지 않습니다. 설치 과정 중 MySQL root 계정을 설정하는 부분이 있는데 본인이 사용할 root 계정을 정확하게 입력하고 기억합니다.

접속정보 설정

설치가 완료되었다면 MySQL Workbench를 켜고 일단 root 계정으로 접속합니다.

위 스크린 샷의 MySQL Connections 부분에 [+] 버튼을 클릭하여 새로운 Connection을 하나 생성하는데, 계정의 비밀번호를 Keychain에 저장하고 싶으면 [Store in Keychain ...] 버튼을 클릭하여 비밀번호를 기억시켜 둡니다. 여기서는 굳이 비밀번호는 저장하지 않겠습니다.

식별할 수 있는 Connection Name과 접속 정보를 확인한 후 [OK] 버튼을 선택하면 아래와 같이 Connection이 하나 생성됩니다.

선택하고 비밀번호를 입력하여 root 계정으로 로그인 합니다.

데이터베이스 생성

이제 사용할 데이터베이스 및 사용자를 하나씩 생성해 보겠습니다. 먼저 아래 스크립트로 데이터베이스를 먼저 생성합니다.

CREATE DATABASE testDB DEFAULT CHARACTER SET utf8 collate utf8_general_ci;

testDB 라는 이름의 데이터베이스를 하나 생성하고 해당 데이터베이스의 기본 Charater-set을 UTF-8로 설정합니다. 이어서 사용자 계정도 하나 생성합니다. testid 라는 계정을 생성하고 비밀번호는 test01!로 생성하겠습니다.

CREATE USER 'testid'@'%' IDENTIFIED BY 'test01!';

이제 생성한 계정에 testDB의 개체들을 사용할 수 있는 권한을 부여합니다. 

GRANT ALL PRIVILEGES ON testDB.* to 'testid'@'%';

다시 로그인해서 정상적으로 로그인이 되는지 확인합니다. 위에서 하신대로 [New Connection]을 하나 열고 로그인하시면 됩니다.

테스트에 사용할 테이블을 하나 생성합니다.

CREATE TABLE TB_TEST (
    TEST_ID int,
    TEST_TXT varchar(100),
    PRIMARY KEY(TEST_ID)
)

생성한 테이블에 데이터를 한 건 입력하고 SELECT 해서 테이블이 정상적으로 생성되었는지 확인합니다.

INSERT INTO TB_TEST VALUES (1, 'TEST');

SELECT  *
  FROM  TB_TEST

Node.js 프로젝트 설정

위와 같이 데이터베이스에 대한 설정을 마쳤으면 이제 Node.js 에서 해당 데이터베이스를 사용하도록 설정합니다. 위의 포스트를 따라해서 "Hello World"까지 출력해 본 상태라면 현재 package.json은 express 모듈만 설치하여 아래와 같은 상태입니다.

{
  "name": "express",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.1"
  },
  "scripts": {
    "start": "node ./src/app.js"
  }
}

MySQL 데이터베이스를 연동하기 위해 mysql2 모듈을 설치합니다.

D:\workspace\expressServer>yarn add mysql2

MySQL 연동을 위한 소스코드를 app.js 파일에 추가합니다. mysql2 모듈을 추가하고 Connection Pool을 생성합니다. 위에서 생성한 데이터베이스 및 계정 정보를 입력하여 생성합니다.

const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: 'localhost',
    port: '3306',
    user: 'testid',
    password: 'test01!',
    database: 'testDB'
});

const getConn = async() => {
    return await pool.getConnection(async (conn) => conn);
};

testSelect라는 Route를 추가하고 간단하게 TB_TEST 테이블의 정보를 조회하는 쿼리를 실행하도록 작성합니다.

app.get('/testSelect', async (req, res) => {
    const conn = await getConn();
    const query = 'SELECT TEST_ID, TEST_TXT FROM TB_TEST';
    let [rows, fields] = await conn.query(query, []);
    conn.release();

    res.send(rows);
});

위 내용들을 추가한 app.js의 전체 소스코드는 아래와 같습니다.

const express = require('express');
const path = require('path');
const app = express();
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: 'localhost',
    port: '3306',
    user: 'testid',
    password: 'test01!',
    database: 'testDB'
});

const getConn = async() => {
    return await pool.getConnection(async (conn) => conn);
};

app.use(express.static(path.join(__dirname, '../public')));
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.get('/testSelect', async (req, res) => {
    const conn = await getConn();
    const query = 'SELECT TEST_ID, TEST_TXT FROM TB_TEST';
    let [rows, fields] = await conn.query(query, []);
    conn.release();

    res.send(rows);
});

app.listen('8001', () => {
    console.log('Server started');
});

실행 결과 확인

브라우저에 http://localhost:8001/testSelect 를 입력하여 접근하면 아래와 같은 결과를 확인할 수 있습니다.

[{"TEST_ID":1,"TEST_TXT":"TEST"}]

본 포스트는 Express 기반의 Node.js 애플리케이션 서버를 구성하고 static 경로를 설정하는 방법을 설명합니다.

서론

Node.js 서버 애플리케이션을 개발할 때 주로 사용하는 Framework는 Express와 Nest 정도가 있습니다. 장단점은 생각보다 명확합니다. Express는 빠르고 자유롭습니다. Express는 구조에 대한 자유도가 높기 때문에 특별히 Framework에서 제한하고 있는 구조가 없습니다. 이런 부분으로 애플리케이션을 빠르게 개발하고 프로토타이핑 해 볼 수 있는 장점이 있는 반면, 이 부분은 약점이 되기도 합니다. Express 같은 경우에는 개발자마다 개발하는 스타일이 충분히 다를 수 있어 프로젝트마다 완전히 다른 언어로 개발된 것처럼 보일 수도 있습니다.

Nest는 이런 점에서 완전히 반대편에 서 있습니다. Nest 역시 Express를 기반으로 만들어졌지만 Spring Framework가 떠오를 만큼 명확한 구조가 있습니다. Spring의 annotation과 유사하게 decorator를 제공하여 대규모의 애플리케이션을 일관성 있는 구조로 작성하고 운영할 수 있습니다.

하지만 Nest를 사용하다 보면 JavaScript의 장점인 자유롭고 가벼운 특성을 느끼지 못할 정도로 빡빡합니다. 개인적인 사견이기는 하지만 이럴 거면 굳이....왜? 라는 생각이 들기도 합니다. 대한민국에서 서버는 Spring 이라는 대중적인 Framework가 있으니깐 말입니다.

Express 기반 환경 설정

이번 포스트에서는 Express를 기반으로 서버를 간단하게 구성할 수 있는 환경설정을 진행해 보겠습니다. 기회가 되면 Nest에 대한 부분도 다음에 포스팅 해보겠습니다.

먼저 프로젝트 폴더를 하나 생성합니다.

D:\workspace> mkdir expressServer
D:\workspace> cd expressServer
D:\workspace\expressServer>

프로젝트를 초기화합니다.

D:\workspace\expressServer> yarn init -y

필요한 모듈을 설치합니다. 

D:\workspace\expressServer> yarn add express

VSCode에서 프로젝트를 엽니다.

VSCode에서 반입한 프로젝트의 현재 구조는 아래와 같습니다.

프로젝트에 ./src 경로와 ./public 경로를 생성합니다. src는 JavaScript 애플리케이션 소스를 작성하고 public 폴더에는 html, css, image 등과 같은 정적 resources를 관리합니다.

먼저 public 경로 하위에 index.html 을 아래와 같이 작성합니다. 그냥 "Hello World"라는 텍스트만 표시합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Express Sample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    </head>
    <body>
        <div id="app">Hello World</div>
    </body>
</html>

다음은 src 경로 하위에 app.js 파일을 아래와 같이 작성합니다.

const express = require('express');

const app = express();
app.listen('8001', () => {
    console.log('Server started');
});

기존 Java 애플리케이션을 생각하면 정말 믿기 힘들 정도로 간단한 내용입니다. 이제 package.json 파일에 start 스크립트를 추가합니다.

{
  "name": "expressServer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.1"
  },
  "scripts": {
    "start": "node ./src/app.js"
  }
}

여기까지 작업하고 웹 서버를 구동해 봅니다.

D:\workspace\expressServer>yarn start
yarn run v1.22.17
$ node ./src/app.js
Server started

너무나 간단하게 구동이 되어버렸습니다. 웹 서버가 구동되었으니 브라우저로 접속해서 확인해 봅니다.

해당 포트로 Listen을 설정했을 뿐 라우팅을 하나도 추가하지 않았으므로 위와 같이 GET으로는 루트에 접근할 수 없다는 "Cannot GET /"이라는 오류 메시지가 표시됩니다.

이제 app.js에 정적 static 경로를 설정하고 루트 경로 라우팅을 추가합니다.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, '../public')));
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen('8001', () => {
    console.log('Server started');
});

express.static 메소드를 사용해 정적 경로를 선언할 수 있는데, 현재 app.js 파일의 경로가 ./src 하위이므로 한 경로 상위의 ../public 경로를 정적 경로의 루트로 선언합니다.

그 다음 루트 경로에 Get 방식 라우팅을 추가하고 루트 경로로 접근할 경우 ../public/index.html 파일을 응답합니다.

여기까지 작성하고 다시 웹 서버를 중간 후 구동합니다. Ctrl + C 로 구동을 중단할 수 있고, yarn start 명령으로 재시작 합니다. 시작 후 브라우저로 루트 경로로 접근하면 아래와 같이 "Hello World"를 확인할 수 있습니다.

간단한 정적인 화면을 표시할 수 있는 웹 애플리케이션을 Express를 사용해서 설정해 보았습니다.