📝김민재 Day(48) 74일차 WE_MOTIVATION_DIARY

- 지금까지의 결과물

• productCard 컴포넌트를 기준으로 반복되는 구조로 데이터를 받아서 뿌리는데까진 성공했다.
  
• 반응형으로 줄어이는 기능까지 media query로 작성하는데 완료

- TODAY I LEARN ERROR 🦠

• 내가 만난 오늘의 에러 코드 적기
  
• 그러나 같은 컴포넌트에서 데이터를 변경하다 보니 모든 컴포넌트가 같은 데이터만 받아지는 오류를 만나버렸다..!
• map으로 돌린 컴포넌트에 다른 데이터를 뿌릴 수 있는 방법을 어제 하루 종일 찾았지만 발견하지 못한 상태다.

- HOW TO FIX MY ERROR 💊

• 이 기능을 구현하기 위해 2가지 방법으로 접근해보았다.
  1> 메인 이미지를 data로 받아와서 영역별 호버 시 상세 이미지로 state값을 변경해서 직접 바꾸는 방식
  2> 디테일 이미지들을 position absoulte로 메인 이미지와 겹치게 넣어 영역별 호버시 보여지는 이미지 빼고 나머지는 dispaly:none을 주는 방식

- ERROR를 해결한 KEYWORD 🔑

• 지금까지 바뀌는 이미지를 state값을 변경해서 주었더니 해당 영상과 같은 문제가 발견되었다.
• 개발자 도구를 보니깐fetch🔑를 통해서 각 아이템 마다 관련된 데이터들을 받고 있었다. 이것이 해결책의 실마리가 될 수 도 있을거라는 추측까지 해보았다.
• 각 id마다 해당되는 데이터를 전달하라고 멘토님께서 말씀해주셨는데 내가 잘 이해한건지 다시 한 번 봐야겠다..!
  

<script>
class ProductCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mainImage: this.props.productImg,
      blackShoes: [],
      blueShoes: [],
      pinkShoes: [],
      skyShoes: [],
      redShoes: [],
    };
    componentDidMount() { fetch('/data/ProductList/PRODUCT_DETAIL_DATA.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          blackShoes: data.DETAIL_IMAGE_DATA.product[0].detailImg,
          // blueShoes: data.DETAIL_IMAGE_DATA.product[1].detailImg,
          // pinkShoes: data.DETAIL_IMAGE_DATA.product[2].detailImg,
          // skyShoes: data.DETAIL_IMAGE_DATA.product[3].detailImg,
          // redShoes: data.DETAIL_IMAGE_DATA.product[4].detailImg,
        });
      });
  }
  }
  };</script>

- 모르는 점

• detail json으로 받아서 map을 돌리다 보니 이중으로 map을 돌려서 데이터를 꺼내야하는 상황이 생겼다.
  그러나 이렇게 map을 2번 돌리게 되면 내부 map안에 return 바로 위에 감싸주는 최상위 태그가 존재해야해서 image가 div안에 모두 들어가게 되는 문제가 생긴다.
• 이러한 과정에서 map🔑을 효율적으로 쓰는 방법에 대해서 알아보았다.

- 배운점

• map🔑을 이중으로 쓰면 내부에 감싸는 태그가 무조건 생기기 때문에 원하는 대로 결과가 나오지 않을 수 있다~
• json으로 받아온 데이터를 slice🗝를 이용해 일정한 규칙대로 잘라보는 로직도 시도해보았지만 활용해보진 않았다~

- 잘한 점과 개선할 점

• 어제 집에 와서 늦은 시간이지만 열심히 밤새 기능 구현하기위해서 노력한 내 자신 칭찬해~
• 늦게자고 일어나니 컨디션을 100% 활용하진 못하고 있다...
  프로젝트, 길게보고 너무 무리하지말자. 컨디션과 건강 관리도 실력이다~

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

• 1. 리스트 페이지 호버 기능 구현 간단하게라도 마치기 => 한 컴포넌트만 실현
• 2. 백엔드 블로깅 마치기 => 계속 미루는 중..ㅠ
• 3. 회고록 적고자기 => 오늘도 늦게 적음~
• A. 멘토님께 진행사항 받고서 기능을 어떻게 변경할 지 상의해본 뒤 다시 호버관련 기능 구현해보기
• B. 작업 과정 과정에 블로깅하면서 시간 줄이기
• C. gotoback과 무한 스크롤 관련 내용 찾아보기