티스토리 뷰

흥미/Node.js+MongoDB

#20 URL parameter로 상세페이지 만들기

RadderNepa 2023. 4. 30. 01:44

● 상세페이지

- 상세페이지는 아래와 같은 개념으로 만들면 된다.

사용자가 /detail/3 에 접속하면 3번 게시물 데이터를 보여준다.
사용자가 /detail/4 에 접속하면 4번 게시물 데이터를 보여준다.

- 그렇다면 아래와 같이 코드를 짜면 될 것이다.

app.get('/detail/3', function(req, res) {
  res.render('detail.ejs', {3번 게시물 데이터});
});

app.get('/detail/4', function(req, res) {
  res.render('detail.ejs', {4번 게시물 데이터});
});

- 그러나 위와 같은 방식에서는 상품이 n개이면 app.get(...)도 n개를 만들어야한다.
- 그럴수는 없으므로 URL parameter를 사용하는 것이다.
- 여기서 parameter는 쉽게 말해 URL 뒤에 무작위의 문자&숫자를 붙일 수 있게 만들어주는 URL 작명 방식이다.

● URL parameter 

app.get('/detail/:id', function(req, res){
  res.render('detail.ejs', {ejs 파일에 보내는 데이터});
});

- '/detail/:id'과 같이 콜론(:) 기호를 붙여주면 사용자가 URL 뒤에 문자열을 입력하면 해당 get function으로 요청이 온다.
- /detail/ 뒤에 어떤 숫자나 문자를 붙이든 상관없이 위의 get function으로 요청이 온다는 것을 인식할 수 있는 것이다.
- /detail/:id = /detail/ 뒤의 무작위의 문자를 id라고 부르겠다.
- URL parameter는 2개, 3개 연속해서 이어붙일 수도 있다.

Q. 왜 하필 ':id'라고 썼는가?
A.
- 반드시 id 라고 할 필요는 없다.
- 콜론(:) 기호 뒤에는 원하는대로 작명해도 상관없다.

● URL parameter 실습(parseInt를 놓치지 말자)

- API 흐름은 아래와 같다.

1. URL란에 /detail/4 입력
2. request에서 (:id = 4) 값을 뽑아내서 DB에서 해당 id의 게시물 정보 조회
3. detail.ejs 파일이 렌더링될 때 data라는 이름의 변수에 실제 DB에 있던 (_id = 4)인 게시물 정보를 담는다.
4. data.title, data.date 과 같이 4번 게시물의 제목과 날짜를 ejs 파일 안에 뿌려준다.

- 즉, 사용자가 detail/n 경로로 get 요청을 하면 n번 게시물을 보여주는 것이다.

app.get('/detail/:id', (req, res) => {
  db.collection('post').findOne({ _id : parseInt(req.params.id)}, function(error, result) {
    res.render('detail.ejs', {data : result});
  });
});

// findOne --> findOne({ 원하는데이터정보 }, function(){ 완료시 실행할 코드 });

- findOne function은 DB에서 원하는 데이터를 '하나' 찾고싶을 때 사용한다.
- 셋째 줄에서 DB에서 찾은 결과를 data라는 이름으로 ejs 파일에 보내준다.
- 화면에서 보낸 :id 값은 '문자' 형태로 넘어오므로 parseInt()를 이용해 '숫자' 형태로 바꿔줘야한다.

- views 폴더 안에 상세화면용 EJS 파일(detail.ejs)을 하나 만들자

 

(views/detail.ejs)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>ToDo list</title>
</head>
<body>
    <h3>상세페이지</h3>
    <h4>제목 : <%= data.title %></h4>
    <h4>날짜 : <%= data.date %></h4>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
</body>
</html>

http://localhost:8080/detail/4

● 넘어오는 URL의 형태에 따른 서버 코드(개인적으로 작성한 내용)

- URL의 형태는 아래와 같이 2가지 경우가 있다.

- 각각의 경우에 서버에서 어떻게 URL parameter 값을 추출하는지 알아보자

