[TIL] 4월 27일 기록

오늘의 할 일

• ✅ 📌 ~20:00 팀 데일리 미션 출제
• ✅ 📌 ~23:59 멘토 데일리 미션 답변
• ✅ 📌 ~다음날 06:00 팀 데일리 미션 답변 - 일부는 낼 오전 강의를 듣고 작성할 예정
• ✅ 📌 TIL 작성

 

오늘의 나는 무엇을 잘했을까?

리액트의 setState에 깊은 고찰을 했다. 같은 값을 setState해도 렌더링 무한루프가 빠지는 문제를 발견해서 다른 팀원들과 얘기해보는 시간을 가졌다. (아직 이유는 못 찾았지만) 막히는 문제에 대해 같이 공유하려고 계속 노력하고 있다👍

 

오늘의 나는 무엇을 배웠을까?

React로 데이터 다루기

React에서 fetch 사용하기

// api.js
async function getReviews() {
  const response = await fetch("<https://learn.codeit.kr/8319/film-reviews>");
  const result = await response.json();
  return result;
}

export default getReviews;

import { useState } from "react";
import ReviewList from "./ReviewList.js";
import getReviews from "../api.js";

function App() {
  const [items, setItems] = useState([]);

  // 서버에 아이템 데이터 가져오기
  const handleLoadItem = async () => { 
    const { reviews } = await getReviews();
    setItems(reviews); // 👈 fetch로 데이터 가져와서 리액트의 state에 저장
  };

  return (
    <div>
      <div>
        <button onClick={handleLoadItem}>불러오기</button>
      </div>
      <ReviewList items={items} onDelete={handleDelete} /> // 👈 데이터를 컴포넌트에 반영
    </div>
  );
}

export default App;

useEffect 메소드

버튼을 누르지 않고, 렌더링될 때 바로 서버의 데이터를 불러오고 싶어서 아래처럼 작성했다.

import { useState } from "react";
import ReviewList from "./ReviewList.js";
import getReviews from "../api.js";

function App() {
  const [items, setItems] = useState([]);

  // 서버에 아이템 데이터 가져오기
  // getReviws 함수는 fetch로 서버에 데이터를 get해서 return 합니다.
  const handleLoadItem = async () => { 
    const { reviews } = await getReviews();
    setItems(reviews); 
  };

  handleLoadItem(); // 👈 컴포넌트 내부에서 호출

  return (
    <div>
      <div>
        <button onClick={handleLoadItem}>불러오기</button>
      </div>
      <ReviewList items={items} onDelete={handleDelete} /> // 👈 데이터를 컴포넌트에 반영
    </div>
  );
}

export default App;

하지만 No!! 🚫 setItems에서 계속 새로운 state 값이 바뀐다고 인식되어 무한루프에 빠짐 🚫

네트워크 탭을 보면 fetch가 무한루프로 실행된다.

⇒ 처음 렌더링될 때만 한 번 호출하려면 useEffect 훅 사용하기

import { useState } from "react";
import ReviewList from "./ReviewList.js";
import getReviews from "../api.js";

function App() {
  const [items, setItems] = useState([]);

  // 서버에 아이템 데이터 가져오기
  const handleLoadItem = async () => { 
    const { reviews } = await getReviews();
    setItems(reviews); 
  };

  useEffect(() => // 👈 useEffect 훅
	handleLoad(); 
  }, []);

  return (
    <div>
      <div>
        <button onClick={handleLoadItem}>불러오기</button>
      </div>
      <ReviewList items={items} onDelete={handleDelete} /> // 👈 데이터를 컴포넌트에 반영
    </div>
  );
}

export default App;

 

특강 세션 (feat. 메이커준)

