자바스크립트 Map을 사용해야하는 이유

  • Map 은 해시테이블을 사용하여 구현되어있다.
  • 값에 접근하기 위한 복잡도는 일반 객체와 Map모두 O(1)로 동일하다. 하지만 요소의 개수를 구하는 경우 Map 은 O(1)의 시간복잡도를 가지지만, 일반 객체의 경우 O(n)이 된다.
    • 일반 객체가 O(n)이 되는 이유는 객체의 key 배열을 구하고 -> key 배열의 length를 계산해야 하므로
  • Map은 key 의 타입에 제한이 없다. 반면 객체의 경우는 key 타입이 string으로 제한된다.
  • 객체는 원소의 입력순서에 따라 출력순서를 보장하지 않지만 Map은 보장된다.
  • Map에는 Iterator Interface가 구현되어있다. 따라서 forEach를 사용 할 수 있다.

RSC (React Server Component) 와 SSR (Server-Side Rendering)의 차이점

두개 다 서버에서 데이터를 하이드레이션 해주는 것은 동일하다. 그런데 왜 SSR이 있는데 RSC가 도입되었을까? 참고

  1. RSC는 SSR에서 최상위(top-level) 페이지 단위로 강제되는 서버사이드 렌더링을 컴포넌트 단위로 가능하게 한다.

    • SSR 에서는 페이지에서 하나라도 실시간 데이터가 필요하다면, 해당 페이지는 SSG 기법을 사용하지 못한다. 강제로 그 페이지는 SSR을 사용 할 수 밖에 없다.
    • RSC는 이러한 문제를 해소한다. 서버컴포넌트를 사용하여 각각의 컴포넌트가 서버에서 호출을 하고, 서버에서 렌더링을 한다. 따라서, 하나의 페이지 내에서 컴포넌트 별로 여러 렌더링 기법(SSR,SSG,ISR,CSR)을 사용 할 수 있다.

  2. RSC 는 실제로 client 번들에 포함되지 않는다.

    • SSR의 코드는 javascript에 포함된다.
    • 하지만 RSC는 번들에 포함되지 않고, json 형식으로 직렬화 된 정보를 브라우저에 제공하여 성능상 좋다.

웹사이트 성능 지표 단어 정리 🧐

크게 페이지 렌더링을 측정하는 렌더링 지표와, 렌더링 이후 상호작용을 측정하는 상호작용 지표가 있다.

🤖 렌더링 지표 - TTBT (Time To First Byte)

  • 페이지 요청 시, 서버에서 데이터의 첫번째 바이트가 도착하는 시점 (서버성능)

🤖 렌더링 지표 - FB (First Paint)

  • 브라우저가 스크린에 무언가를 처음 렌더링 하는 시간.

🤖 렌더링 지표 - FCP (First Contentful Paint)

  • 페이지가 로드 되기 시작하고, 컨텐츠 요소의 일부가 화면에 렌더링 될 때 까지의 시간

(FB와 FCP는 다른 지표이지만 같이 일어날 수 있음)

🤖 렌더링 지표 - LCP (Largest Contentful Paint)

  • 웹사이트 페이지 로딩 속도 지표. 모든 HTML 요소들이 브라우저 화면에 렌더링 완료되는데 까지 걸리는 시간
    • 스크롤 없이 볼 수 있는 부분을 로딩하는데 걸리는 시간
    • 왜 스크롤없이 볼 수 있는 부분만 포함하는가? -> 중요한 정보들은 스크롤 없이도 볼 수 있으므로!

최적화 방법

  • 서버 최적화
    • CDN으로 라우팅하기
    • 캐싱하기
  • 렌더링을 block 하는 요소 제거하기
    • CSS 축소 (중요하지 않은 CSS는 defer loading )
    • JS 축소
  • 느린 리소스 최적화
    • img,svg,video등 최적화 및 압축하기
  • 서버사이드 렌더링/pre-rendering 사용

🤖 렌더링 지표 - CLS (Cumulative Layout Shift)

  • 사용자에게 페이지가 처음 로드 된 후, 최종적으로 변화되는 척도. 즉 사용자에게 발생하는 레이아웃 이동 (Layout Shift) 빈도를 측정한다.

최적화 방법

  1. 이미지/동영상 요소 크기를 미리 지정해놓거나, 스켈레톤 UI를 넣어주기.
  2. layout 변경을 트리거하는 css 요소 사용보다 transform 애니메이션을 사용하기

🎃 상호작용 지표 - TTI (time to Interactive)

  • 페이지가 완전히 상호작용 가능하게 되는 시점.

🎃 상호작용 지표 - TBT (Total Blocking Time)

  • FCP와 TTI 사이 총 시간

🎃 상호작용 지표 - FID (First Input Delay)

  • 사용자가 페이지의 링크를 클릭하거나, 버튼을 클릭하는 등 상호작용을 처음 했을 때부터, 브라우저가 반응 할 때 까지의 시간

🎃 상호작용 지표 - FID (First Input Delay)

사용자가 페이지와 상호작용한 시간부터 브라우저가 실제로 이벤트 핸들러 처리를 시작 할 수 있는 시간


프론트엔드 렌더링 방식 별 성능 지표

Only SSR

  • 👍 FB / FCP
  • 👍 TTI
  • 👎 TTFB (서버에서 페이지 생성 시 시간 걸림)

SSR + CSR

  • 👎 TTFB (서버에서 페이지 생성 시 시간 걸림)
  • 👎 FCP (CSR 방식으로 클라이언트 사이드에서 렌더링 된 후 서버에 한번 요청을 보내야하므로)
  • 👎 TTI (SSR 이후 동작은 CSR 방식으로 하므로)

CSR

  • 👍 TTFB
  • 👎 FCP
  • 👎 TTI

SSG

  • 👍 TTFB
  • 👍 TTI
  • 👍 FCP

돌아보기

  • 내가 여전히 너무나 많은 것을 모르고있고, 열심히 공부해야한다는 것을 다시 한번 깨달았다. 단순히 일을 쳐낸다는 것에서 끝나지 않고 개발 자체를 잘 하고 싶다. 개발 자체를 잘하고 싶다는건 뭔가 생각해보면 많은 것들을 알고, 그에 따라서 기술결정을 잘하고, 따라서 제품을 만들 때 의사결정에 기술적인 시각을 잘 녹여낸다는 것이 아닐까..갈 길이 멀군
  • 강아지의 수치가 안좋아서 신경이 많이 쓰인다.
  • 두달전부터 그릭요거트를 만들어먹고 있다. 거의 매일먹는데 아침으로 딱 이다ㅎㅎ