과제 체크포인트

배포: https://nemobim.github.io/front_6th_chapter4-2/

과제 요구사항

• 배포 후 url 제출

• API 호출 최적화(Promise.all 이해)

• SearchDialog 불필요한 연산 최적화

• SearchDialog 불필요한 리렌더링 최적화

• 시간표 블록 드래그시 렌더링 최적화

• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

벌써 10주가 지났다는 게 실감이 잘 안 나네요...!! 다음주도 과제해야 될 거 같은 그런 기분 입니다. 매일 퇴근하고 젭에 들어와서 항해 사람들과 만나고 과제하고 소통하면서 알게 모르게 하루 루틴이 만들어진거 같은데 이제는 그 시간을 마무리해야 한다는 게 시원섭섭하게 느껴집니다.

혼자서 진행했었였다면 아마 중간에 포기했을지도 모르지만 좋은 팀원들, 좋은 사람들을 만나 함께 했기에 끝까지 과제를 제출할 수 있었어요. 서로 모르면 알려주고 도와주면서 배운 것도 많고, 제가 처음에 생각했던 것 그 이상으로 더 많이 얻어가는 시간이었습니다. 실무에서는 접하기 어려운 내용들을 공부할 수 있었고 과제를 통해 직접 부딪히며 경험해볼 수 있었던 점도 좋았어요. 마지막 과제에서는 코드 한 줄에 따라 성능에 어떤 영향을 줄 수 있는지 느낄 수 있었고 앞으로 비슷한 상황이 생긴다면 어떻게 접근하면 좋을지 감이 조금은 생긴 것 같습니다!

다른건 몰라도 10주 전 보다는 나은 사람이 됐다고 말 할 수 있을거 같아요. 고생한 만큼 배운 것도 많았고 이 경험이 앞으로도 좋은 밑바탕이 될 것 같습니다.

코치님도 너무너무 고생많으셨습니다!!!!!!!!!!!!!!!!!! 값진 경험들 나눠 주셔서 정말 감사했습니다. 잘 배우고 닦아 잘 써먹는 개발자가 되겠습니다.

기술적 성장

promise.all

• Promise.all 기본 동작

Promise.all([promise1, promise2, promise3])
  .then(results => {
    // 모든 Promise가 성공했을 때
    // results는 [result1, result2, result3] 배열
  })
  .catch(error => {
    // 하나라도 실패하면 여기로
  });

• 잘못된 사용법

const results = await Promise.all([
  await fetchUser(),    // 먼저 실행되고 완료 기다림
  await fetchPosts(),   // 그 다음 실행됨
  await fetchComments() // 마지막에 실행됨
]);

// TODO: 이 코드를 개선해서 API 호출을 최소화 해보세요 + Promise.all이 현재 잘못 사용되고 있습니다. 같이 개선해주세요.
const fetchAllLectures = async () => await Promise.all([
  (console.log('API Call 1', performance.now()), await fetchMajors()),
  (console.log('API Call 2', performance.now()), await fetchLiberalArts()),
  (console.log('API Call 3', performance.now()), await fetchMajors()),
  (console.log('API Call 4', performance.now()), await fetchLiberalArts()),
  (console.log('API Call 5', performance.now()), await fetchMajors()),
  (console.log('API Call 6', performance.now()), await fetchLiberalArts()),
]);

Promise.all 배열 안에서 await를 사용하면 병렬이 아닌 순차 실행이 된다.

React 컴포넌트에서 isLazy

isLazy는 컴포넌트의 렌더링이나 작업을 지연시킬지 결정하는 boolean prop. (드래그앤 드랍 최적화할때, 다른 부분까지 렌더링 되던게 PopOver에 isLazy 옵션을 주니 해결되었다.)

// isLazy={true} - 지연 렌더링
<Component isLazy={true} />

// isLazy={false} - 즉시 렌더링 (기본값)
<Component isLazy={false} />

과제 피드백

• 마지막 과제로 너무 좋았습니다.. 분량이 할 만 하다고 느껴졌어요 (저희까지만 초코우유 마시고, 다음 기수는 흰 우유 어떠세요)

리뷰 받고 싶은 내용

• 드래그 부분에서 이 한 줄로 불필요한 리렌더링 문제가 해결됐는데... 사실 정확한 원리를 아직 잘 모르겠습니다. 팀원분이 "이거 쓰면 돼요!" 라고 알려주셔서 그대로 썼는데, 어떻게 isLazy를 떠올릴 수 있었는지, 그 사고 흐름이 궁금합니다. 어떤 점에서 이 속성이 필요하다고 판단됐는지 설명 들을 수 있을까요..

• 이번 과제에서 한 최적화 작업이 솔직히 말하면 거의 메모이제이션 떡칠이었던 것 같아요....성능 최적화 관련해서는 경험이 전무해서 그런데, 처음 시작할 때 어떤 부분부터 접근해보면 좋은지 조언을 듣고 싶습니다. 지금까지 실무나 프로젝트에서 성능 이슈를 크게 겪은 적이 없어서 앞으로 어떻게 공부하고 연습해보면 좋을지 팁이 있을까요..