- app.get function의 url을 적는 첫 번째 parameter 부분에 url을 어떻게 적어야하는지도 잘 보자

1번 : http://localhost:8080/detail/4/kim/apple --> path parameter를 사용한 URL
2번 : http://localhost:8080/detail?id=4&name=kim&fruit=apple --> query parameter를 사용한 URL, Query string

1번 : http://localhost:8080/detail/4/kim/apple

- req.params 사용

- Express에서는 request.params 객체를 사용하여 URL parameter를 가져올 수 있다.

- 아래의 코드에서 :id, :name 등은 매개변수의 이름이다.

app.get('/detail/:id/:name/:fruit', (req, res) => {
    console.log(req.params);
    console.log(`req.params.id : ${req.params.id}`);
    console.log(`req.params.name : ${req.params.name}`);
    console.log(`req.params.fruit : ${req.params.fruit}`);
    db.collection('post').findOne({_id : parseInt(req.params.id)} , (error, result) => {
        res.render('detail.ejs', {data : result});
    });
});

[출력값]
{ id: '4', name: 'kim', fruit: 'apple' }
req.params.id : 4
req.params.name : kim
req.params.fruit : apple

 

2번 : http://localhost:8080/detail?id=4&name=kim&fruit=apple

- req.query 사용

- Express에서는 request.query 객체를 사용하여 GET 요청의 쿼리 매개변수를 가져올 수 있다.

- 1번과 다르게 아래의 코드에서 '/detail' 경로 뒤에는 :id, :name 같은 매개변수가 더 이상 붙지 않는다.

- 대신 request.query를 사용하여 id 및 name 매개변수를 가져온다.

- request.query 객체는 쿼리 문자열에서 매개변수를 추출하는데 사용되므로 URL 경로에서 매개변수가 전달되는 경우에는 request.params 객체를 사용하여 값을 가져와야 한다.

- 즉, detail?id=4&name=kim&fruit=apple → 이런 식으로 넘어오는 경우에만 request.query 객체를 사용할 수 있다.

app.get('/detail', (req, res) => {
    console.log(req.query);
    console.log(`req.query.id : ${req.query.id}`);
    console.log(`req.query.name : ${req.query.name}`);
    console.log(`req.query.fruit : ${req.query.fruit}`);
    db.collection('post').findOne({_id : parseInt(req.query.id)} , (error, result) => {
        res.render('detail.ejs', {data : result});
    });
});

[출력값]
{ id: '4', name: 'kim', fruit: 'apple' }
req.query.id : 4
req.query.name : kim
req.query.fruit : apple

cf) ajax DELETE 요청

$.ajax({
     method: 'DELETE',
     url: '/delete',
     data: { _id: 1 }
});

- 이전 글에서 위와 같이 DELETE request와 {data}를 보낸 후 서버에서 req.body로 id 값을 꺼내서 DB 값을 삭제했다.
- 이런 방식말고 URL parameter로도 삭제를 원하는 게시물의 id 데이터를 전달할 수 있다.

$.ajax({
     method: 'DELETE',
     url: '/delete/1'
});

- 정답은 없지만 DELETE 요청시 2번째 방법을 더 자주 사용한다고 한다.
- DELETE 요청으로 data를 아예 따로 전달하는게 일반적이진 않다고 한다.(보통은 간단하게 pk 값만 알면되니까)

- 단, 서버로 보내는 정보가 많으면 data로 전달하는게 더 좋다.

'흥미 > Node.js+MongoDB' 카테고리의 다른 글

#22 글 수정 기능1 - method-override  (0) 2023.05.13
#21 HTML 디자인 & HTML 조립식 개발  (0) 2023.05.03
#19 AJAX로 삭제하기3(jQuery를 이용한 UI 기능) & HTTP 응답  (0) 2023.04.29
#18 AJAX로 삭제하기2(서버), HTML5 data-xxx 속성  (0) 2023.04.28
#17 AJAX로 삭제하기1(AJAX 설명 및 준비)  (0) 2023.04.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함