• 개념을 공부하는 데 집중하기보단 활용할 수 있는 맥락을 찾는 것으로!
• 기술스택에만 집중 X, 기업에서 원하는 인재상을 고민하자. 사용자 경험을 고민한 흔적이 있는가? → 기업에 따라 요구사항이 달라지기 때문에 이걸 가장 먼저 파악하는 것이 중요하다.
• 나와 맞는 회사일까? → 가고싶은 기업의 인사이더와 커피챗을 갖는게 좋은데, 함께 만나는 건 아니더라도 메일 답장 등은 받을 수 있음. 연락을 취해보는 것도 도움이 된다.
• 모든 기술을 완벽히 습득하는 것은 어렵다. 그 중에서 내가 좀 더 집중할 수 있는 분야(대용량 데이터의 퍼포먼스 관리, 사용자 경험을 고려 등)를 생각해보자.
• 동작되는 서비스를 빠르게 만들어보는 게 가장 좋은 방법..(처음부터 끝까지의 과정을 겪어보는 것) → 하드코딩 없이 노툴?로도 해보는 것도 좋은 경험이 될 것
• 아직은 많이 아는 게 없기 때문에 모르는 부분에 너무 고민하진 말고 1시간 정도 넘어선다면 주변의 도움을 받는 것이 더 좋음
• 도움 요청을 적극적으로 하자! 잘 하는 주니어와 못 하는 것의 차이점은 불확실한 문제 상황에서 요구 사항을 얼마나 잘 쪼갤 수 있는지 ← 보통 혼자서 하기 어렵기 때문에 그래서 소통(공유)을 많이 하는 것이 중요.
• 혼자서만 공부하는 것은 쉽게 지치기 마련. 힘들때 같이 공부를 한다던가 협력을 한다던가 필요하다
• 말하는 경험을 많이 쌓기😂
• 내가 무언가를 설명할 때 이를 잘 한것인지 불확실성이 들 때, 이걸 글로 한 번 정리해보자. 어차피 중요한 토픽은 계속 여러 번 말하기 때문에 글로 써두고 나중에 이걸 보면서 내가 잘못 알고 있던 점이나 개선점이 무엇인지 파악
• AI 기술이 도입되면서 여기서 좀 더 내가 무슨 문제를 해결할 능력이 있는가, 서비스를 어떻게 더 퍼포먼스를 고려했는가에 대한 장점을 만들어야 한다. 즉 문제 해결 프로세스 경험!
• 매번 기술을 모르면서 계속 파고파고 조사하면 지칠 수 있다.. 그럴 때마다 항상 “나는 지금 뭐하려는 거지?”를 떠올려야 한다. 그럴수록 요구사항에서 더 작은 요구사항으로 쪼개서 설정을 해야 하고, 내가 공부를 하면서 그 생각을 리마인드 하기
• 글 작성 시, 일반적으로 조사한 걸 쓴다기보다 내가 이걸 왜 썼고, 뭐가 더 좋았는지를, 아니면 중요한 게 뭔지 중점적으로 쓰면 글을 쓰는 실력이 늘어질 것이다.
• 과제 형태의 테스트라면 지금 위클리 미션으로 충분할 듯, 알고리즘 테스트라면
  • 흰색지대 - 내가 확실히 아는 문제
  • 회색지대 - 잘 모르겠거나 많은 시간이 필요한 문제
  • 검은색지대 - 내가 아예 모르는 문제
  회색 지대에 속하는 문제들을 위주로 문제를 푸는 것이 좋다. 같은문제를 다른 방법으로도 풀어보는 자세가 중요 ← 응용력이 많이 향상된다. 꾸준히 푸는 게 어렵다면 일주일에 두세개씩 푸는 것부터 실천!.
• 혼자 고민하고 삽질하는 것도 좋지만 그런 시간을 많이 갖는지에 대해 계속 생각해봐야 한다. 피드백을 많이, 꾸준히 받는 것이 뭣보다 중요하다

 

오늘의 나는 무엇이 궁금했나?

• setState를 컴포넌트 내부이면서 이벤트 핸들러 함수 외부에서 호출하면 무한루프가 발생하는데, setState에 전달하는 값이 동일하면 리렌더링이 안될 거 같은데 그래도 무한루프가 발생해서 그 이유가 궁금했다. → 오늘 멘토링에서 질문해본 결과, 아직 답은 찾지 못한 상황이다.. 루크도 생소해 하는 듯 하고, 이 코드 자체가 잘 쓰이지 않는 것 같다. 그래도 너무 궁금해..! 꼭 답을 찾고야 말겠다. 

import { useState } from "react"; 

function App() { 
  const [items, setItems] = useState([]); 
  const handleLoad = () => { setItems(items); }; 
  
  handleLoad(); // 👈 이러면 무한루프. why? 
  
  return ( 
    <div> ... </div> 
  ); 
} 
  
export default App;

 

오늘 하루 회고

[오늘 궁금한 점]에서도 적었지만 useEfftect를 배우면서 난데없이 setState에 또다시 막혀서 ㅋㅋㅋ 그걸 고민하느라 엄청 시간을 썼다.. 항상 강의를 빨리 들을 수 있도록 다짐글을 써도 역시 뭔가 하나가 궁금해지면 계획을 제대로 지키질 않은 점이 내가 크게 개선해야될 점이라고 생각이 들었다. 

특히 이번주부터 리액트를 이용한 위클리 미션을 시작하게 될텐데 useState 훅부터 이리 난관이니... 한다면 어떻게든 된다지만 막상 시작하기 직전이 제일 막막한 것 같다 ㅋㅋㅋㅋ 

그래도 어떡해 해야지...! 여튼 오늘 좀 삽질을 많이 했지만 그래도 성장하는 과정 중 하나라고 느꼈다.

특히 내가 모르는 건 다들 모르는구나를 느꼈고, 질문하는 데 있어 주저하지 말아야겠다! 🔥🔥

(그리고 나중에 내가 이 글을 읽으면서 많이 성장했구나를 느낄 수 있기를🙏)