●5월 12~16일 Section 4 / 솔로프로젝트

● 솔로프로젝트

아직 솔로프로젝트 기간이 마무리되진 않았지만, 웬만한 기능은 모두 구현을 해놓아서 포스팅을 합니다!

 

 ❍ 메인 페이지

• axios 요청을 통해서 main 페이지에 들어오면 useEffect를 통해 데이터를 가져왔습니다.
• 이후 redux의 store에 저장합니다.
• 북마크 별표를 누르면 북마크리스트에 추가가되고, 북마크 별표를 지우면 북마크리스트에서 제거됩니다.
• 북마크 추가 및 제거를 할 때마다, 알림 토스트가 뜨게 됩니다.
• 각 객체마다 버튼을 누르면 bookmark속성이 추가되게 했습니다. 다시 버튼을 누르면 bookmark를 false한 값으로 수정했습니다.
• 리스트는 axios 요청으로 받아온 데이터 중 4개만 진열되게 했습니다.

 

 ❍ 상품리스트 페이지

• 햄버거버튼을 눌러 각 페이지마다 이동할 수 있게 했습니다.
• 햄버거버튼 이외 다른 부분을 눌러도 햄버거버튼이 닫히도록 했습니다.
• 이후 각 카테고리에 따라 상품을 진열하게합니다.
• 상품은 8개씩 보여지며, 스크롤을 내릴 때마다 8개씩 추가적으로 진열되게 했습니다. (무한 스크롤 구현)
• 상품리스트에서도 북마크 버튼을 누르면 북마크로 추가 및 제거가 됩니다.

 

 ❍ 북마크리스트 페이지

• 북마크된 리스트들을 진열합니다.
• 카테고리에 따라 북마크 리스트를 보여줄 수 있습니다.
• 상품은 8개씩 보여지며, 스크롤을 내릴 때마다 8개씩 추가적으로 진열되게 했습니다. (무한 스크롤 구현)
• 상품리스트에서도 북마크 버튼을 누르면 북마크로 추가 및 제거가 됩니다.
• 상품을 누르면 모달창이 보이며, 모달창에서도 북마크를 추가 및 제거할 수 있습니다.

 

● 구현하기에 어려웠던 코드

무한 스크롤은 한번도 구현해본적이 없어서, 어렵다고 느낀 것 같습니다. 스크롤이 모두 내려지면 그때 데이터를 추가하는 방식으로 구현했습니다. 

만약에 사용자가 스크롤을 멘 아래까지 내렸다면, page라는 state를 1씩 추가하게했습니다.

const scrollRef = useRef(0);
useEffect(() => {
  const handleScroll = () => {
    scrollRef.current = window.scrollY;
    const scrollPosition =
      window.innerHeight + document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    if (scrollPosition === scrollHeight) {
      setPage(page + 1);
    }
  };

page state는 data를 slice해오는 변수로 지정되었습니다. 원래라면 매번 요청을 하고 데이터를 수정해야하지만, 이번 프로젝트에서는 데이터 100개를 미리받아와 보여주는 식으로 구현되었습니다.

<div className='product-list-display'>
	<div className='product-list-display-container'>
    {
    	[...data].slice(0, page * 8).map((el) => (
    	<ItemComponent key={el.id} eachData={el} />
        ))
     }
    </div>
</div>

 

구현한 기능들이 아래와 같은 라이브러리로 구현이 가능해서, 링크도 넣어봅니당

무한스크롤

react-intersection-observer

알림 토스트

react-toastify

 

● 수업이외의 공부

최근에 가족휴가 때문에 수업에 제대로 임하지 못했었는데, 프로젝트에 참여하면서 다시 정신을 차려야겠다는 생각이 들었습니다.. 그리고 알고리즘을 어떻게 해야할지에 대해서 혼자 고민이 엄청 많았는데, 그나마 해결이 된 것 같아 요즘은 걱정이 덜한 상태입니다.

• TypeScript 공부 (노마드 코더) - 오늘 완강예정!!!!
• 알고리즘 3개 풀기
• tailwind 맛보기