+454
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100Gyeon
requested review from
hyesungoh,
sjoleee,
Seojunhwan,
sangbooom,
metacode22,
Orchemi,
sumi-0011 and
WooWan
as code owners
hyesungoh
approved these changes
Dec 1, 2024
Comment on lines
+241
to
+248
| ### 크롬 95+ 버전에서의 Preload | ||
|
|
||
| 크롬 95+ 버전에서는 preload의 queue-jumping 동작이 개선되어 preload 기능이 더 안전해짐 | ||
|
|
||
| > queue-jumping이란? | ||
| > 브라우저는 리소스를 요청할 때 queue에 쌓아서 순차적으로 처리합니다. | ||
| > 기본적으로 브라우저는 HTML 파일을 읽고, 필요한 스크립트나 스타일시트를 순서대로 로드합니다. | ||
| > 하지만 preload를 사용하면, 중요한 리소스를 우선적으로 로드하도록 **큐에서 뛰어넘을 수 있습니다**. |
Comment on lines
+265
to
+288
| - 스크롤을 위한 큰 DOM 요소 | ||
| - `position： relative`를 가지는 작은 컨테이너 DQM 요소 (영상에서 ul에 해당) | ||
| - 컨테이너 내부에 위치하고 `position： absolute`이며 `top`, `left`, `width`, `height` 등을 설정한 자식 요소들 | ||
|
|
||
| [react-window](https://github.com/bvaughn/react-window)는 [react-virtualized](https://github.com/bvaughn/react-virtualized) 개발자 Brian Vaughn이 다시 만든 라이브러리 | ||
| smaller, faster, more tree-shakeable, beginner-friendly | ||
|
|
||
| > 두 라이브러리가 어떻게 다른지 개발자가 직접 설명한 [글](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized)이 있네요 (둘 중에는 react-window를 사용하라고 권장하고 있습니다) | ||
| > | ||
| > 토스증권에서는 `react-virtuoso`, `@tanstack/react-virtual`을 상황에 맞게 사용 중이라고 해요 | ||
| > `react-virtuoso`는 선언적이고, `@tanstack/react-virtual`은 headless라서 커스텀 하기 좋다고 합니다 | ||
| > | ||
| > https://npmtrends.com/@tanstack/react-virtual-vs-react-virtualized-vs-react-virtuoso-vs-react-window | ||
| > 4가지를 같이 비교해 보니, 확실히 `react-virtuoso`, `@tanstack/react-virtual`이 가볍긴 하네요 | ||
| >  | ||
|
|
||
| ### 웹 플랫폼의 발전 | ||
|
|
||
| `content-visibility: auto`를 설정하면 화면 밖 콘텐츠의 렌더링과 페인팅을 필요한 시점까지 지연할 수 있음 | ||
| 렌더링 비용이 큰 HTML 문서에 적용하면 좋음 | ||
| 동적인 콘텐츠 목록을 렌더링하는 경우에는 `react-window` 같은 라이브러리 사용하는 게 좋음 | ||
|
|
||
| > https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility | ||
| > [(번역) CSS content-visibility를 이용해 렌더링 성능 향상 시키기](https://velog.io/@superlipbalm/improving-rendering-performance-with-css-content-visibility) |
sangbooom
approved these changes
Dec 1, 2024
챕터_13/백지연.md
Outdated
|
|
||
| ### 점진적 정적 생성(ISR) | ||
|
|
||
| **SSR + 정적 렌더링 = ISR** |
There was a problem hiding this comment.
저는 여기 읽으면서 SSG + revalidate 로 표현하는게 더 정확할 것 같다 생각했어요 💭
헷갈리게 ISR을 SSR + 정적 렌더링으로 설명하는 책은 처음이였습니다 ☠️☠️
There was a problem hiding this comment.
책을 좀 더 비판적으로 읽었어야 하는데 그대로 정리했네요 ㅋㅋㅋㅋ
저도 상범님 의견에 동의해요👍
|
|
||
| ## 엣지 SSR | ||
|
|
||
| CDN의 모든 지역에서 서버 렌더링 가능, 거의 0에 가까운 콜드 부트 시간(함수가 처음 실행될 때 발생하는 지연 시간) |
There was a problem hiding this comment.
제가 잘못알고 있는걸수도 있는데.. 엣지 SSR이랑 콜드 스타트 이슈랑은 무관하지 않나요? 👀
콜드 스타트 주요 원인은 애플리케이션 코드 사이즈나 라이브러리 크기라고 알고 있어서요 💭
물론 가까운 서버에서 수행하다보니 지연은 거의 없을 수 있지만.. 책에서 엣지 SSR이면 콜드 스타트가 거의 0에 가까운게 특징이라고 말한게 개인적으로 의아하네요 🤔
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
이번 챕터는 유익했습니다👍