23.07.22 클론 코딩 - 데이터 관계 설정

 오늘의 집을 클론 코딩을 하기로 했는데 주어진 시간이 짧기에 다 만들 수는 없고 스코프를 줄여서 만들기로 했다. 이때 내가 담당하게 된 부분은 이미지와 글 그리고 상품 정보가 있는 페이지이다. 같은 상품 정보가 각 글마다 들어갈 수도 있어서  글이랑 상품 정보를 같이 저장하면서 유저에 대한 정보도 필요하기에 하나하나의 데이터가 너무 커질 것 같았기에 먼저 관계형 DB를 선택하고 ERD를 만들었다.

내가 가장 먼저 하게된 일은 DetailPages에서 정보를 가져오면서 그 글에 있는 상품태그에 상품에 브랜드명, 상품명, 이미지, 가격을 가져오는 것이다. 그리고 그 글의 사진에 태그 된 상품의 좌표값과  유저의 프로필사진, 닉네임, 가입날짜까지 가져와야 했는데 이를 관리하기 위해서 위와 같이 WritePacks를 만들어서 각 글마다 상품의 정보를 가져오기 위한 상품의 ID값과 좌표를 같이 저장했다.

• DetailPages에서 가져올 수 있는 필요한 데이터를 찾는다.
• degailsId를 이용해 WritePacks에서 itemId와 좌푯값을 가져온다.
• itemId를 이용해서 상품 정보를 찾는다.
• 구조분해 할당을 활용 깊이를 줄인다

 

레이어드 아키텍쳐를 적용한 코드의 일부이다.

// detail.repository.js

// itemId 구하기
  findItemId = async (detailsId) => {
    const itemId = await WritePacks.findAll({
      attributes: ['itemId'],
      where: { detailsId },
    });

    const itemIds = itemId.map((item) => {
      const Id = item.itemId;
      return Id;
    });
    return itemIds;
  };
  
  // Details, Items
  findOneDetail = async (detailsId, itemIds) => {
    //? 가져오려는 집사진 정보
    const details = await DetailPages.findOne({
      where: { detailsId },
      attributes: ['detailsId', 'userId', 'content', 'imgUrl', 'createdAt', 'updatedAt'],
      group: ['detailsId'],
    });
    //? itemIds 없는 경우 
    if (itemIds.length < 1) {
      return [details]
    }
    //? Items 좌표값이 필요하기에 여기에 Join
    const itemsData = await ItemPages.findAll({
      where: {
        itemId: {
          [Op.or]: itemIds,
        },
      },
      attributes: ['itemId', 'brandName', 'itemName', 'price'],
      group: ['itemId'],
      raw: true,
      include: [
        {
          model: WritePacks,
          where: { detailsId },
          attributes: ["coordinateX", "coordinateY"],
        },
        {
          model: ItemImgLists,
          attributes: ["itemImg"],
        }
      ],
    });
    return [details, itemsData];
  };
  // 작성자 정보
  findUserData = async (userId) => {
    const userData = await Users.findOne({
      where: { userId },
      attributes: ['nickname', 'profileImgUrl', 'createdAt']
    })
    return userData
  }

 

출력 결과

이렇게 출력이 잘 되는 것을 볼 수 있다. 하지만 이렇게 만드는 과정에서 데이터 관계에 대해서 다시 정리할 수 있었고 계층형 구조를 이용해 만들었기에 그 부분도 한 번 더 복기하게 되었다.