저번시간 숙제 정리

최근 본 상품목록의 id값을, localStorage에 저장된 배열에 추가
단, 이미 해당 id 값이 있다면 pass

1. Detail페이지 접속
2. 현재 페이지에 보이는 상품id 가져와서
3. localStorage에 watch항목에 있던 [ ] 에 추가

다른 사람이 한 코드

내가 한 코드는 어제 작성 완료.
다른 사람의 코드 한번 보기.

//Detail.js
let { id } = useParams(); // 유저가 입력한 URL 파라미터값 받기
//기존에 만들어놨던, 유저가 입력한 url의 파라미터값을 가지는 상품데이터 변수.
const shoesOne = props.shoes.find((shoesOne) => shoesOne.id == id);
//useEffect 생성. 1회만 실행됨. 
useEffect(()=>{
  //localStorage의 최근 본 상품목록을 불러옴.
  let 꺼낸거 = localStorage.getItem('watched')
  //JSON 형태에서 배열 형태로 다시 만들기.
  꺼낸거 = JSON.parse(꺼낸거)
  //상품데이터의 id를 배열에 넣기. 여기까지 하면 중복 허용.
  꺼낸거.push(shoesOne.id)
  //id 중복제거를 위한 Set 사용.
  꺼낸거 = new Set(꺼낸거)
  //Set을 Array로 만들기. 
  꺼낸거 = Array.from(꺼낸거)
  //새로 만든 배열을 localStorage에 저장. 기존 배열 대체됨. 끝.
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

간결하고 깔끔하다.

주말에 해볼 것

최신 상품 목록을 진짜 ui로 만들어보기.

홈화면 클릭시 최근 본 상품 나타내기. 배열이 비어있으면 나타내지 않기.
배열에 값이 있다면, 최근 본 상품의 이미지와 상품명이 나타나고, 최근에 본 상품 순 정렬.

• 홈화면 렌더링시, watched배열안의 id값들을 확인. id값에 해당하는 데이터를 data.js에서 끌고오기.
• 없다면 기존 데이터 끌고오던 url에서도 확인. 없다면 없는페이지로 이동.
  스크롤을 내려도 따라다니면 좋겠음.
  클릭하면 해당상품으로 이동하게하기.
  route활용.