[6주차] 13장, 14장 내용 정리 #33
Open
Conversation
This file contains hidden or 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
KimGaeun0806
requested review from
bokeeeey,
haryan248,
hyoribogo,
pyi7628 and
reeseo3o
as code owners
reeseo3o
approved these changes
Jun 17, 2025
김가은/CH_13 렌더링 패턴/README.md
Outdated
| - **TTI (Time to Interactive)**: 페이지 로드 시작부터 사용자 입력에 빠르게 응답할 수 있을 때까지 걸리는 시간 | ||
| - **LCP (Largest Contentful Paint)**: 페이지의 주요 콘텐츠를 로드하고 렌더링하는 데 걸리는 시간 | ||
| - **CLS (Cumulative Layout Shift)**: 예상치 못한 레이아웃 변경을 방지하기 위한 시각적 안정성 측정 | ||
| - **FID (First Input Delay)**: 사용자가 페이지와 상호작용한 시점부터 이벤트 핸들러가 실행될 수 있는 시점까지의 시간 |
Member
There was a problem hiding this comment.
얘가 24년 3월부터 INP라는 지표로 대체되었다고 합니다!
아까 FID지표 낯설다고 하셨는데 INP로 대체된 후 덜 등장해서 그런게 아닐까...! 해서 데려와봤어요 ㅋㅋ
velog
Google Developers
김가은/CH_13 렌더링 패턴/README.md
Outdated
| - 상품 페이지나 블로그 페이지는 보통 고정된 템플릿에 데이터를 채워 넣는 방식 사용 | ||
| - 이 경우 템플릿과 동적 데이터를 병합하여 서버에서 개별 페이지를 생성할 수 있음 | ||
| - Next.js의 Pages router의 경우 동적 경로 기능은 `getStaticPaths()` 함수 사용 | ||
| - App router의 경우 동적 경로 기능에 `generateStaticParams()` 함수 사용 |
김가은/CH_13 렌더링 패턴/README.md
Outdated
| #### 기존 페이지 업데이트 | ||
| - 각 페이지에 적절한 타임아웃을 정의하고, **시간이 경과할 때마다 페이지가 다시 유효한지 검증** | ||
| - 페이지 재검증이 완료될 때까지 사용자는 이전 버전의 페이지를 계속 보게 됨 | ||
| - **Stale-While-Revalidate** 전략 사용 -> 캐시에 데이터가 있으면 즉시 반환, 백그라운드에서 최신 데이터 다시 요청 |
김가은/CH_14 리액트 애플리케이션 구조/README.md
Outdated
|
|
||
| <br /> | ||
|
|
||
| ### Pages Router vs App Router |
bokeeeey
approved these changes
Jun 18, 2025
김가은/CH_14 리액트 애플리케이션 구조/README.md
Outdated
| <br /> | ||
|
|
||
| ## 14.2 최신 리액트 기능을 위한 애플리케이션 구조 | ||
| ### 14.2.1 리덕스 |
김가은/CH_14 리액트 애플리케이션 구조/README.md
Outdated
| ## 14.2 최신 리액트 기능을 위한 애플리케이션 구조 | ||
| ### 14.2.1 리덕스 | ||
| - 공식 문서에서 특정 기능에 대한 로직을 한 곳에 모아두는 것을 강력하게 권장 | ||
| - 특정 기능 폴더 내에서, 해당 기능의 리덕스 로직은 단일 슬라이스 파일로 작성되어야 하며, 가급적이면 리덕스 Toolkit의 createSlice API를 사용하는 것이 좋음 |
Member
There was a problem hiding this comment.
zustand 스토어가 많아지면 유사한 방식으로 사용하는데 좋은 패턴인거같아요
슬라이스 팩토리같은 너낌입니다
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
이번 장은 프론트엔드와 리액트에 대해 공부한 느낌이었습니다.
CSR/SSR/SSG같은 렌더링 패턴들은 면접 준비할 때 검색하면 나오는 특징들 줄줄 외워갔던 기억이 있는데, 이번에 잘 몰랐던 다른 렌더링 패턴들도 공부할 수 있어서 유익했습니다.
시간 되실 때 이 사이트도 읽어보시면 좋을 것 같습니다.
전 아직 다 읽어보지는 못했습니다...
14장은 리액트 약간 겉핥기 느낌이 있었습니다.
회사 다니고 계신 분들이라면 아마 여러 폴더구조를 경험해보며 간접적으로 알고 있을 만한 내용이 많지 않았나 싶습니다.
폴더구조야말로 회사에서 마음대로 바꾸기 쉽지 않은 부분이라... 사이드프로젝트에서 이것저것 시도해보는 게 재밌었던 것 같습니다 🙋🏻♂️
6주동안 다들 고생하셨습니다~
책이 약간 지루하고..ㅋ 당장 적용해볼 수 있는 내용이 많지 않아 스터디가 쉽지 않았지만 도움이 많이 되었습니다.
하지만 디자인 패턴들은 확실히 바로바로 사용해보지 않으면 머릿속에서 증발할 것 같기도 하네요.. 😂