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) 시스템

vite + mf 적용하다가 알게된 것들

vite-2 (vite 랑 친해지기🤶)

weback - require.context

webpack & vite 비교

Webpack - Loader Configuration

Webpack - style-loader

webpack 의 __webpack_require__ 함수

Webpack의 Plugin API

Webpack의 Tapable

번들링(bundling) 도구란? 왜 필요하냐?

웹팩(Webpack)과 롤업(rollup)의 트리쉐이킹 비교

웹팩은 CSS 파일을 어떻게 번들링 할까?

웹팩의 로더(loader)와 플러그인(plugin)의 차이는 뭘까?

지원되지 않는 자바스크립트 문법은 어떻게 처리하나?

코드스플릿팅(code-spliting)을 하는 이유는?

트랜스파일링(transpiling)

폴리필링(polyfilling)

compiler

AST (Abstract Syntax Tree)

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

css module 이 번들되는 과정

css vs scss 의 용량차이가 있을까?

css 가 cascading 인 이유는?

CSS 파싱과정

css-in-js가 번들되는 과정

Dart-sass 그리고 node-sass

flexbox의 direction 별 주축과 교차축에 따른 너비 영역

module css 문법이 작동하는 방식

rem , em의 차이를 정말 알아보자

Scss의 Module System

Server-side rendering 시 style 적용은 어떻게 할까?

레이어(Layer)

명시도 (specificity)

쌓임 맥락 (stacking context)

css-in-js

runtime css-in-js

styled-component 작동방식

zero-runtime css in js

digging-libraries

NextFederation 플러그인 톺아보기

GraphQL

Apollo Client In memory Cache

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)

XML(Extensible Markup Language)

infra

AWS ECR(Elastic Container Registry)

AWS EKS(Elastic Kubernetes Service)

circuit breaker

Health check 란 뭐고 왜 하는걸까?

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

ESM (자바스크립트 네이티브 모듈)

Event Loop Task Scheduling Usecase

microtask queue & macrotask queue

Promise & async,await 의 microtask queue 동작 차이

Promise for Concurrent

Promise 에서 try-catch를 사용 할 수 없는 이유

Promise.withResolvers()

queueMicrotask() 사용하여 스케쥴링하기

RHS(Right-hand Search)와 LHS(Left-hand Search)

top-level await 와 마이크로태스크큐

렉시컬 스코프(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에서 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

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

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) 는 뭐고, 왜 필요한건지?

non-blocking useTransition

React core 패키지의 독립성 (?)

React hook 의 호출 순서 의존성 - 1

React Hook 저장소

React 동작 과정 및 LifeCycle 간단 정리

React 동작 단계 (Render, Reconcile, Commit, Update)

React는 dependency array에서 변경이 일어났는지 어떻게 알까?

React의 jsx 문법이 javascript 로 변환되는 과정

Render Delegation

state 가 변경 된 후 흐름

Suspense 가 활성화 되지 않는 상태 (inactive)

Suspense 와 useTransition

Transition과 Suspense-enabled Router

Transition에서 입력 이벤트가 작동하지 않음

useCallback 의 closure 로 인한 메모리 누수 가능성

useDeferredValue

useLayoutEffect

useSyncExternalStore

리액트에서 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

Static Type Checking (정적 타입 검사)

Structural SubTyping (구조적 서브타이핑)

tsc (typescript compiler)

Type Compatibility 타입 호환성

TypeScript Compiler 동작 방식

신선도 (Freshness)

조건부 타입(Conditional Type)

증분 컴파일 (Increamental Compilation)

web

back forward cache

BroadcastChannel

Browser 기본 구조

Browsing Context

Chrome - 고속 스크롤 불가 영역 (Non-fast Scrollable region)

Chrome 과 IE 의 차이점

CSSOM (CSS Object Model)

iframe 은 Rendering 과정중에서 어떻게 처리되나?

INP(Interaction to Next Paint)

ISR(Incremental Static Generation)

MPA (Multi-Page Application)

PEMPA (Progressively Enhanced Multi-Page Apps)

PESPA (Progressively Enhanced Single Page App)

Reflow & Repaint

SPA(Single Page Application)

SSG (Static Site Generation)

Style 계산의 범위, 복잡성 줄이기

user agent 란?

V8은 어떻게 동작하는가?

렌더트리 (Render Tree)

브라우저 렌더링(Browser Rendering)

히든클래스 (Hidden Class)

webview

웹뷰에서 scheme 이란 뭐고 왜 사용할까?

codegen 이란 뭐고, 왜쓰는걸까?

Error- 'Component' cannot be used as a JSX component

event source model

Gateway 서버의 역할

MicroService Architecture

Next.js 를 사용해 만드는 어플리케이션은 SPA 라고 부를 수 있을까?

package.json 의 resolution 필드란 뭐고 왜 쓸까?

peer dependency

RBAC & ABAC & ReBAC

Runtime 환경변수 URL

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. 내가 생각하기에 프론트엔드 엔지니어링이 어려운 이유

독서기록(read)

1.소프트웨어 장인을 읽고👩‍🔧

2. 더 좋은 삶을 위한 철학

3. 10년차 IT 기획자의 노트를 읽고

4. 켄트백의 tidy first? 를 읽고

5. 도파민네이션을 읽고

6. 넷플릭스 - 규칙없음을 읽고

7. 사는게 힘드냐고 니체가 물었다

8. 상자 밖에 있는 사람을 읽고

Enter to select

to navigate

ESC to close

jsx 가 React Element 로 변환되는 시점

JSX 는 VDOM에 올려지기 위해서 React Element 로 변환되어야 한다.
따라서 Render Phase 에 변환되는거

Connected Pages

Depth

Pages mentioning this page

No other pages mentions this page