시작하며
프로젝트를 시작하며 백엔드와 주고받을 정보에 대해서 얘기했었다. 그 중 하나가 전체 상품 보여주는 페이지를 로딩할 때 정보를 어떤 식으로 불러올 것인지에 대한 것이었다. 직관적으로 떠올랐던 것은 '각 카테고리마다 해당하는 상품들을 배열로 담아 받는 것'이었다. Mock up을 먼저 생각하고 그에 맞게 코드를 짜면 나중에 통신시 훨씬 수월할 것 같다는 생각에 아래와 같이 Mock up을 짜고 그에 맞춰 개발을 시작하였다.
카테고리가 상위에, 그 하위로 product들이 배열로 들어있는 상태
[
{
"categoryId": 1,
"categoryName": "클렌저",
"categoryDescription": "피부의 남은 각질, 불필요한 유분 그리고 기타 잔여물을 말끔히 씻어내어 피부를 깨끗하게 하는 것은 인텔리전트 스킨케어의 기초입니다.",
"products": [
{
"productId": 1,
"badge": "",
"productName": "리무브",
"size": "60 mL",
"price": "40000.00",
"url": "/images/productList/투명배경1.png"
},
{
"productId": 2,
"badge": "사랑받는기프트",
"productName": "퓨리파잉 페이셜 크림 클렌저",
"size": "100 mL",
"price": "27000",
"url": "/images/productList/투명배경2.png"
},
...UI와 코드를 완성하자마자 백엔드와 통신을 해보았고 결과는 성공적!
문제상황 발생
그런데, 이게 아니라는 것이다!!! 🤯 현영님께서 멘토님께 멘토링을 받았는데, 위와 같이 카테고리-상품구조가 아니라 상품-카테고리구조여야 한다는 것이다. 백엔드에서 정보를 보내주면 프론트에서 요리해야 한다고!?!?! 받을 구조는 다음과 같았다.
상품 목록을 배열의 형태로 쭈르륵 담아주는 형태 - 카테고리는 상품 하위에 있다.
[
{
"id": 1,
"badge": "사랑 받는 기프트",
"productName": "사과 클렌저",
"size": "60ml",
"price": "32000.00",
"url": [
"https://github.com/suhun96/wesope-url-repo/blob/main/%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC/%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC2.png?raw=true"
],
"category": {
"categoryId": 1,
"categoryName": "클렌저",
"categoryDescription": "피부의 남은 각질, 불필요한 유분 그리고 기타 잔여물을 말끔히 씻어내어 피부를 깨끗하게 하는 것은 인텔리전트 스킨케어의 기초입니다."
}
},
{
"id": 2,
"badge": "종환 MD 추천",
"productName": "오렌지 클렌저",
"size": "200ml",
"price": "40000.00",
"url": [
"https://github.com/suhun96/wesope-url-repo/blob/main/%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC/%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC5.png?raw=true"
],
"category": {
"categoryId": 1,
"categoryName": "클렌저",
"categoryDescription": "피부의 남은 각질, 불필요한 유분 그리고 기타 잔여물을 말끔히 씻어내어 피부를 깨끗하게 하는 것은 인텔리전트 스킨케어의 기초입니다."
}
},어떻게 해결했는가?
내가 짠 코드는 카테고리를 map으로 쭉 돌리고 그 하위에 각 상품 컴포넌트가 있어 카테고리 하위에서 상품을 map으로 쭉 돌리는 형태였다. 따라서 백에서 받은 데이터를 처음에 의도했던 대로 다음과 같이 바꾸어 주었다.
- 각 배열의 object에서 category만 따로 빼서 배열을 만들어준다.
- map을 이용하여 중복된 object는 제거해준다. -> 11개의 카테고리가 아름답게 보여진다.
- filter를 통해 카테고리 하위로 그 카테고리를 가지고 있는 상품들만 나열해준다.
useEffect(() => {
fetch('http://localhost:3000/data/category.json')
.then(res => res.json())
.then(data => {
const categoryArr = [];
for (let x of data) {
categoryArr.push(x.category);
}
const map = new Map();
for (const category of categoryArr) {
map.set(JSON.stringify(category), category);
}
const category = [...map.values()];
for (let i = 0; i < category.length; i++) {
const newArr = data.filter(
item => item.category.categoryId === i + 1
);
category[i].products = newArr;
}
setProductList(category);
});
}, []);위와같이 변경해주니 데이터가 다시 잘 불어와져 화면에 그려진다!
🤔 그런데 드는 의문
이솝에서 불러오는 API를 다시 봐도, 처음에 만들었던 카테고리 - 상품의 구조대로 되어있다. 게다가 데이터를 useEffect를 통해 불러오는 시점에 요리하면, 페이지 로딩시까지 시간이 엄청 걸릴 것이 아닌가? 플러스! 상품을 요리하는 것은 DB에서 가장 빠르지 않을까 하는 생각이든다. 그럼에도 불구하고 상품을 기준으로 정보를 불러오는 이유가 분명히 있기에 위와 같이 변경하도록 피드백을 받은 것일텐데! 상품기준으로 보내주는 이유가 무엇인지! 그리고 내가 어찌저찌해서 구조를 바꾸어 넣긴 했지만, 더 빠르고 좋은 방법은 없을지 너무나 궁금하다!! 돌아오는 주에 해결 후 알게되는 정보를 업데이트 하기로... 👣
