Express.js] static 폴더 사용 | 정적으로 파일 서비스 하기 | CSS, JS, 이미지 파일 등 가져오기

Node.js 2023. 12. 12. 10:10

1. 정적 파일 서비스?

express.Router나 다른 미들웨어를 거치지 않고

파일 시스템으로 직접 포워딩된다는 뜻이다.

기존 html 코드를 보면 파일마다

style과 class를 적용해두었다.

활용할 사람을 위해 전체 코드를 첨부한다. 다 볼 필요는 없다.

<-- shop.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add Product</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
        }

        main {
            padding: 1rem;
        }

        .main-header {
            width: 100%;
            height: 3.5rem;
            background-color: #dbc441;
            padding: 0 1.5rem;
        }

        .main-header__nav {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .main-header__item-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .main-header__item {
            margin: 0 1rem;
            padding: 0;
        }

        .main-header__item a {
            text-decoration: none;
            color: black;
        }

        .main-header__item a:hover,
        .main-header__item a:active,
        .main-header__item a.active {
            color: #3e00a1;
        }
    </style>
</head>

<body>
    <header class="main-header">
        <nav class="main-header__nav">
            <ul class="main-header__item-list">
                <li class="main-header__item"><a class="active" href="/">Shop</a></li>
                <li class="main-header__item"><a href="/admin/add-product">Add Product</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>My Products</h1>
        <p>List of all the products...</p>
    </main>
</body>

</html>

<-- add-product.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add Product</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
        }

        main {
            padding: 1rem;
        }

        .main-header {
            width: 100%;
            height: 3.5rem;
            background-color: #dbc441;
            padding: 0 1.5rem;
        }

        .main-header__nav {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .main-header__item-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .main-header__item {
            margin: 0 1rem;
            padding: 0;
        }

        .main-header__item a {
            text-decoration: none;
            color: black;
        }

        .main-header__item a:hover,
        .main-header__item a:active,
        .main-header__item a.active {
            color: #3e00a1;
        }

        .product-form {
            width: 20rem;
            max-width: 90%;
            margin: auto;
        }

        .form-control {
            margin: 1rem 0;
        }

        .form-control label,
        .form-control input {
            display: block;
            width: 100%;
        }

        .form-control input {
            border: 1px solid #dbc441;
            font: inherit;
            border-radius: 2px;
        }

        button {
            font: inherit;
            border: 1px solid #3e00a1;
            color: #3e00a1;
            background: white;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover,
        button:active {
            background-color: #3e00a1;
            color: white;
        }
    </style>
</head>

<body>
    <header class="main-header">
        <nav class="main-header__nav">
            <ul class="main-header__item-list">
                <li class="main-header__item"><a href="/">Shop</a></li>
                <li class="main-header__item"><a class="active" href="/admin/add-product">Add Product</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <form class="product-form" action="/admin/add-product" method="POST">
            <div class="form-control">
                <label for="title">Title</label>
                <input type="text" name="title" id="title">
            </div>

            <button type="submit">Add Product</button>
        </form>
    </main>
</body>

</html>

<!-- 404page.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page Not Found</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
        }

        main {
            padding: 1rem;
        }

        .main-header {
            width: 100%;
            height: 3.5rem;
            background-color: #dbc441;
            padding: 0 1.5rem;
        }

        .main-header__nav {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .main-header__item-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .main-header__item {
            margin: 0 1rem;
            padding: 0;
        }

        .main-header__item a {
            text-decoration: none;
            color: black;
        }

        .main-header__item a:hover,
        .main-header__item a:active,
        .main-header__item a.active {
            color: #3e00a1;
        }
    </style>
</head>

<body>
    <header class="main-header">
        <nav class="main-header__nav">
            <ul class="main-header__item-list">
                <li class="main-header__item"><a class="active" href="/">Shop</a></li>
                <li class="main-header__item"><a href="/admin/add-product">Add Product</a></li>
            </ul>
        </nav>
    </header>
    <h1>Page Not Found!</h1>
</body>

</html>

문제는 html 파일마다 같은 css 코드를 적으며 코드 재활용을 하지 못하고 있다.

일반적인 웹 서비스 처럼 css 파일을 분리해보자.

2. public 폴더 만들기

먼저 public 폴더와 그 안에 css 폴더를 만들고

필요한 css 파일을 생성하자.

기존 html 내부의 style 코드를 적절히 옮겼다.

public : 외부 액세스가 허용된 폴더

일반적으로 익스프레스 서버 내부에 있는 파일에 직접 접근하려는 시도는 먹히지 않는다.

예를 들어 shop.html에 직접 접근하려고 하면

브라우저의 요청이 발생하면 익스프레스는 일단 이를 받아

일치하는 라우터를 찾으려고 하기 때문이다.

다음과 같이 html이 css를 직접 호출하려는 시도도 실패하곤 한다.

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Add Product</title>
    <link rel="stylesheet" href="/css/main.css" />
    <-- /public/css/main.css로 접근해도 마찬가지 -->
  </head>

이를 위해 자유로운 접근이 가능한 public 폴더를 설정해야 한다.

3. 정적 서비스를 위한 미들웨어 추가하기

app.js 파일에서 public을 정적 서비스 폴더로 등록해준다.

app.use(express.static(path.join(__dirname, 'public')));

static()은 위에서 보듯 익스프레스 내장함수로

지정한 경로에 있는 폴더를 정적 서비스 폴더로 지정한다.

여러개를 써도 되지만 public 폴더 하나로 오늘은 충분하다.

// app.js 전체 코드
const path = require("path");
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

const adminRoutes = require("./routes/admin");
const shopRoutes = require("./routes/shop");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.use("/admin", adminRoutes);
app.use(shopRoutes);

app.use((req, res, next) => {
  res.status(404).sendFile(path.join(__dirname, "views", "404page.html"));
});

app.listen(3000);

이제 css 파일에 직접 접근도 가능하고

html에 외부 스타일시트도 적용 가능하다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add Product</title>
    <link rel="stylesheet" href="/css/main.css" />
    <link rel="stylesheet" href="/css/product.css" />
</head>

저작자표시

'Node.js' 카테고리의 다른 글

Express.js] pug(jade)/ejs/handlebar 템플릿 설치 및 사용하기 (0)	2023.12.15
Express.js] 여러 정보를 한번에 export하는 라우터 만들기 (0)	2023.12.12
Express.js]Navigation을 위한 헬퍼(유틸)함수 사용 (0)	2023.12.12
Express.js] HTML 페이지 서비스하기 (0)	2023.12.11
Express.js] 경로 필터링 (0)	2023.12.11

ABOUT ME

사랑과 유머에 중독된 개발자 사랑과 유머에 중독된 개발자

1. 정적 파일 서비스?

2. public 폴더 만들기

3. 정적 서비스를 위한 미들웨어 추가하기

'Node.js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 정적 파일 서비스?

2. public 폴더 만들기

3. 정적 서비스를 위한 미들웨어 추가하기

'Node.js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바