Node.js 로 간단한 서버 구성하기

이번편은 심화된 Node.js 구성을 정리합니다.

Express.js 를 사용하는것은 같으나, webSocket 을 사용하면서 알게된 새로운 구성법을 설명합니다.

대체로 Node.js 의 구성을 설명하는데 중점을 둡니다.

모듈 설치

npm init -y (package.json 노드환경 구축)

npm i express

npm i @babel/core

npm i @babel/cli

npm i @babel/node

npm i @babel/preset-env

npm i body-parser

npm i cors

npm i nodemon

npm i pug

npm i ws

기초설정

일단 서버의 기초작업을 한다. 각 파일 생성 후 코드 작성

/nodemon.json

{
  "ingore": ["src/public/*"],
  "exec": "babel-node src/server.js"
}

/babel.config.json

{
  "presets": ["@babel/preset-env"]
}

/.gitignore

README.md
/node_modules

/package.json

 // 아래 코드를 scripts 에 추가

"dev": "nodemon"

하위폴더 작업

src 폴더 생성 후 하위폴더 경로,

public폴더 view폴더 server.js 생성, 이중 server.js 는 위의 nodemon 에 의해 실행되는 서버설정 스크립트 파일이다. 서버 시작을 이 파일로 함. 터미널에서 node src/server.js npx nodmon src/server.js 로 서버를 직접실행 가능하며, 위의 nodemon 설정에서 경로지정이 되어있으니 nodemon 만 실행해줘도 된다. 이를 실행하도록 packge.json에 npm run dev 지정해 놓음

// src/server.js

import express from "express";
import WebSocket from "ws";
import http from "http";
var cors = require('cors');
var bodyParser = require('body-parser');
const app = express();

app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// pug 뷰어 설정 뷰어로 pug 를 선정하고 /view 폴더 내부파일을 뷰어 html 파일로 지정한다.
app.set("view engine", "pug");
app.set("views", __dirname + "/view");

// public 폴더 사용 설정
// app.use(express.static("build"));
app.use("/public", express.static(__dirname + "/public"))

// home.pug 파일을 기본경로에서 불러주고 다른경로를 사용하지 않겠다는 설정
app.get("/", async (req, res) => {res.render("home")});
app.get('/*', async (req, res) => {res.redirect("/")});

server.listen(3080, async ()=>{console.log("서버 열림 3080")});

// src/public/js/app.js

pug 자체가 프론트를 구성하며 이곳에서 작성되는 코드는 프론트의 스크립트이다.

위의 app.js 는 아래와같이 pug html 을 통하여 import 된다. link 통하여 css 파일도 가능

// src/view/home.pug

//html 단축어 사용으로 템플릿 생성,

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body 
    h1 hehe

    script(src="/public/js/app.js") 

이로써 Node.js 로 간단한 엔드포인트 생성을 하게 되었습니다.