Node.js : 데이터베이스에서 자료 가져와서 보내주기, 삭제, 상세페이지 제작 - 동적인 파라미터 id값 생성

 

프론트에서 전달해준 자료를 데이터베이스에 저장해 보았다.

1. 이제 데이터베이스에 있는 자료를 꺼내서 프론트에 전달하고 화면에 나타날 수 있게 하려한다.

 

아래 코드는 '/list' 주소로 get요청을 했을 때 데이터베이스의 자료를 전부 꺼내서 posts라는 키 값으로 전달하는 코드이다.

참고로 아래의 myDb라는 것은 이전 글에서 몽고db를 통해 데이터베이스와 연결시킨 변수 명.

(server.js)

app.get('/list', function(req, response){
  myDb.collection('post').find().toArray(function(error, result){
    console.log(result)
    response.render('list.ejs', { posts : result })
  })
})

 

클라이언트가 /list로 get요청을 하면,

- myDb.collection('post') --> myDb데이터베이스(폴더) 안의 post컬렉션(파일)을 선택 한다. 

- .find() --> 'post'라는 컬렉션 안의 모든 데이터를 가져온다.

- .toArray --> array 형식으로 가져온다.

- 가져온 결과값은 result 안에 담긴다.

ex) 형식 예시

[{name : 'kangchul', age : 32}, {name : "ohea", age: 33}]

- response.render('list.ejs', { posts : result } 

list.ejs 파일을 보내주는데, 즉 화면에 보여주는데, 보내주는 데이터, 즉 posts안에 담긴 result 데이터와 렌더링해서 보여준다.

 

 

 

2. 삭제하기

프론트에서 삭제 버튼을 클릭하면,

view에서 요소를 지워주는 것과 더불어

fetch를 통해 주소값과 함께 delete요청을 보내서 서버에 있는 데이터도 삭제 해주어야 한다. 

어떤 데이터를 삭제 해야하는지도 함께 보내야 주어야 한다.

 

아래 코드는 '/delete' 주소로 delete요청을 했을 때 일치하는 데이터를 찾은 뒤에 삭제하는 코드이다.

   app.delete("/delete", function (req, response) {
      req.body._id = parseInt(req.body._id);

      myDb.collection("post").deleteOne(
        { _id: req.body._id },
        function (err, result) {
          response.status(200).send({ message: "성공햇습니다." });
        }
      );
    });

 

- app.delete("/delete", function (req, response) { --> '/delete' 주소로 delete요청이 왔을 때, 라는 의미이고 뒤의 콜백함수 첫번째 파라미터 req에는 어떤 데이터를 삭제할 것인지에 대한 값이 담겨있다. 

- req.body._id = parseInt(req.body._id); --> 전달 된 데이터는 _id값이다. parseInt를 해준 이유는 string값으로 와서 숫자로 변환한 것. 자주 버그가 나는 부분이다. 자료형에 대한 체크 필수 ! 

- myDb.collection("post").deleteOne(  --> 연결시켜둔 데이터베이스 myDb에서 post컬렉션을 선택하고, 데이터 하나를 삭제해 주는 deleteOne 메소드를 사용한다. 

-  { _id: req.body._id },  --> 첫번째 인자로 들어온 값은 어떤 데이터를 삭제할 것인가? 즉 조건에 맞는 데이터를 삭제하는 과정 중 조건에 해당 하는 부분이다.

풀어서 설명하면 'myDb안의 post컬렉션 안의 데이터 중 _id가 req.body._id를 삭제해라 !' 라는 의미. 

- response.status(400).send({ message: "400 error" }); --> 성공, 실패 여부에 따라 보내주는 값이다. stats(200 or 400 or 500) <-- status값에 따라서 브라우저에서 성공 / 실패를 인식한다.

 

 

 

3. 파라미터 값을 통해 상세페이지 만들기

하나의 카테고리 안에 수 많은 상품들이 있다. 일일이 제품 번호에 맞게 get요청을 다 만들어 놓지 않는다. 

:id파라미터 값을 통해 구현할 수 있다. 주소를 쓰는 곳에 /:id 를 쓰면 파라미터로 작동한다. 1이오면 1이되고, 202가 오면 202가 되는 것.

그 값을 받아서 그 값으로 필요한 데이터를 찾아서 보내주면 된다. 

 //상세페이지 만들기
    app.get("/detail/:id", function (req, res) {
      myDb.collection("post").findOne(
        { _id: parseInt(req.params.id) }, // 안되서 봤더니 데이터베이스 안에 들어 있는 값의 자료형이 number였다.
        function (err, result) {
          res.render("어느파일에 보내줘?ex) list.ejs", { data: result });
        }
      );
    });

 

- 기본적인 틀은 비슷하다. myDb 데이터베이스 안의 post 컬렉션을 선택하고. 그 중에 _id 값이 req.params.id 인 것을 찾는다.  findOne한다.

- params는 :id를 찾기 위해 쓰인다. 

- 그리고 찾아진 데이터는 result에 들어가고 그것을 list.ejs파일에 렌더링 시켜서 보내주는 것 !