TIL-221207- 최근 본 상품 구현하기

장바구니 기능 중 오늘은 최근 본 상품을 구현을 해서 장바구니 기능을 최종적으로 완성을 했다. 장바구니가 피처기능은 아니지만 그래도 본인이 생각하기에는 괜찮았던 것 같다.

 

장바구니의 최근 본 상품을 구현 하는 방법은 2개 정도를 생각했다.

 

1. 로컬 스토리지, 세션 스토리지에 최근 본 상품들의 아이디를 저장한다.

2. Cookie에 데이터를 저장한다.

 

본인이 생각하기에는 일단 쿠키에 정보를 담는 것은 한 번도 해보지 않아서 한번 도전해 보려고 했지만 쿠키는 API요청을 통해서 서버단에서 데이터를 저장할 수 있기 때문에 프론트에서 처리해 주도록 localStorage에 저장하는 방법을 사용했다.

 

기본 적인 프로세스는 

1. 상품의 상세 페이지에 접속을 한다. 

2. 로컬 스토리지에 상품의 아이디를 배열의 첫번째 요소에 저장한다.

3. 중복된 상품의 아이디가 들어가서는 안된다.

4. 최근 본 상품의 아이디는 최대 10개 까지 저장을 저장을 하기로 정책을 결정했다.

5. 11개의 상품을 보면 제일 처음에 첫번째로 봤던 상품의 아이디는 없어져야 한다.

 

별로 어렵지 않은 기능이니 바로 가보자

 

 

useEffect로 상품 상세페이지가 마운트 되었을 때 해당 로직이 실행이 된다. 

 

useLocalStorage를 사용을 하고 있다. 로컬스토리지에는 기본적으로는 객체나 배열을 저장을 할 수가 없다. 그렇기 때문에 저장을 할 때 

JSON.stringify를 통해서 배열이나 객체를 직렬화 시켜 저장을 해야한다. 직렬화된 객체나 배열을 꺼낼 때는 다시 parse를 통해 원래의 형태를 가져올 수 있다.

 

상세 페이지에 접속을 했을 떄 해당 상품의 id가 localStorage에서 꺼낸 아이디 배열중에 없으면 unShift를 통해서 제일 앞에 추가를 해준다.  

 

length가 10인 경우에는 배열의 제일 마지막 인덱스 요소를 제거하기 위해서 pop()메소드를 사용했다. 

 

그리고 이미 추가된 아이디가 있을 경우에는 필터를 통해 해당 중복된 아이디를 빼고 다시 첫번쨰 요소에 추가한 후에 로컬 스토리지에 set을 해준다.

 

끝~ 

 

그러면 이 최근 본 상품을 불러오고 싶은 곳에서 는 

 

로컬 스토리지의 값을 꺼내서 해당 배열을 통해 API서버에서 데이터를 가져 오면 되는 아주 간단한 로직이다. 

 

하지만 여기서 애를 먹은 것이 있는데 get요청에는 requestBody로 배열을 넘겨 줄 수가 없다는 것이다.

 

 

get요청에 배열을 넘겨 주기 위해서는 params를 사용을 해야 하는데 조금 더 그냥 파람으로 배열을 전달을 해주면 API서버에서 사용하기 굉장히 복잡한 형태가 되기 떄문에 qs라는 라이브러리를 사용했다.

 

npm i qs 

 

이렇게 보내주면

 

요로코럼 직렬화된 문자로 요청 URL을 보내주게 되고 

 

페이로드에는 이렇게 정상적으로 보내진다 고 한다. ~ 이것떄문에 사이버고문을 당했는데 어떻게 해결이 되긴했다..