[1차 프로젝트] 회고 - 기능

 

Project - 기능💻

---

 

  이번 프로젝트를 진행하며 크게 보면 로그인, 회원가입, 제품전체페이지, 제품상세페이지를 담당하여 진행하게 되었다. 그중 제품 전체 페이지에는 특정 조건별로 filtering을 하고 그 내용들을 정렬기준에 맞춰 정렬하는 기능이 포함되어 있어야 했다. 중간회고에서 언급했던 것처럼 처음에는 큰 그림을 보지 못했기에 하나하나 필요한 조건대로 router/엔드포인트를 만들었고 그에 따른 함수도 각각 만들어줬었다.

구현하다가 또 다른 요청이 있거나 추가해야할 사항이 있으면 그 밑에 추가하고 추가하고… 일을 반복하다 보니 아래의 그림과 같은 코드가 작성이 되었었다.

 

만약 처음부터 각 페이지에 어떤 기능들이 들어갈지 계획이 되고 그 계획대로 진행했다면 같은 작업을 두번 하지는 않았을 텐데... 다시 느끼는 초기미팅의 중요성!⭐️

위의 이미지처럼 하나하나 추가하다보니 뭔가 단단히 잘못하고 있다는 것을 깨닫고 코드 리뷰를 요청했고, url을 하나로 만들어서 해봐라!라는 미션을 받게 되었다. 도대체가 말이 안 된다고 생각했지만 그래도 해결! :-)

 

쿼리 파라미터 사용 🛠

---

같은 제품의 목록 데이터를 호출하는데 조건에 따라 데이터를 호출하는 API를 매번 새로 생성하는 것은 너무나 비효율적이였기에 필요한 조건을 요청에 따라 선택적으로 처리할 수 있게 쿼리 파라미터를 사용하여 API를 생성하였다. 그러면서 데이터 필터링, 데이터 정렬, 페이지네이션을 훨씬 수월하게 적용시킬 수 있을 것이라고 생각했다.

하지만 특히 필터링을 위해 쿼리파라미터로 요청을 받게되는 상황에서 매번 몇 개의 파라미터가 들어올지, 어떤 파라미터가 들어올지 알 수 없었기에 어떻게 하면 그 파라미터의 종류와 수와는 상관없이 필터링을 할 수 있을까 고민했다.

 💡 또한 필터링과 동시에 데이터 정렬, 페이지네이션도 쿼리파라미터로 받아야하기에 한 번에!! 동시에!! 처리할 수 있는 방법이 필요했다

 

 

나머지 매개변수(rest parameters) 사용 🛠

---

고민 끝에 사용할 수 있었던 것은 나머지 매개변수이다. 쿼리파라미터로 몇개의 파라미터를 받던지 상관없이, 데이터 정렬과 페이지네이션과도 상관없이 …filterOptions에 필터링을 위한 파라미터만 넘겨받을 수 있게 지정해 주었다.

// productService.js

const getProductByParameter = async (params) => {
 
  const { limit = 6, offset = 0, sortMethod = "lowPrice", ...filterOptions } = params;
};

그리고 페이지네이션을 위해 limit과 off을 default값으로 지정하여 진행하였고 언제든지 클라이언트의 요청에 따른 페이지네이션이 될 수 있게 구현하였다. 또한 데이터 정렬에 있어서도 default 값을 지정해서 리스트를 보여주게 하였고 동시에 클라이언트 요청에 따라 수정될 수 있게 하였다.

 

 

데이터 정렬(sorting) - 객체의 효과적 사용 🛠

---

데이터 정렬은 한 번에 여러 가지 파라미터를 받을 필요가 없어서 처음에는 if절로 조건을 걸어서 해당하는 값이 들어오면 그에 대한 query문을 내보내도록 했다가 그 후 리팩토링을 하며 orderBy()라는 함수를 이용했다.

불필요하게 함수를 만들어 그 안에 객체를 넣고 그 객체의 value를 리턴한다? 참으로 애매한 코드가 아닐 수 없다.

//productDao.js
const getProductByParameter = async (limit, offset, filterOptions, sort) => {
	const sorts = orderBy(sort);
}

//productQueryBuilder.js
const orderBy = (value) => {
  const sort = {
    lowPrice: "ORDER BY price",
    highPrice: "ORDER BY price DESC",
    id: "ORDER BY id",
    best: "ORDER BY stock",
  };
  return `${sort[value]}`;
};

그래도 다행히 코드 리뷰를 통해 객체만을 사용함으로 똑같은 기능을 할 수 있음을 배웠고 위치 또한 같은 파일 안으로 옮기어 아래와 같이 사용할 수 있게 되었다.

비정상(?)적인 코드를 만들게 된 이유가 “객체”에 대한 개념이 부족했었기 때문인 것을 알았고 그 중요성 또한 경험을 통해 강하게 배울 수 있었다.

//productDao.js

const getProductByParameter = async (limit, offset, filterOptions, sort) => {

  const sortSet = {
    lowPrice: "ORDER BY price",
    highPrice: "ORDER BY price DESC",
    id: "ORDER BY id",
    best: "ORDER BY stock",
  };
// sortSet[sort]를 사용하면 아주 쉽게 사용할 수 있다. 
}