const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

<aside> 💡 node app.js

</aside>

HTML을 로드할때는 sendFile로 로드를 해줬지만 view engine으로 설정 되었을때는 render를 사용한다.

import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views"); //view엔진이 사용될 directory
app.use("/public", express.static(__dirname+"/public")); //미들웨어 설정? Html내 script로 사용하기 위한 static작업
app.get("/", (req, res) => res.render("home"));
app.get("/*", (req, res) => res.redirect("/"));

app.listen(3000, ()=> {
    console.log('Server running at <http://localhost:8000/>');
});

import express from "express";
import http from "http";

const app = express();

app.use("/public", express.static(__dirname+"/public"));
app.get("/", (req, res) => res.sendFile(__dirname+'/views/home.html'));
app.get("/*", (req, res) => res.redirect("/"));

app.listen(3000, ()=> {
    console.log('Server running at <http://localhost:8000/>');
});

app.use(express.static())

app.use는 express를 통해 서버에 정적 파일들을 추가하기 위해 사용된다.

express는 사용자의 접속이 이루어지면, get에 맞게 자료를 전달하게 된다.

이때 자료는 정적인 코드 파일이 전달되며, 코드 내부에 프로젝트 파일 경로상으로 연결되어 있어도, express 서버에서 사용하지 않으면 의미가 없다.

이때, use를 통해 서버에서 해당 파일을 ‘사용’한다고 정의해 주는 과정인 것이다.

<aside> 💡 app.use(express.static(__dirname+"/public"));

</aside>

위와 같이 기본적으로 /public 내부에 클라이언트용 JavaScript, CSS의 파일을 저장하고, 서버의 정적 파일로 사용 시켜준다.

<aside> 💡

</aside>

혹은 위와 같이 /public 파일을 정적 파일로 사용시키고, 해당 파일로 이동하기 위한 express 상의 경로를 /publicpath로 정의 할 수 있다. defualt는 “”로 경로를 입력할 때, 해당 폴더로의 이동은 생략하고 즉시 내부 폴더의 경로를 입력하면 된다.

<aside> 💡

app.use(”/publicpath”, express.static(__dirname+"/public"));

</aside>