[NodeJS+Express] 11. URL파라미터 (상세페이지 만들기)

이번에는 URL 파라미터 문법을 이용해 상세페이지를 제작해보자.

 

0. 상세페이지 형태

지금까지는 루트('/')에서 직접 접속하는 페이지들을 제작했다면

상세페이지는 /parent/child/... 의 형태이다.

이것을 이용하면 url에 일관성을 부여할 수 있고 조금 더 간결하게 사이트를 구성할 수 있을 것이다.

 

상세페이지를 구현하기 위해서 어떻게 해야할까?

/page/detail1, /page/detail2, ... 이렇게 하나씩 만들어도 가능하지만,

페이지 수만큼 만들어야하는 것은 너무나도 비효율적이다.

 

이것을 간편하게 구현하는 방법은 여럿있지만 그중 하나가 바로 URL 파라미터 문법이다.

 

1. URL 파라미터 문법

형태

/부모url/:자식url

위와 같이 /:자식url 이 URL파라미터 문법이다.

이를 서버에 등록하면 부모url/ 임의의 자식url path에 접속하면 해당 URL을 GET요청한 것으로 인식한다.

 

이때 여러 개를 등록하는 것도 가능하다.

 

 

사용법

app.get('/부모URL/자식URL', (request, response)=>{
  ...
})

 

예시

app.get('/detail/:num', (request, response)=>{
  response.render('detail.ejs');
})

detail/:파라미터명 을 서버에 등록하였다.

 

이 예시에서는 DB에 저장되어있는 포스트의 id를 이용해 포스트 들을 가져와볼 예정이다.

 

 

---

2. 상세 페이지 구현하기

[과정 요약]
1. 유저가 /detail/... 접속
2. 서버에서 해당 id를 가진 데이터를 DB에서 찾기
3. 찾은 데이터를 EJS파일에 보내줌

 

1) 데이터에 접속하기 위한 데이터 가져오기 (request.params)

URL파라미터에 전달된 정보를 가져오기 위해서는 request.params를 이용하면 된다.

app.get('/detail/:num', (request, response)=>{
  console.log(request.params)
  response.render('detail.ejs');
})

 

이렇게 객체의 형태로 num 파리미터에 전달된 정보를 확인할 수 있다.

 

2) DB에서 데이터 가져오기

const { MongoClient, ObjectId} = require('mongodb');

...

app.get('/detail/:num', async(request, response)=>{
  let result = await db.collection('post').findOne({_id : new ObjectId(request.params.num)})
  response.render('detail.ejs', {result:result});
})

 

- findOne() :

파라미터에 전달된 정보를 이용해 DB의 데이터블록 중 _id가 해당 데이터와 같은 것을 한 개 찾아온다.

이를 위해서 findOne()함수를 이용한다.

 

- ObjectId():

MongoDB의 데이터블록을 살펴보면 _id 에는 ObjectId()가 일련번호를 감싸고 있다.

 

이를 그대로 사용하여 데이터를 불러와야하므로 mongodb 라이브러리에서 import 해주어야한다.

이후 new ObjectId(...)를 사용해 데이터를 특정한다.

 

3) EJS 파일 설정

{result: result}의 형태로 파일에 전달된 데이터를 꽂아준다.

 

 

 

---

3. 링크 생성하기

상세페이지에 들어가기 위한 링크를 만들어보자!

 

방법은 지금까지 다루었던 내용을 그대로 활용해주면 되는데

 

list 페이지에 있는 블록을 클릭하면 해당 글의 상세페이지로 이동하도록 구현해보자!

 

1) list.ejs 파일 세팅

//server.js
app.get('/list', async (request, response) => {
  let result = await db.collection('post').find().toArray();
  console.log(result)
  response.render('list.ejs', {list : result, image:image});
})

ejs 파일에 전달되는 데이터 중 result는 DB에 저장된 데이터 블록이다.

 

따라서 list.ejs 파일에서 _id 를 이용해 링크를 만들어낼 수 있다.

//list.ejs

...
<a class="postLink" href="/detail/<%= list[i]["_id"] %>">
  ...
</a>

/detail/<%= list[i]["_id"] %> 로 이동하도록 하면 사전에 정의한 detail 페이지로 이동하게 된다.

 

끝!

 

2) 좀 더 안정적인 서버 기능을 위해서 예외처리

detail/:num 을 통해 접속할때 만약 서버에 등록되어있지 않은 _id를 입력하게 된다면

사용자에게 "존재하지 않는 페이지" 등의 메세지를 띄워주는 것이 좋을 것이다!

 

먼저 직접 오류를 넣어보자. 

 

(1) detail/1 로 접속했을때

서버파일 내에서 오류가 발생했고,

12bytes의 string 형태로 전달해야한다는 에러메세지를 반환한다.

 

(2) detail/24글자 로 접속했을 때

이번에는 ejs 파일쪽에서 null 에러가 발생했다. 즉, DB 쪽에서 가져온 데이터가 null 인 것이다.

 

(3) 개선해보기

app.get('/detail/:num', async(request, response)=>{
  try{
    let result = await db.collection('post').findOne({_id : new ObjectId(request.params.num)})
    if (result == null) {
      response.status(400).send('존재하지 않는 글입니다.')
    } else {
      response.render('detail.ejs', { result : result })
    }
  }
  catch{
    response.send("오류!")
  }
})

위처럼 try, catch 구문을 사용하고 result가 null 인 경우 존재하지 않는 글임을 메세지로 반환한다.

 

.status()에 들어가는 코드는

유저의 잘못인 경우 : 4XX, 서버의 잘못인 경우 : 5XX 등으로 표시하며

사용자가 어떤 부분에서 에러가 발생했는지 알 수 있도록 한다.

(https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)