웹사이트 기초 틀 잡기 #1

jh_leitmotif·2021년 6월 17일
0

🧐 개요

이 포스트에서는 다음의 목차로 진행됩니다.

  1. index.js
  2. database.js
  3. router/user.js

서버 생성, 데이터베이스 연동, 라우터 분리 등의 항목입니다.

📂 index.js

const express = require('express');
const app = express();
const path = require('path');
const userRouter = require('./router/user.js');
const port = 5000;

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

app.get('/',(req,res)=>res.sendFile(path.resolve("infoHTML/info.html")));

//res.sendFile(__dirname+'index.html');

app.listen(port, ()=>console.log(`Server Start. Port : ${port}`))

const mysql = require('./database')();
const connection = mysql.init();
mysql.db_open(connection);

index 페이지가 복잡하지 않도록 라우터 분리를 이용했습니다.

이전 POST에서도 있었듯이 express를 통해 서버를 여는 것이 있고

path를 통해 html 페이지로 이동할 수 있도록 했습니다.

여기서 한 가지 짚고 넘어가야할 것은 path.resolve의 사용입니다.

😡 path.resolve

이것을 다루는 이유는 하기와 같은 오류가 발생했었기 때문입니다.

라우터 분리를 진행한 뒤, html페이지로 접근하기 위해 상위 폴더로 접근해야할 필요성이 있었습니다.

res.sendFile('../../~');

따라서 위와 같이 작성했는데, root가 명시되어 있지 않았기 때문에 발생한 오류였습니다.

사용할 수 있는 함수는 path.join과 path.resolve가 있었습니다.

path.join : 전달된 string 문자열을 병합해 경로로 만든다.
Ex) path.join('/a','/b','c') = /a/b/c

path.resolve : 오른쪽에서 왼쪽으로 읽어 절대 경로화 한다. 만약 /가 인식되면 그 다음의 왼쪽 경로는 무시한다.
Ex) path.join('/a','/b','c') = /b/c

여러가지 포스트들을 찾아보았지만, 이 두 함수가 어느 것이 낫다! 그런 것보다는 각 개인의 선호도 문제인 것 같습니다.

저는 절대경로로 딱 떨어지는 게 편하겠다 싶어 resolve를 사용하게 되었습니다.

💭 express.json()과 urlencoded

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

Request의 본문을 해석하는 미들웨어 단입니다.

원래 body-parser의 기능이었는데 express에도 추가되어 위와 같이 작성했습니다.

html에서 제출된 data를 js에서 다룰 수 있도록 합니다.

📂 database.js

const mysql = require('mysql'); 

module.exports = function () {
    return {
      init: function () {
        return mysql.createConnection({
          host: 'localhost',
          port: '3306',
          user: 'root',
          password: '',
          database: 'TEST_DB'
        })
      },
      
      db_open: function (con) {
        con.connect(function (err) {
          if (err) {
            console.error('mysql connection error :' + err);
          } else {
            console.info('mysql is connected successfully.');
          }
        })
      }
    }
  };

이전 POST와 달라진 부분은 없습니다.

📂 router/user.js

const router = require('express').Router();
const path = require('path');

router.get('/login',(req,res)=>{
    res.sendFile(path.resolve("userHTML/login.html"));
})
router.get('/register',(req,res)=>{
    res.sendFile(path.resolve("userHTML/register.html"));
})

module.exports = router;

express에서 제공하는 router API를 통해 위와 같이 관리적인 부분의 코드들을 분리할 수 있습니다.

import, export와 비슷한 개념이라고 보면 될 것 같습니다.

지금은 URL 이동에 대해서만 해두었지만 나아가 서비스가 포함될 js 페이지 또한 분리되어 작성될 것입니다.

덕분에 거의 100줄이 될 뻔한 index.js 파일은 고작 17줄만 작성되어 있습니다.


다음 POST는 간단한 로그인 및 회원가입 구현입니다.

profile
Define the undefined.

0개의 댓글