[Express Routing] Parameter를 이용한 URL 효율적 관리

웹을 개발할 때는 수많은 페이지를 만들고 이를 URL과 연동하여 관리한다.

 

이때 중요한 것은 그 많은 페이지를 "효율적"으로 관리해야 하는데,

 

여기서 효율적이라는 의미는 app.get() 같은 함수의 남발을 지양하는 것을 뜻한다.

 

물론 일일이 관리할 수야 있겠지.

 

하지만 /something/category/item... 처럼 점점 계층화되고 페이지가 더 많아진다면, 그만큼 그때마다 손봐야 한다.

 

그래서 우리는 상황에 따라 유동적이고 경제적으로 대응할 방법이 필요해지고,

 

Express에서 제공하는 Parameter는 이를 해결해준다.

 

app.get('/posts/:id', function (req, res) {
	res.render('post')
})

만약 어떤 글의 주소가 루트 라우트에서 posts 경로를 거쳐서 각 글의 식별자를 갖기를 원한다면, 위와 같이 표현할 수 있다.

당연히 id 대신 다른 이름을 사용할 수 있으며, 이를 불러올 때 짝만 맞으면 된다.

그리고 이 예에서의 id는 새 글을 작성할 때 array의 length에 따라 각각의 번호를 부여하든지,

아니면 해당 글의 제목 등을 render()의 두번째 파라미터로 전달하면 된다.(* 물론 중복이 없어야 한다!)

 

// app.js (서버 구동파일)

// express 모듈 추가
const express = require('express')
// EJS(or html) 태그 속의 값을 불러오기 위한 모듈 추가
const bodyParser = require('body-parser')
// URL에 사용자가 대소문자나 하이픈/언더스코어를 입력해도 통일시키기 위한 모듈 추가
const _ = require('lodash')
// EJS 모듈 추가
const ejs = require('ejs')

// 이 앱에 express 프레임워크 적용하기
const app = express()
// 앱에 EJS 적용하기
app.set('view engine', 'ejs')
// 앱에 bodyParser 적용하기
app.use(bodyParser.urlencoded({extended: true}))
// 앱에 public이라는 이름의 폴더를 static 저장소로 적용하기
app.use(express.static('public'))

// 글들을 저장할 배열의 이름을 posts라고 하자.
const posts = []

// 처음 홈페이지에 접속하면 views/post.ejs에게 위의 posts 배열을 posts라는 key값으로 불러올 수 있게 한다.
app.get('/', function (req, res) {
	res.render('home', { posts: posts })
})

// 홈페이지 URL 뒤에 /new를 추가하여 들어가면 Form이 있을 것이다. 거기서 Submit을 행하면 POST 처리를 한다.
app.post('/new', function (req, res) {
	// 각 글을 추가할 때마다 그 글의 제목과 내용을 하나로 묶어 article이라는 객체에 저장하여 post 배열에 담는다.
  const article = {
  // 입력 Form 안에 있는 태그는 각각 title과 content를 name속성으로 갖는 태그가 있다.
  // bodyParser가 이들을 req.body.~로 데려온다.
    title: req.body.title,
    content: req.body.content
  }
  posts.push(article)  
  res.redirect('/')
})

// 각 글에 연동시킬 그 글만의 URL은 해당 글의 EJS 파일 내 <a href>에서 지정할 것이다.
// 그 주소를 클릭하면 아래 get 메서드를 통해 페이지가 불러와질 것이다.
app.get('/posts/:category', function (req, res) {  
  posts.forEach(element => {
    if (_.lowerCase(element.title) === _.lowerCase(req.params.category))
    {
      res.render('post', {post: element})
    }
  })

})

 

EJS에서 a태그의 주소와 연동하려면, (다양한 방법이 있겠지만) 배열에서 forEach로 각 원소를 꺼내오면 된다.

// home.ejs (홈페이지)

<% posts.forEach(element => { %>
	<h3><%= element.title %></h3>
    <p>
      <%= element.content.length>=100 ? element.content.slice(0,100) + "..."  : element.content %>
      <% if (element.content.length>=100) { %>
      <a href="/posts/<%=element.title%>">Read More</a>
    <% } %>
    </p>
<% } %>