📝Day(49) 75일차 WE_MOTIVATION_DIARY

- 프로젝트 진행현황

• 컴포넌트 카드 별로 해당 디테일 이미지 받아서 보여주는 기능 구현
  
• 상단으로 올라가는 gototop 버튼과 텍스트 하이라이트 기능 추가
  

- TODAY I LEARN ERROR 🦠

• map을 돌린 컴포넌트에 다른 이미지, 데이터를 받아서 뿌려줘야하는데 같은 이미지만 나오는 문제에 대한 문제점을 map의 구조에서 발견하였다.
• 현재 fetch에서 받은 데이터를 map을 2번 돌리다 보니 div 안에 img가 들어가버리는 문제도 발생한다는 점까지

<script>
{productDetailImg.map(data => {
            const { detailImg } = data;
            return (
              <div>
                {detailImg.map(data => {
                  return (
                    <img
                      className='productDetailImage'
                      key={data.detail_id}
                      alt={data.name}
                      src={data.img}
                      onMouseOver={changeDetailProductImage}
                      onMouseLeave={this.hoverOut}
                    />
                  );
                })}
              </div>
            );
          })}
  </script>  

- HOW TO FIX MY ERROR 💊

• ERROR를 해결한 KEYWORD 🔑
• map을 총 두번, 메인 이미지(div)에 한 번, 디테일 컴포넌트에 한 번 따로 해줌으로서 데이터를 따로따로 받아올 수 있었다.
• img가 아닌 div의 backgroundImage 속성을 통해서 배경 사이즈, 반복, 위치 속성도 줌으로서 받아온 이미지 src를 바로 넣어 줄 수 있어다.

<script>
<div className='detailImgWrapper'>
            <div
              className='productMainImg'
              style={{
                backgroundImage: `url(${productImg})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                backgroundPosition: 'center',
              }}
</div>
            {productDetailImg.map(product => {
              return (
                <ProductDetailCard
                  key={product.detail_id}
                  detailImage={mainImage}
                  name={product.name}
                />
              );
            })}
       </div>
</script>

- 모르는 점

• 무한 스크롤을 공부하기 전 스크롤 관련한 mdn 공식문서를 읽어보면 window.scrollTop과 같은 속성 그리고 효과에 대해서

- 배운점

리액트에서 스크롤 이벤트를 통해 무한 스크롤을 구현할 수 있는 방법으로는 1> onScroll 이벤트 2> Intersection Observer API가 있다고한다. 내일은 이 두가지에 대해 공부한 뒤 기능 구현을 마무리해야겠다.

- 잘한 점과 개선할 점

• 짧지만 자기 전에 다이어리를 쓰고 잔거! 잘했따!
• 현재 시각 2시 20분 오늘은 일찍자고자 했으나 저녁 시간을 시엄시엄하면서 했던거같다. 내일은 집에만 있지말고 카페나 가보던지해야겠다. 우선 중요한 건 일찍 일어나야는거~

- 목표와 마감기한: 2021-10-06

• 리스트 페이지 호버 기능 구현 간단하게라도 마치기 => 한 컴포넌트만 실현
• 백엔드 블로깅 마치기 => 계속 미루는 중 ING
• 회고록 적고자기 => 컴플리트!
  A. 남은 기능, 무한 스크롤 관련 공부해서 구현해보기
  B. 어제 노션에 나온 키워드 아침에 간단하게라도 공부하기
  C. 프론트 마친 뒤 리팩토링 전 peerReview받기
  D. 백엔드 강의 2개 보고 코드 쳐서 감 잃지 않기.