-
Node express로 서버열고 express-ejs-layouts 사용하기📗TIL/Node.js 2022. 5. 15. 16:03
0. 파일을 폴더에 정리
제작한 사이트를 폴더별로 정리합니다. (서버를 구성할 js파일 모듈화)
bin 폴더 : 서버를 열어줄 www.js파일을 넣어줍니다.
public 폴더 : 웹사이트에 사용된 css img js를 폴더별로 구분하여 넣어줍니다.
routes 폴더 : 웹사이트 내 모든 경로를 지정해주는 route.js 파일을 넣어줍니다.
views 폴더 : 웹사이트에 들어갈 모든 html(express-ejs-layouts 사용할 경우 ejs)파일을 넣어줍니다.
app.js 파일 : app.js는 파일로 넣어줍니다.
1. node express를 이용하여 서버 실행
route.js(라우터)를 모듈로 작성해 라우터 모듈에 미들웨어 함수를 로드하고 app.js로 라우터 모듈을 마운트 하여 사용
- app.js
const express = require("express"); const app = express(); //express를 사용하겠다 const homes = require('./routes/route.js'); app.use('/', homes); //route level 미들웨어 등록 app.set('views', __dirname + "/views");//html파일을 위한 경로설정 app.set('view engine', 'ejs'); // 화면 engine을 ejs로 설정 // app.engine('html', require('ejs').renderFile); //파일이 html일 경우에만 필요 app.use(express.static(__dirname + '/public'));//css img js파일 사용을 위한 경로 설정 module.exports = app;__dirname : 요청하고자 하는 파일의 경로(최상위 디렉토리~현재 디렉토리)를 단축시켜주는 절대경로 식별자
- www.js
var app = require('../app.js'); //app,js에 있는 내용 실행 var port = 3000; //3000번 포트 실행 app.listen(port, () => { //서버 실행 console.log(`express 실행 ${port}`) //서버가 실행됐을 때 console창에 나타남 })-route.js
const express = require("express"); //express 라이브러리 사용 const router = express.Router(); //router 분리 router.use(expressLayouts); //route 파일과 경로를 지정 router.get("/", (req,res) => { res.render('index'); //메인페이지 지정 }); router.get("/intro", (req,res) => { //서버 경로 이름 지정 res.render("intro"); //파일명과 일치하게 }) router.get("/main", (req,res) => { res.render("index"); }) router.get("/food", (req,res) => { res.render("thum"); }) router.get("/notice", (req,res) => { res.render("notice"); }) router.get("/login", (req,res) => { res.render("login"); }) router.get("/view", (req,res) => { res.render("notice_view"); }) router.get("/write", (req,res) => { res.render("notice_write"); }) router.get("/join", (req,res) => { res.render("join"); }) module.exports = router;2. express-ejs-layouts 사용하여 header, footer 공용으로 사용하기
- app.js에 코드 추가
var expressLayouts = require('express-ejs-layouts'); //express-ejs-layouts 사용 app.use(expressLayouts); app.set('layout','layout'); //layout.ejs를 기본 레이아웃으로 설정, <%- body %> 부분에 렌더링 된 html 문자열이 들어감 app.set('layout extractScripts',true); //렌더링된 html에서 모든 script 태그를 추출해서 <%- script %> 부분에 들어감- route.js에 코드 추가
var expressLayouts = require('express-ejs-layouts'); router.use(expressLayouts);- layout.ejs
view 폴더에 layout.ejs파일 추가 후 공통으로 사용될 코드를 넣어줍니다.
<!DOCTYPE html> <html lang="ko"> <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>Document</title> </head> <body> <header> <!--헤더에 들어갈 코드--> </header> <main> <%- body %> <!--main태그 안에 코드가 여기에 들어옴--> </main> <footer> <!--푸터에 들어갈 코드--> </footer> <%- script %> <!--html파일에 들어있는 script태그가 여기에 들어옴--> </body> </html>제작해뒀던 html파일을 모두 ejs로 변환시킨 뒤 공통되는 코드를 제거해줍니다.
이렇게 하면 layout.ejs안에 소스는 유지된 상태로 다른 페이지를 불러올 때 <%- body %> 부분에 렌더링 됩니다.
'📗TIL > Node.js' 카테고리의 다른 글
node.js 로 웹서버 만들기 (+ node express) (0) 2022.05.08