[Node.JS] Node.JS_03 - Routing

박소윤·2021년 3월 13일

NODE 강의

목록 보기
7/8
post-thumbnail

# Routing

url 추가요소 추가요소
여러개의 작업파일을 url로 주소창에 입력하여 인터넷에 경로를 찾아가는데,
작업파일에서 하나하나 파일을 불러오는 코드를 작성하면 유지보수에도 용이하지않아, Router로 대표파일을 생성하여 그안에 작업파일을 넣어 하나씩 끌어오는 방식

# 템플릿 엔진

# View Engine - Nunjucks

파이썬의 진저2와 비슷한 방식
- View Engine : 컨트롤러단에서 데이터베이스에서 내용을 가져올경우, url에서 /이후 해당명을 여러방식중 HTML로 뿌려주는 방식으로 뿌려주는 방식이다.

[ 형식 ]

html
   head
     title= title
   body
     h1= message

cmder에 npm install nunjucks 설치

작업중인 파일에 routes 파일과 다른 template 파일을 생성하여 그안에서 꺼내서 url로 불러오는것을 명시하여 아래와 같은 기본세팅 작업진행.


- autoescape : true : 보여주는 데이터를 html 방식으로 보여줌.
- express: app : 받은 데이터를 express 패키지의 app 파일로 보여줌.

[ admin.js ]

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.send("admin 이후 url");
});

router.get("/products", (req, res) => {
  res.render("admin/products.html", {
    message: "이건 admin/products.html",
  });
});

module.exports = router;

[ products.html ]

products
{{ message }} 

- render가 돌면서 인터넷에 url 구현시 admin.js파일의 message에 값이 구현된다.

- 템플릿을 render하여 url에 부여줄때,package.json내부에 "start": "npx nodemon -e js,html app.js"코드로 강제성을 가져 렌더할때마다 최식 변경사항을 보여주게 명시


# 템플릿상속

공통파일 ( javascript,부트스트랩 등 )에서 필요할때마다 가져와서 사용하는 형식

- 공통된 템플릿 상속 해보기 -

[ 개인 깃허브에 정리 ]



- 202102313 -

[ 03. Express (Routing | view engine | 템플릿상속) ]
[ 챌린지 NODE강의 링크 ]   ->   Node.JS 강의

profile
흐르듯 그리는 Front-end

0개의 댓글