📝김민재 Day(47) 73일차 WE_MOTIVATION_DIARY

- TODAY I LEARN ERROR 🦠

• 내가 만난 오늘의 에러 코드 적기

<script>
componentDidMount() {
fetch('/data/ProductList/PRODUCT_DETAIL_DATA.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          productDetailImg: data.DETAIL_IMAGE_DATA.detailImg,
        });
      });
  }
  </script>

• 부모 컴포넌트에서 fetch하여 받은 데이터를 어떻게 꺼내서 쓸까?!

- HOW TO FIX MY ERROR 💊

• ERROR를 해결한 KEYWORD 🔑
• spread🔑 문법을 사용하여 fetch 메서드로 받아온 객체 혹은 배열을 펼쳐 변수에 새로 저장할 수 있다.

<script>
changeDetailProductImage = e => {
// fetch 하여 저쟝한 state 값, productDetailImg
    const { productDetailImg } = this.state;
    const detailData = [...productDetailImg];
    // 배열에 넣어서 사용하기!
  };</script>

- 모르는 점

• 이러한 기능을 구현하기 위해서 우선적으로 fetch 메서드로 받아온 데이터를 임시적으로 저장해서 필요가 있었다.
• 이러한 과정에서 spread🔑와 rest🗝문법을 찾아보게 되었다.

- 배운점

• spread🔑를 통해서 fetch로 받아온 배열을 새로운 변수에 저장하여 사용할 수 있었다.
• spread🔑을 찾아보니 비슷한 문법 rest🗝 를 배우게 되었다.
• rest🗝는 객체, 배열, 그리고 함수의 파라미터에 사용하여 객체와 배열에 비구조화 할당 문법을 통해 원하는 값을 밖으로 꺼낼 수 있다.

- 잘한 점과 개선할 점

• 비록 아침이지만 열심히 다이어리를 적으려고 한 점
  칭찬!
• 집에서 공부하다 보니 다소 긴장감이 다소 풀어진 점! 다음 주말에는 위워크든 카페든 어디든 나가서 공부하자~

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

• 1. 리스트 페이지 호버 기능 구현 간단하게라도 마치기
• 2. 백엔드 블로깅 마치기
• 3. 회고록 적고자기