study notes
Search
CTRL + K
study notes
Search
CTRL + K
(study) 공부
bundler
code splitting 한 청크를 배포 후 잃어버리는 문제 😶🌫️
CommonJS 의 트리쉐이킹(tree shaking)이 효율적이지 않은 이유
Entry Point 란
MF 이모저모
Module Federation 전방향 참조(omnidirectional) 가능한 이유
Module Federation - Share Scope
Module Federation 2.0 개선점들
Module Federation with SSR 은 어떻게 동작할까?
Module Federation 동작 방식
Module Federation의 공유 의존성 (Shared Dependency)
rollup - resolve plugin
Rollup 의 플러그인(plugin) 시스템
Rollup
vite + mf 적용하다가 알게된 것들
vite-2 (vite 랑 친해지기🤶)
Vite
weback - require.context
webpack & vite 비교
Webpack - Loader Configuration
Webpack - style-loader
webpack 의 __webpack_require__ 함수
webpack
Webpack의 Plugin API
Webpack의 Tapable
번들링(bundling) 도구란? 왜 필요하냐?
웹팩(Webpack)과 롤업(rollup)의 트리쉐이킹 비교
웹팩은 CSS 파일을 어떻게 번들링 할까?
웹팩의 로더(loader)와 플러그인(plugin)의 차이는 뭘까?
지원되지 않는 자바스크립트 문법은 어떻게 처리하나?
청크(Chunk)
코드스플릿팅(code-spliting)을 하는 이유는?
트랜스파일링(transpiling)
폴리필링(polyfilling)
compiler
AST (Abstract Syntax Tree)
Compiler
Interpreter
JIT(Just In Time) 컴파일러
Lexical Analysis 란?
Syntax Analysis란?
computer science
AJAX (Asynchronous JavaScript and XML)
Aspect-Oriented Programming
Asynchronous & Synchronous
Computer Architecture Layer
CORS(Cross-Origin Resource Sharing)
First-Class Citizen
First-Class Function
HTTP2의 Multiflexing
JSON (JavaScript Object Notation)
JSON은 느릴까?
Preflight Request
Process & Thread
Registry Pattern
Same-Origin Policy
Virtual Host (가상 호스트)
더블 버퍼링(Double Buffering)
데이터 무결성(Data Integrity)
데이터 정합성(Data Consistency)
데코레이터 패턴(Decorator Pattern)
멱등성(Idempotency)
싱글톤(Singletone)
의존성 주입 컨테이너(Dependency Injection Container)
정적언어(Static Langauge)와 동적언어(Dynamic Langauge)의 차이
프록시 패턴(Proxy Pattern)
플러그인 시스템(Plugin System)
횡단관심사(cross-cutting concerns)
css
@charset
@keyframes
@layer - css
css module 이 번들되는 과정
CSS StyleSheet
css vs scss 의 용량차이가 있을까?
css 가 cascading 인 이유는?
CSS 의 import
CSS 파싱과정
css-in-js가 번들되는 과정
CSSRule
Dart-sass 그리고 node-sass
flexbox의 direction 별 주축과 교차축에 따른 너비 영역
Isolation
module css 문법이 작동하는 방식
rem , em의 차이를 정말 알아보자
Scss의 Module System
Server-side rendering 시 style 적용은 어떻게 할까?
StyleSheet
Transform
Transition
레이어(Layer)
명시도 (specificity)
쌓임 맥락 (stacking context)
css-in-js
runtime css-in-js
styled-component 작동방식
typesafe css
zero-runtime css in js
digging-libraries
NextFederation 플러그인 톺아보기
Suspensive
GraphQL
Apollo Client In memory Cache
Data Masking
Fragment-Driven-Development
GQL의 Client caching 관련
GraphQL Codegen 은 어떻게 코드를 만드는걸까?
GraphQL Instrospection 은 뭘까?
GraphQL 언제 써야할까?
relay 공식문서 읽으면서 이것저것 메모🥕
relay 의 data-masking 의 양날의 검에 대하여
Thinking in GraphQL🧚
Trusted Document 와 Persisted Query
html
defer, async script
HTML(HyperText Markup Language)
HTML에서 css, js 는 어떻게 실행(?)될까?
iframe (inline-frame)
Module Script
nomodule
Script Tag
Sementics
XML(Extensible Markup Language)
infra
AWS ECR(Elastic Container Registry)
AWS EKS(Elastic Kubernetes Service)
circuit breaker
Container
Docker
Health check 란 뭐고 왜 하는걸까?
Kubernets
Standalone 모드란 뭘까?
Tenant가 뭘까?
대형 웹 애플리케이션 Micro Frontends 전환기
멀티 태넌시(multi tenency) , 싱글 태넌시(single tenency)는 뭘까?
메시지 큐(message queue)
사용자 수에 따른 규모 확장성 다루기
클라우드프론트 람다 펑션(lambda function)은 무엇일까
javascript
AbortController
async 함수는 Promise 를 반환한다.
async-await 의 동작 원리 (feat.Generator)
await 는 Promise 앞에서만 쓸 수 있을까?
await 키워드 붙이지 않았을 때 try catch 작업의 흐름
Debounce & Throttling
Duck Typing
ESM (자바스크립트 네이티브 모듈)
Event Loop Task Scheduling Usecase
microtask queue & macrotask queue
Promise & async,await 의 microtask queue 동작 차이
Promise for Concurrent
Promise 에서 try-catch를 사용 할 수 없는 이유
Promise
Promise.withResolvers()
Proxy
queueMicrotask() 사용하여 스케쥴링하기
RHS(Right-hand Search)와 LHS(Left-hand Search)
Thenable
top-level await 와 마이크로태스크큐
Web Worker
렉시컬 스코프(Lexical Scope)
렉시컬 환경(Lexical Environment)
비동기(Asynchronous)
순차적 요청(Sequential Request)
스코프(Scope)
실행 컨텍스트(Excecution Context)
싱글 쓰레드(Single Thread)
이벤트 루프(Event Loop)
커링(Currying)
콜백함수(Callback Function)
클로저 (Clousre)
태그가 지정된 템플릿 문자열 (Tagged Template Literals)
호이스팅(Hoisting)
javascript module system
Common JS의 증분 로딩(incremental loading)
js 파일에서 cjs 파일을 import 할 수 있는 이유는 뭘까?
monorepo
build pipeline 은 어떻게 구축할 수 있을까?
monorepo 에서 사용되는 라이브러리는 번들 시, 어떻게 dependency로 잡히나?
Nx Custom Generator
Nx Plugin
Nx에서 Dependency 관리 전략
Nx의 caching 시스템
Nx의 MentalModel (feat. affected)
Nx의 Metadata-driven
yarn workspace 와 친해지기🤗
대규모 Nx 프로젝트 점진적으로 migration 하기 프로젝트..😴
모노레포와 tooling에 대한 고민들....🤧
next.js
next.js ssr & csr 구동 방법 차이..짧게 정리
Next.js의 server는 어디에 있나?
server side rendering
oop
SOLID
optimization
FCP (First Contentful Paint)
Server Side Rendering의 초기 로딩 속도 관련
TTFB(Time to First Byte)
TTI (Time to Interactive)
pattern
MVVM (Model View ViewModel)
기능 분할 설계 (FSD)란 뭘까?
데이터 검증(data-validation), 언제 얼마나 해야할까?
정적 팩토리 메소드 (static factory method)
제어의 역전(IoC)이란 뭘까?
react
Commit Phase
concurrent mode 에서 time slicing 이란?
concurrent mode 에서 발생할 수 있는 tearing 이란 무엇일까?
Concurrent mode
Diffing Algorithm
fetch on Render vs render as Fetch
hook은 왜 조건문 내에서 실행하면 안될까?
import React 를 하지 않아도 되는 이유
jsx 가 React Element 로 변환되는 시점
jsx 에서 if 문을 사용할 수 없는 이유
jsx(JavaScript XML) 는 뭐고, 왜 필요한건지?
Lane
non-blocking useTransition
React core 패키지의 독립성 (?)
React Fiber
React hook 의 호출 순서 의존성 - 1
React Hook 저장소
React Packages
React 동작 과정 및 LifeCycle 간단 정리
React 동작 단계 (Render, Reconcile, Commit, Update)
React는 dependency array에서 변경이 일어났는지 어떻게 알까?
React의 jsx 문법이 javascript 로 변환되는 과정
Render Delegation
Render Phase
state 가 변경 된 후 흐름
Suspense 가 활성화 되지 않는 상태 (inactive)
Suspense 와 useTransition
Suspense
Transition과 Suspense-enabled Router
Transition에서 입력 이벤트가 작동하지 않음
useCallback 의 closure 로 인한 메모리 누수 가능성
useDeferredValue
useEffect
useLayoutEffect
useSyncExternalStore
useTransition
VDOM
리액트에서 key 의 역할은?
리액트에서 strict 모드를 사용하면 콘솔이 두번 찍히는 이유는?
리액트의 state batch 처리는 어떤 기준으로 일어날까?
리액트의 렌더단계(render phase)와 커밋단계(commit phase)란 뭘까?
재조정(Reconcillation)
하이드레이션 (hydration)
함수형 컴포넌트(functional Component)가 나온 이유는?
Sentry
Sentry 이모저모 잘 사용하기
server
트랜잭션(transaction)은 뭘까?
store
jotai 와 zustand, redux 등등 스토어들의 상태관리 멘탈모델을 비교해보자
jotai 이것저것
jotai는 useSyncExternalStore 를 사용하지 않는다.
react compiler 시대에 전역상태관리 라이브러리들은 어떻게 될까?
recoil 의 snapshot 은 왜 필요할까?
test
좋은 단위 테스트(unit test)의 원칙
테스트 대역(Test double)이란 뭘까?
til
1. TypeScript > partial 과 intersection type 사용해서 유니온타입 대신 타입단언하기
2. 나만의 상태관리 라이브러리 만들기
3. 디자인패턴의 아름다움 스터디
typescript
Ambient Module
Branded Type
d.ts
Declare
Fresh Literal
Infer
Static Type Checking (정적 타입 검사)
Structural SubTyping (구조적 서브타이핑)
tsc (typescript compiler)
tsconfig.json
Tuple Type
Type Compatibility 타입 호환성
Type System
TypeScript Compiler 동작 방식
신선도 (Freshness)
조건부 타입(Conditional Type)
증분 컴파일 (Increamental Compilation)
web
back forward cache
Bare Import
BroadcastChannel
Browser 기본 구조
Browsing Context
Chrome - 고속 스크롤 불가 영역 (Non-fast Scrollable region)
Chrome 과 IE 의 차이점
CSSOM (CSS Object Model)
DOM tree
iframe 은 Rendering 과정중에서 어떻게 처리되나?
Import Map
INP(Interaction to Next Paint)
ISR(Incremental Static Generation)
MPA (Multi-Page Application)
Origin
PEMPA (Progressively Enhanced Multi-Page Apps)
PESPA (Progressively Enhanced Single Page App)
Reflow & Repaint
Service Worker
SPA(Single Page Application)
SSG (Static Site Generation)
Style 계산의 범위, 복잡성 줄이기
user agent 란?
V8은 어떻게 동작하는가?
Websocekt
Window Proxy
렌더트리 (Render Tree)
브라우저 렌더링(Browser Rendering)
히든클래스 (Hidden Class)
webview
웹뷰에서 scheme 이란 뭐고 왜 사용할까?
Changesets
codegen 이란 뭐고, 왜쓰는걸까?
Error- 'Component' cannot be used as a JSX component
event source model
Feature Flag
Gateway 서버의 역할
Metadata
MicroService Architecture
Next.js 를 사용해 만드는 어플리케이션은 SPA 라고 부를 수 있을까?
package.json 의 resolution 필드란 뭐고 왜 쓸까?
peer dependency
RBAC & ABAC & ReBAC
Runtime 환경변수 URL
Signals
trailing slash란?
Trunk Based Development (TBD)
대수적 효과(algebraic effects)
마이크로프론트엔드 아키텍쳐 (MicroFrontend Architecture)
추상화 레벨 통일 (Single Level of Abstraction)
추상화 레벨(abstraction level)
추상화(abstract)란 뭘까?
프론트엔드에서 DTO 레이어 생각해보기
(summary) 아티클,영상 요약
1. 에러바운더리가 잡지 못하는 에러들
2. 유쾌하게 이상한 자바스크립트 생태계
3. 타입스크립트 5.3 신기능 - satisfies
4. 토스 - 크고 복잡한 제품, 과감하게 갈아엎기
5. 트러블슈팅기 CSR에서 동적 OG 메타태그 적용하기
6. 프레임워크는 세부사항일 뿐이다.
7. 프론트엔드 로깅 신경안쓰기
8. Common js 란 무엇인가
9. useEffect 의존성에 ref를 담을 때마다 찜찜하신 분들을 위해
10. 디자인시스템, 코드를 넘어서
11. SSR의 기쁨과 슬픔 - 렌더링의 변화와 흐름을 통해 알아보는 SSR과 Streaming SSR
12. React Compiler 이해하기
13. 이벤트 기반 웹뷰 프레임워크 설계와 플러그인 생태계 만들기
14. 자바스크립트에서 프로미스를 취소하는 방법
15. UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
16. 그림과 실습으로 배우는 도커 & 쿠버네티스 CHAP.1
17. 그림과 실습으로 배우는 도커 & 쿠버네티스 CHAP.2
18. 전문가를 위한 리액트
(work) 업무
(dev) 개발관련
1. 1훅 1역할
2. 리액트 에러. Maximum update depth exceeded
3. 스키마 검증 레이어 (schema validation layer)
4. 외부서비스 연동 스크립트 개선 (external script)
1. 개발 업무 고민점 & 인사이트
3. 코드리뷰
4. 디자인 리뷰 시 체크리스트
5. 문서화 잘하기
6. 미팅을 잘 이끌어가는 법
7. 프로그래머 역량 관련
8. 아쉬웠던 점 & 잘한 점
9. 인프콘 발표 - 팀플레이어 101
10. 관계를 알아내기
11. 본질을 알아내기
데일리 생각(daily)
1. 개발자로서 생산성 범위 넓히기
2. 생각정리 - 의견충돌에 관한 단상
3. 코드에 대한 여러가지 조각글들
4. 녹이 슨 소프트웨어를 돌보기
5. 내가 생각하기에 프론트엔드 엔지니어링이 어려운 이유
2024 wrap up
독서기록(read)
1.소프트웨어 장인을 읽고👩🔧
2. 더 좋은 삶을 위한 철학
3. 10년차 IT 기획자의 노트를 읽고
4. 켄트백의 tidy first? 를 읽고
5. 도파민네이션을 읽고
6. 넷플릭스 - 규칙없음을 읽고
7. 사는게 힘드냐고 니체가 물었다
8. 상자 밖에 있는 사람을 읽고
HOME
CSSOM (CSS Object Model)
#Browser
#css
JavaScript 에서 CSS를 조작할 수 있는 API 집합
HTML 대신 CSS 가 대상인 DOM이라고 생각해도 되며, 사용자가 CSS 스타일을 동저으로 읽고 수정할 수 있는 방법