Node.js 기반 backend 및 frontend 구축(2)

이전 포스팅에서 Node.js 서버를 구축하기 위한 소프트웨어를 설치했다.

 

 

https://namsaenga.tistory.com/72

Babel, Nodemon, Express 이용한 backend(Node.js 서버) 구축(1)

 

---

 

본 포스팅에서는 Node.js 서버의 frontend 부분을 구축하기 위한 절차를 설명한다.

 

1. 프로젝트 디렉터리 하위에 src/views 디렉터리를 생성한다.

 

2. src/views/home.pug 파일을 생성한다.

• head 부분에 기본적인 UI 스타일을 바꾸기 위한 링크를 추가한다.
• body 부분의 header와 main에는 나타내고 싶은 페이지 제목과 내용을 각각 입력하고, script에는 실행하고 싶은 자바스크립트 파일을 추가한다.
• /public/js/app.js 파일을 작성한 후에 서버를 실행하면, 자바스크립트는 제대로 frontend로 가고 있음을 알 수 있다.

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body
        header 
            h1 Nam's Zoom
        main
            h2 Welcome to Nam's Zoom
        script(src="/public/js/app.js")

 

3. src/server.js 수정

• 사용자가 URL로 "http://localhost:3000/public"를 입력할 시에 실제 "/public" 폴더 하위의 파일내용에 접근하기 위해 express.static 작업을 수행한다.
• views 폴더에 있는 home.pug를 홈페이지 이동시에 사용될 템플릿으로 선택하고 렌더 하기 위하여, res.render 작업을 수행한다.
• 보안성 강화를 위해 유저가 어떤 URL로 이동하던지 "home"으로 이동하게 할려면 res.redirect 작업을 추가로 수행한다.

import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("home"));
app.get("/*", (req, res) => res.redirect("/"));

const handleListen = () => console.log(`Listening on http://localhost:3000`);
app.listen(3000, handleListen);

 

 

4. 변경내용 저장 시에 nodemon이 항상 재시작 되는 이슈 해결

• server.js 파일과 home.pug 파일을 수정할 때에는 새로고침을 하는데, public/js 폴더 하위에 있는 모든 자바스크립트 파일이 수정될 때에는 새로고침을 하고 싶지 않을 경우가 있다.
• nodemon.json 파일에서 ignore을 추가한다.

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

 

5. 정리

• nodemon은 우리의 프로젝트를 살펴보고 변경사항이 있을 시에 서버를 재시작해주는 프로그램이다.
• 이때 서버를 재시작하는 대신에 babel-node를 실행하게 되는데, babel은 우리가 src/server.js 코드를 일반 nodejs 코드로 컴파일해준다.
• src/server.js 파일에서는 express를 import 하고, express 애플리케이션을 구성하고 여기에 view engine을 pug로 설정한다.
• src/public 폴더의 하위 파일들은 frontend에서 구동되는 아주 중요한 코드 부분이다.

 

nodejs서버_frontend