[React] 팀프로젝트 - 아웃소싱 프로젝트 (4) 사용자 정보 불러오기(북마크페이지)

안셩·2024년 9월 20일

프로젝트

목록 보기

14/36

주말+추석 연휴 5일동안 각자 맡은부분의 기능 80% 구현이 숙제였어서 나름 다 했다고 생각했는데, 팀원 5명 PR 후 merge까지 했더니 이제부터 시작이라는 것을 깨닫고... 마음은 급한데 git 충돌과.. 코드 작성해야하는 부분의 이해도도 떨어지고..😭😭

👊 트러블슈팅

1. 'embed' 사용하여 db.json 내용 조인

유저가 북마크한 게시글을 불러오기 위해 db.json 파일에 users에 대한 객체를 추가했고, 임시로 만든 내용은 아래와 같았다.

{
  "articles": [
    {
      "id": 101,
      "category": "한옥",
      "title": "한옥랑솜 익선동카페",
      "content": "이곳은 서울 종로구에 위치한 한옥카페입니다.",
      "author_id": 2,
      "date": "2024-09-17",
      "cafe_address": "서울 종로구 수표로28길 21-6 1층",
      "region": "서울",
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240212_242%2F1707719652919dRzMW_JPEG%2F20230317_110053.jpg"
    },
    {
      "id": 102,
      "category": "한옥",
      "title": "너의고요 카페",
      "content": "이곳은 전북 전주에 위치한 한옥카페입니다.",
      "author_id": 1,
      "date": "2024-09-16",
      "cafe_address": "전북 전주시 완산구 전주천동로 60",
      "region": "전북",
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220720_191%2F1658279190162EyzLa_JPEG%2F0108B2EC-0989-44EB-885E-BF660FAEB0C4.jpeg"
    },
    {
      "id": 103,
      "category": "24시",
      "title": "24시무인카페레트로엣",
      "content": "이곳은 강원 춘천에 위치한 24시카페입니다.",
      "author_id": 1,
      "date": "2024-09-15",
      "cafe_address": "강원 춘천시 백령로138번길 15 강대먹자골목 범맥주4층",
      "region": "강원",
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20230708_297%2F1688797125294lo9K9_JPEG%2FScreenshot_20230708_133309_Naver_Blog.jpg"
    }
 ]
  "users": [
    {
 		"user_id": "asy13",
 		"bookmarked": [101, 102]
    }
  ]
}

기존 코드

해결한 코드

이렇게 코드를 작성할 수 있었던 이유는 API를 불러오는 과정에서 embed를 사용하여 db.json 내용을 조인할 수 있었기 때문이다.
그리고 filter와 map 메서드를 사용하는데 조건에서 고차함수 some을 사용해야 했다.

  const getBookmarks = async () => {
    const result = await DATA_API.get(`/users?user_id=asy13&_embed=articles`);
    return result.data;
  };

  const {
    data: bookmarks,
    isPending,
    isError,
  } = useQuery({
    queryKey: ['bookmarkedArticles'],
    queryFn: getBookmarks,
  });

코드 이미지의 윗쪽 코드는 이러하다.
DATA_API.get(/users?user_id=asy13&_embed=articles)
(괄호안에 ``로 되어있는게 맞다.)
이렇게 embed라는 걸 통해 해결했다

그런데...
팀 공통 db.json 파일에 users 안에 id라는 key가 생겨나면서 이 embed가 작동을 안하고..
왜 그런지 알아봤더니.. embed는 id값을 우선적으로 하기 때문에.. id가 있으면 user_id를 불러오는 과정이 작동할 수 없다는 것...
오늘 하루 종일 방법 고민을 하고 튜터님들께 찾아가며 고생했던 게 id로 인해 다 물거품이 되어버린 것😭😵
팀원들한테 내용 공유하여 해결할 방법 찾아보자..

2. zustand로 관리되는 유저정보 불러오기

embed로 json-server 에서 두 데이터를 동시에 관리하는 방식이 아닌,
zustand로 로그인한 유저의 상태를 관리하기 때문에,
해당 정보를 가져오는 getUserInfo 함수를 통해 user_nickname과 bookmarked(북마크한 게시물의 아이디 배열)을 사용할 수 있었다.

ㄴ> bearStore.js