7주차 주간회고

2024.03.27 ~ 04.02 (7주차)

🏇 일일 스프린트

• 2024.03.27 (수)
  • [✅] Next JS 강의 #2.2 ~ #2.10 복습
  • [✅] Next JS 퀴즈 제출
• 2024.03.28 (목)
  • [✅] Next JS 마스터클래스 졸업작품
    • [✅] Routing 완성
    • [✅] API 연결 및 데이터 출력
• 2024.03.29 (금)
  • [✅] Next JS 마스터클래스 졸업작품
    • [✅] Nav 스타일 추가
    • [✅] Home 스타일 추가
    • [✅] Books 스타일 추가
• 2024.03.30 (토)
  • [✅] Next JS 마스터클래스 졸업작품
    • [✅] MetaData 추가
    • [✅] Error 페이지 추가
    • [✅] Suspense용 스켈레톤 추가
    • [✅] Nav 스타일 수정
    • [✅] Home 스타일 수정
    • [✅] Books 스타일 수정
    • [✅] Nav 스타일 수정
    • [✅] Varcel 배포
• 2024.03.31 (일)
  • [✅] Next JS 마스터클래스 졸업작품
    • [✅] Nav 스타일 수정
    • [✅] Home 스타일 수정
    • [✅] Books 스타일 수정
    • [✅] 졸업작품 테스트
• 2024.04.01 (월)
  • [✅] 캐럿마켓 강의 #1.1 ~ #3.13
  • [✅] Challenge : Welcome to Tailwind!
• 2024.04.02 (화)

---

📒 학습 내용과 진행 상황

• 학습한 주요 개념 및 기술

  • React Conf 2021

  • use client는 CSR만 된다는 뜻이 아님, SSR 이후에 Hydration 된다는 뜻

    • Hydration 덕분에 모든 JS 파일을 받을 필요가 없어지는데 이는 성능 최적화를 의미
    • React의 Hydration에 대하여
    • 리액트의 hydration이란?

  • Server Components는 Client Components를 하위 컴포넌트로 가질 수 있지만 반대는 불가능.

  • Server Components에서 fetching된 data는 cached되지만 Client Coponents는 불가능.

  • CSR은 Metadata 사용이 불가능.

  • layout은 서로 상쇄되지 않고 중첩됨.

  • 동시성 렌더링

    • 리액트 18 이전의 리액트에서 렌더링이란 개입할 수 없는 단 하나의 동기적 처리였기 때문에 렌더링이 시작되면 개입할 수 없었고 모두 순차적으로 진행됐다. 예를 들자면 앨리스와 밥 두 사람에게 전화를 걸어야 할 때 이전 버전의 리액트는 앨리스에게 먼저 전화를 걸고 전화가 끝나면 밥에게 전화를 거는 방식이였다. 통화 시간이 짧다면 괜찮겠지만 길다면 대기 시간이 상당히 길어진다. 이 문제를 해결하기 위해 리액트 18에서 동시성 렌더링을 추가했다. 동시성 렌더링 덕분에 이제 앨리스에게 전화를 건 후 대기 상태에 들어간 다음에 밥에게 전화를 걸어 어느 전화가 더 중요한지 결정할 수 있게됐다.

  • 자동 일괄 처리

    • 식료품 쇼핑을 예로 들어서 설명하겠다. 리액트 18 이전에는 식료품 쇼핑을 할 때 먼저 요리를 시작한 후 중간중간 필요한 재료가 있을때 마다 마트에 가서 식재료를 사왔었다. 이 비효율적인 방식을 바꾸기 위해 생긴게 자동 일괄 처리다. 이제부터 요리할때 필요한 재료가 있으면 목록화 해서 한 번에 모든 재료를 구매하면 된다. 자동 일괄 처리 덕분에 state를 사용할 때마다 상태가 변하면서 생기는 렌더링 횟수를 줄이는 데 많은 도움이 되었다.

      예를 들자면 리액트 18 이전에 promise가 있거나 네트워크 호출을 하는 상황에선 상태 업데이트는 일괄 처리되지 않았다.

                  fetch('/network').then(() => {
      		        setCounter(); // 한 번 리렌더링됨.
      				setActive(); // 두 번 리렌더링됨.
      				setValue(); // 세 번 리렌더링됨.
      				  });

      하지만 리액트 18 이후에는 자동 일괄 처리가 도입됐고 promise, setTimeouts, 이벤트 콜백에서 모든 상태 업데이트가 일괄로 처리되도록 바꼈다. 덕분이 이제 리액트가 수행해야 할 작업의 상당수가 줄어듬. 이 기능을 사용하지 않으려면 flushSync를 사용하면 된다.

  • Suspense를 사용하는 이유

    • Suspense이 없었을때는 느린 컴포넌트가 하나라도 그 느린 컴포넌트 하나가 전체 페이지 로드를 늦췄다. 서버 렌더링이란 아무것도 없거나 모두 렌더링이 된 상태이므로, 느린 컴포넌트의 로딩을 늦추거나 다른 컴포넌트의 HTML을 보내달라고 요청할 수 없었는데 Suspense가 생긴 이후로 느린 컴포넌트가 있다면 Suspense로 감싸 해당 컴포넌트의 로딩을 지연시킬 수 있게 됐다.

  • 여러 컴포넌트를 따로 분할한 다음에 로드하는 것과 Suspense를 사용하는 것의 차이점은?

    • 이것도 공부하고 적음.
    • [React] Suspense
    • Suspense를 사용하자
    • React Suspense 란 무엇일까?
• 진행한 프로젝트/실습/과제
  • Next JS 졸업작품
  • Welcome to Tailwind!

---

🙀 도전과 어려웠던 점

• 겪었던 어려움이나 문제점
  • 공부를 위해 자료를 찾다보면 번역 없이 영어로만 된 자료인 경우가 많은데 이때마다 약간 벽을 느낀다. 위에 React Conf 2021같은 경우도 5시간 분량인데 이걸 자막없이 본다는게..
• 해결 시도 및 필요한 도움
  • 없음

---

📈 반성과 깨달음

---