Quartz sync: Jul 1, 2025, 9:23 AM

Author: codeyoma

content/Computer Science/7 Applications Development/Frontend/React/React Test.md

@@ -1,6 +1,8 @@
 ---
-created: 2025/4/13 09:58:35
-modified: 2025/4/13 10:50:44
+description:
+aliases:
+created: 2025-05-18
+modified: 2025-07-01
 ---
 
 # Lint
@@ -22,6 +24,14 @@ modified: 2025/4/13 10:50:44
 	- testing-library/jest-dom
 	- snapshot
 		- react-test-renderer
+- react testing library
+- enzyme
+- vitest
+- cypress
 
 # Performance
-- [React Performance: Common Problems & Their Solutions \| Product Blog • Sentry](https://blog.sentry.io/react-js-performance-guide/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy26q2-traceblog&utm_content=newsletter-s-read)
+- [React Performance: Common Problems & Their Solutions \| Product Blog • Sentry](https://blog.sentry.io/react-js-performance-guide/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy26q2-traceblog&utm_content=newsletter-s-read)
+
+
+# 문서화
+- [Storybook](https://storybook.js.org/)

content/Computer Science/7 Applications Development/Frontend/Terms/Rendering Pipeline.md

@@ -2,7 +2,7 @@
 description:
 aliases:
 created: 2025-05-18
-modified: 2025-06-23
+modified: 2025-07-01
 ---
 
 - React Rendering Pipeline
@@ -20,14 +20,15 @@ modified: 2025-06-23
 			- Current Fiber Tree with WIP Fiber Tree
 	- Commit Phase
 		- DOM Mutation
-			- 실제 돔 변경
+			- reactDOM이 실제 DOM 수정
+			- 이후 브라우저가 렌더링 파이프 수행
+				- 브라우저는 변경된 부분에 대해서만 렌더 트리 갱신
+				- dom파싱은 reactDOM이 이미 직접 DOM API 호출하고 수행
+				- css파싱은 파일이 변경되지 않는한 파싱 재수행 X
 		- side effect
 		- ref 설정
 		- useLayoutEffect 실행
 		- 컴포넌트 마운트 / 언마운트 처리
-		- 브라우저에게 DOM 업데이트 위임
-			- 상태 업데이트로 인한 부분 변경이라면 변경된 DOM 요소부터 layout, painting, compositing 수행
-				- parsing, render tree construction은 건너뜀
 - Browser Rendering Pipeline
 	- Parsing
 		- HTML -> DOM

content/Computer Science/7 Applications Development/Frontend/Terms/SSG, SSR, ISR.md

@@ -7,7 +7,6 @@ modified: 2025-06-23
 
 - | 항목     | SSG | SSR | ISR         |
 | ----------         | -------   | -------      | ---------------          |
-| ------------------ | --------- | ------------ | ------------------------ |
 | 렌더링 시점        | 빌드 시   | 매 요청 시   | 빌드 시 + 주기적 갱신    |
 | 첫 응답 속도       | 매우 빠름 | 느릴 수 있음 | 매우 빠름                |
 | 최신성             | 낮음      | 매우 높음    | 중간 (주기적 최신화)     |

content/Computer Science/7 Applications Development/Frontend/Terms/전역, ATOM 상태 필요성.md

@@ -1,6 +1,8 @@
 ---
-created: 2025/4/14 09:11:45
-modified: 2025/4/14 09:14:47
+description:
+aliases:
+created: 2025-04-14
+modified: 2025-07-01
 ---
 
 - 상태를 부모가 가지면, 자식 컴포넌트 전체가 [[Rerendering]], 그렇다고 각 자식에게 상태를 보유하게하면 부모가 상태를 알 수 없는 문제 ^f7d38f
@@ -10,7 +12,10 @@ modified: 2025/4/14 09:14:47
 	- prop drilling, callback 호출..
 - 트리 구조에서의 문제를 해결하자!
 	- 전역 상태
+		- 탑다운 방식
 		- prop drilling 방지
 		- 소비한 곳만 렌더링
 	- atom 상태
-		- 전역 상태가 커지면 렌더링 비용도 커지니 잘게 쪼개자
+		- 바텁업 방식
+		- 전역 상태가 커지면 렌더링 비용도 커지니 잘게 쪼개자
+		- 상태를 조합 가능

content/Computer Science/7 Applications Development/Frontend/Terms/테스팅, 문서화.md

@@ -19,20 +19,20 @@ draft: "true"
 - [ ] 시그니처 프론트엔드 : 웹 개발부터 웹앱까지 프론트엔드의 모든 것
 - [ ] 더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)
 - [ ] 컴퓨터 공학 전공 필수 올인원 패키지 Online.
-- [ ] 알고리즘 / 기술면접 완전 정복 올인원 패키지 Online.
+- [x] 알고리즘 / 기술면접 완전 정복 올인원 패키지 Online.
 - [ ] 네카라쿠배 취업 끝장내는 파이썬 코딩테스트 마스터
-- [ ] 상태 관리 라이브러리 종류 / 왜, 어떻게, 깊게 이해
-	- [ ] redux, recoil, react-query learn 
+- [x] 상태 관리 라이브러리 종류 / 왜, 어떻게, 깊게 이해
+	- [x] redux, recoil, react-query learn
 - [ ] retry fetch with suspense or with axios or with tanstack query
-- [ ] promise 완벽하게 배우기
+- [x] promise 완벽하게 배우기
 - [ ] [React](https://ko.react.dev/)  
 - [ ] [facebook/react \| DeepWiki](https://deepwiki.com/facebook/react)
 - [ ] [2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax \| 학습 페이지](https://www.inflearn.com/courses/lecture?courseId=324216&unitId=89266&tab=curriculum)  
 - [ ] Observability 도구나 APM(Grafana, Kibana, Datadog, Lighthouse 등) 사용 경험
 - [ ] 다양한 시각화 도구나 라이브러리(D3.js, chart.js 등) 경험
 
 # Systems
-- [ ] ​ [[지금 무료]운영체제 공룡책 강의 강의 | 주니온 - 인프런] 
+- [ ] ​ 지금 무료운영체제 공룡책 강의 강의 | 주니온 - 인프런
 - [ ] ai for beginner [link](https://microsoft.github.io/AI-For-Beginners/)  #someday-maybe 
 - [ ] 특이한 알고리즘 배우기 [링크](https://austinhenley.com/blog/challengingalgorithms.html)  #someday-maybe 
 - [ ] [3D 수학 공부](https://lee-seokhyun.gitbook.io/game-programming/client/easy-mathematics/3d/3d-5.)  #someday-maybe