230628(수)

🎄 성장일지 5.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!
🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기!

🔑 오늘의 학습 키워드

strict mode 켜두고 fetching data

strict mode를 간단히 설명하면 컴포넌트를 2번 렌더링하게 하는 것이다. 이를 통해 렌더링 중에 발생하는 여러 side effect를 찾아낼 수 있다. 다만, 일반적인 개발 중에 렌더링이 2번 되기에 다소 귀찮은 문제가 발생한다. 예를 들면, data를 요청해서 받아온 후, 이를 state로 관리할 때이다. 해당 컴포넌트가 2번 렌더링되면서 요청을 2번 보내게 되고 자연스럽게 state는 2번의 데이터가 반영된다. 해서 공식문서를 참고하여 이를 해결해보았다. ignore라는 flag 변수를 두어서 렌더링 중에는 요청을 보내지 않도록 하였다.

// 그냥 요청 보내는 경우
const [data, setData] = useState(null);

useEffect(() => {
  fetch('https://api.example.com/items')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

// ignore 변수를 통해 렌더링 중에는 요청을 보내지 않는다.
const [data, setData] = useState(null);
let ignore = false;

useEffect(() => {
  const startFetching = async () => {
    const res = await fetch('https://api.example.com/items');
    const data = await res.json();
    if (!ignore) setData(data);
  };

  startFetching();
  
  return () => { 
    ignore = true;
  };
}, []);

🩹️ 오늘의 실패

• api 연동 실패: 우리 백엔드 서버와 api를 연동하고 싶은데, 생각보다 쉽지 않다. 같이 명세를 작성해도 개발 시에는 많은 부분들이 수정되고 바뀔 수 있다는 것을 배울 수 있었다.

🍖 오늘의 성공

• 상품 상세 페이지 구현!

📝 요약 및 하루 간단 회고

아고… 오늘은 개발도 개발이지만 크롱과 면담이 있던 날이었다. 앞으로의 계획과 고민 그리고 취업과 관련된 이야기를 많이 나누었다. 크롱 정도의 시니어 개발자와 1대1로 가볍게 등산하면서 대화를 할 수 있다니… 새삼스레 정말 소중한 시간이라고 느꼈다.

참고

• React 공식문서 - Escape hatches: Synchronizing with Effects
• React 공식문서 - Strict Mode