게시물 불러오기

연습1) 주어진 user,post정보를 이용하여 검색시 user가 있는지..? 유저가 작성한 게시물이 있는지..? 알아보자

const users = [
  { id: 1, name: "유저1", age: 26 },
  { id: 2, name: "유저2", age: 37 },
  { id: 3, name: "유저3", age: 12 },
];

const posts = [
  {
    id: 1,
    title: "제목1",
    contents: "내용1",
    userId: 1,
  },
  {
    id: 2,
    title: "제목2",
    contents: "내용2",
    userId: 1,
  },
  {
    id: 3,
    title: "제목3",
    contents: "내용3",
    userId: 3,
  },
];

2가지의 정보가 있다. 일단 user정보와 게시물을 찾는 과정은 비동기여야 하기 때문에 setTimeout과 Promise를 사용하여 핸들링하겠다.
한번에 하려니 정리가 안되니 순서대로 짚어보자.

1.users에서 적은 id의 번호가 있는지 체크한다.
2.번호와 일치하는 user정보가 있다면 return한다.
3.없다면 error를 내보낸다.
4.return한 유저정보가 쓴 게시물이 있는지 체크한다.
5.일치하는 userId가 있다면 return한다.
6.없다면 error를 내보낸다.
(변수명에 신경쓰자!!)

const getUser = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const checkUser = users.filter((user) => user.id === userId);

      if (checkUser.length > 0) {
        resolve(checkUser[0]);
      }
      reject("유저 정보가 없습니다.");
    }, 1000);
  });
};

가장 먼저 user찾기를 해보았다.
getUser에 id번호를 적으면 checkUser에서 filter로 users를 순회하고 id번호와 user.id번호를 비교한다.
그리고 checkUser가 맞는 번호를 찾았다면 새로운 배열안에 넣었을 것이고 id는 1개만 만들수 있다는 가정하에 배열에는 한개만 들어갈 것이다.
if문에서 checkUser가 0개보다 많다면 resolve하는 함수를 만들었다.
이제 다음 단계인 계시물을 찾아야 한다.

const getPost = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const checkPost = posts.filter((user) => user.userId === userId);

      if (checkPost.length > 0) {
        resolve(checkPost);
      }
      reject("작성한 게시물이 없습니다.");
    });
  });
};

게시물을 찾는 함수를 만들었다. 게시물 체크시 id번호로 체크하기 위해서 getUser에서는 checkUser[0]을 resolve했지만 getPost에서는 모든 게시물을 불러오기 위하여 checkPost자체를 resolve하였다.

이제 async/await를 사용하여 단계적으로 user정보와 post정보를 체크하여야한다.

(async () => {
  try {
    const findUser = await getUser(1);
    const { id: userId } = findUser;
    const findPost = await getPost(userId);
    console.log(findPost);
  } catch (error) {
    console.log(error);
  }
})();
// [{...},{...}] id가 1인 user의 2개의 게시물이 발견되었다.

try/catch를 사용하여 error를 핸들링하였고, 비구조화할당문법을 사용하여 userId를 뽑기도 하였다.
filter를 사용하면 배열로 만들어 준다는 개념이 떠오르지 않아 if문을 완성하는데 힘들었고, 문법적인 부분보다는 단계별로 무엇을 먼저 해야하는지 생각해내는 것이 굉장히 어려웠다. 다른 예제들로 연습하여 익숙해지도록 하자!