Skip to content

ejs에서 npm install 로 설치한 모듈을 사용해보자

Jump to bottom
Nam_Ssang edited this page May 27, 2021 · 1 revision

ejs에서 npm install 로 설치한 모듈 사용하기

상황

프론트에서 부트스트랩을 사용하고 싶다. 그런데 ejs 파일에서 npm install 로 설치한 파일을 가져오는 방법이 뭔가 아리까리 하다. 그렇다고 매번 CDN 으로 가져오는 방법은 멋이 없어 보인다.

해결

미들웨어를 이용

  1. npm install bootstrap

  2. vendors 라는 라우터를 생성

    // routes/vendors.js
const express = require('express');
const router = express.Router();
const path = require('path'); 

router.use('/bootstrap', express.static(path.join(__dirname,"../node_modules/bootstrap/dist")));

module.exports = router;

    코드를 보면 생성된 라우터는 /bootstrap 경로로 들어오는 요청을 처리하게 된다는걸 알 수 있다. 또한 해당 라우트로 접근했을 때 npm install bootstrap 로 설치한 node_modules 의 위치에 직접 접근해서 가져오는 걸 알 수 있다. 여기다가 사용할 모듈들을 추가해주면 된다.

  3. app.js 에서 해당 라우트를 use 한다.

    // app.js
app.use('/vendors',  vendorsRouter);

    vendors/bootstrap 로 요청을 보내면 vendorsRouter 로 들어가게 되고, 거기서 우리가 등록한 모듈들을 가져다 사용할 수 있게 된다.

  4. 이제 ejs 파일에서 사용할 수 있게 된다.

    // layout.js
<!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><%= title %> </title>
  <link href="/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/stylesheets/author/common.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/author/index.css" />
  <%- style %>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-JWR8KYL1MC"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-JWR8KYL1MC');
  </script>

</head>
<body>
  <%- defineContent('navbar') %>
  <%- defineContent('body') %>
  <%- defineContent('footer') %>

  <%- script %>
  <script src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

    마지막의 script 를 보면 app 에 등록한 라우터와, vendorsRouter 에 등록된 bootstrap 를 이용해서 모듈을 사용하는 걸 확인할 수 있다.

Clone this wiki locally