- 컴포넌트 카드 별로 해당 디테일 이미지 받아서 보여주는 기능 구현
- 상단으로 올라가는 gototop 버튼과 텍스트 하이라이트 기능 추가
- 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>
- 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분 오늘은 일찍자고자 했으나 저녁 시간을 시엄시엄하면서 했던거같다. 내일은 집에만 있지말고 카페나 가보던지해야겠다. 우선 중요한 건 일찍 일어나야는거~
리스트 페이지 호버 기능 구현 간단하게라도 마치기 => 한 컴포넌트만 실현- 백엔드 블로깅 마치기 => 계속 미루는 중 ING
회고록 적고자기 => 컴플리트!
A. 남은 기능, 무한 스크롤 관련 공부해서 구현해보기
B. 어제 노션에 나온 키워드 아침에 간단하게라도 공부하기
C. 프론트 마친 뒤 리팩토링 전 peerReview받기
D. 백엔드 강의 2개 보고 코드 쳐서 감 잃지 않기.