코드잇 7주차 과제 회고

과제 설명

리액트 컴포넌트를 활용하고, 데이터를 Codeit Bootcamp API에서 가져온다.

직면한 문제와 해결방법

• API에서 데이터를 가져오기 위해 axios를 사용하는 게 어려웠다. 심지어 axios를 제대로 썼는데도 데이터 표시가 안됐다.
  -> API 데이터를 가져오는 URL을 잘못 표기했다. response.data 객체를 가져오는 것도 잘못 입력했다. API의 데이터를 제대로 해석할 줄 알아야겠다.

배운 내용

• 날짜 데이터를 일부만 특정 형식으로 가져오고 싶을 때 moment 라이브러리를 설치해서 format 메서드를 사용하면 된다.

<div>{Moment(link.createdAt).format('YYYY.MM.DD')}</div>

• 리액트에서 axios 사용법

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('url');
        setCardData(response.data.folder.links);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

KPT 회고

KEEP

• 뷰를 구성할 때 Grid를 적절히 사용했다.
• 빈 객체 대신 보여줄 이미지를 삼항 연산자를 사용해 잘 구현했다.

src={link.imageSource ? link.imageSource : '/images/noImage.png'}

PROBLEM

• 데이터를 가져올 때 map 메서드를 사용하는 것에 어려움이 있다. 많이 사용해봐야겠다.
• 데이터를 가져올 때 정확한 URL과 값을 입력하는 것에 신경써야겠다.

TRY

• axiosInstance를 만들어 사용해봐야겠다.

소감

리액트 공식문서를 읽고 있지만, 구현은 처음 해봐서 모든 게 낯설었다.
자괴감이 들 정도로 힘들었는데, 포기하지 않고 7주차 과제를 구현한 내 자신을 칭찬한다.
일단 코드를 치고 모르는 부분을 검색하고, 주변 사람들에게 물어본 게 도움이 많이 됐다.
그리고 일단 쓰는 방법을 어느 정도 알았으면 바로 구현을 해야 빨리 배울 수 있는 것 같다.
누군가 "혈이 뚫린다"고 표현했던 것처럼 리액트도 많이 쓰다보면 능숙해지겠지.

before

after