[Node+MongoDB]DB에서 데이터 출력

✨글 목록 페이지 만들기

/list페이지로 이동되었을 때, 화면에 DB에서 뽑은 글들을 보여주도록 만들어보자.

1. mongoDB 사이트에 들어가서 이전에 넣어줬던 테스트 데이터들을 삭제하고 INSERT DOCUMENT로 직접 데이터를 넣어주자.
   
   2개정도 넣어주었다.
   

2. server.js로 가서 해당하는 collection에 모든 document를 가져오는 코드를 추가해준다.

app.get("/list", (요청, 응답) => {
  db.collection("collection명").find().toArray();
});

이후, 데이터가 정상적으로 들어온 경우에 실행될 수 있도록 async&await을 사용하여 처리
(*async&await은 Promise를 뱉는 곳에서만 사용할 수 있음)

app.get("/list", async (요청, 응답) => {
  await db.collection("collection명").find().toArray();
});

*아래는 .then()을 사용했을 경우

app.get("/list", (요청, 응답) => {
  let result = db.collection("collection명").find().toArray().then(() => {
    console.log(result);
    응답.send("DB에 있던 게시물");
  })
});

*toArray에 콜백함수를 집어넣어서 작성하는 경우

app.get("/list", (요청, 응답) => {
  let result = db.collection("post").find().toArray(()=>{
    console.log(result);
    응답.send("DB에 있던 게시물");
  })
});

3. 잘 보이는지 테스트를 해보기 위해 변수에 저장해서 출력을 해보자

저장 후 list 페이지로 들어가주고

vscode의 터미널 창을 확인해보면,

[{}{}]같은 모양새로 배열(array자료형) 안에 object 자료형이 들어가있는! 데이터를 잘 가져온 모습이다.

4. 화면에 표시해주기 위해 데이터 뽑은 순서대로 올려보자면

app.get("/list", async (요청, 응답) => {
  let result = await db.collection("post").find().toArray();
  응답.send(result);
});

여기서 첫 번째 게시글만 추출하고자 하는 경우, result[0] 넣어줌

이런 식으로 첫 번째만 추출을 성공했을 경우,
title만 뽑고싶다면 result[0].title넣어줌.

app.get("/list", async (요청, 응답) => {
  let result = await db.collection("post").find().toArray();
  응답.send(result[0].title);
});