Performance Optimization성능 측정 및 분석, 대응 방식State and Component Architecture업데이트 빈도에 따른 상태 저장 방식AnimationuseFrame, spring, useAnimationsdreicontrols, Environment, shadow, Html, 성능 컴포넌트Events and Interactionraycast 위에 얹힌 pointer event와 전파, 비용Loading Models and TexturesuseGLTF와 공유 캐시, gltfjsx, 압축 우선순위, SuspenseBVHraycast를 빠르게 만드는 공간 분할 트리React Three Fiber BasicsReact renderer의 정체와 Canvas가 대신 세팅해주는 것들First SceneCanvas 기본값과 y-up 좌표계, 디버깅 가능한 씬 만들기Hooks and Render Loop두 개의 시계와 useThree, useFrame, useLoaderJSX Mapping Rulesargs와 pierced props, attach, primitiveDisposing MemoryGC가 회수하지 못하는 GPU 자원과 dispose로 해제하기Post Processingrender target에 효과 입히기와 EffectComposerpickingRaycaster의 한계와 GPU에서 색으로 picking하기GLTF전송 포맷으로서의 glTF와 Draco, KTX2 압축OBJOBJLoader와 MTLLoader, 그리고 스케일과 축, 텍스처 크기 문제Optimizing Many Objectsdraw call 오버헤드와 geometry 병합, InstancedMeshOn-Demand Rendering계속 도는 requestAnimationFrame의 낭비와 변할 때만 그리기BufferGeometry병렬 배열로 이루어진 구조와 index로 정점 재사용하기Render Target화면 대신 texture에 그리기와 그 활용shadowshadow map의 동작과 그림자를 만드는 광원, 품질과 카메라 볼륨CameraPerspectiveCamera의 절두체와 z-fightingLightAmbientLight부터 RectAreaLight까지, 광원 수와 성능Texturestexture와 GPU 메모리, mipmap 필터링과 wrappingmaterial렌더 대상별 material과 NodeMaterial 상속 구조geometryBufferGeometry의 attribute와 segmentScenescene graph와 local, world 좌표, 행렬 갱신 시점getting startedWebGPURenderer 기반 App class 보일러플레이트WebGL and WebGPUstate machine과 pipeline으로 비교하는 WebGL과 WebGPUIA정보를 구조화하는 Information ArchitectureFSD기능 단위로 나누는 Feature-Sliced Design 구조how to use socket.iosocket.io의 namespace와 event 구성하기Socket.iosocket.io 개념auth routing권한에 따라 page 접근 제어하기chakra ui - component stylechakra ui의 component style 커스터마이징chakra ui - customize themechakra ui의 theme 커스터마이징chakra ui - default theme(Foundation)chakra ui의 기본 theme, FoundationError Handling (advanced react)try-catch의 한계와 ErrorBoundary로 에러 다루기IPCElectron IPC로 main과 renderer process 사이 통신하기context isolationcontextBridge로 Electron 보안 강화하기process modelElectron의 process 구조와 preload scriptdata fetching with race conditions (advanced react)race condition과 cleanup, AbortControllerPortal (advanced react)Portal로 stacking context 문제를 피하고 modal 만들기reconciliation (advanced react)reconciliation의 변경 감지와 DOM 재사용, key의 역할Refs (advanced react)useRef와 useImperativeHandle로 선언적 API 만들기Closure (advanced react)React의 stale closure 문제와 ref로 해결하기HOC (advanced react)HOC로 컴포넌트 로직을 재사용하고 forwardRef로 ref 넘기기memoization (advanced react)useMemo, useCallback, React.memo의 함정과 참조 안정성element as props (advanced react)element를 props로 넘기고 cloneElement로 기본값 주기Map Data지도에서 다루는 raster data와 vector datare-render (advanced react)state 변경과 자식 컴포넌트 리렌더, memo 최적화3C4P아이디어를 로직과 구조로 옮기는 전략 수립 패턴Websocket Life CycleWebsocket 연결의 handshaking 과정Websocket, HTTP Polling, SSEWebsocket, HTTP polling, SSE 비교Authentication and Authorization인증과 인가의 차이checkmate hotfix모바일 layout 버그와 401 처리, interceptor 구현useEffect, useCallback, useMemo and React.memo리렌더를 줄이기 위한 메모이제이션 훅 사용법Frontend Performance ImprovementWeb Vitals 측정과 번들 크기, gzip, 캐싱 전략ts summary타입 시스템과 타입 계층, generic, 변성, 타입 넓히기Routingclient side routing과 react-router-domEffective typescriptcompiler의 역할과 타입 선언, 타입 단언, 잉여 속성 검사ModuleCommonJS, AMD, ESM의 동작 방식type alias vs interfacetype alias와 interface의 차이와 선택 기준type system컴파일 타임과 런타임, event 타입, 구조적 서브타이핑Inferconditional type 안에서 타입 뽑아내기ts compilerTypeScript compiler의 역할과 Babel과의 차이triple-slash directivestriple-slash directive로 파일, 타입, 라이브러리 참조하기object type배열을 객체로 바꾸기, mapped type과 RecordOverloading함수 overloading으로 여러 매개변수 타입 다루기typescript importmodule import와 ambient module 선언typescript utilityPartial, Readonly, Record, Pick, Omit 사용법Type guardtypeof, instanceof, in으로 타입 좁히기typescript class접근 제어자, static, abstract class, singletontypescript genericclass, 함수, factory 함수에서 generic 사용하기typescript interfaceimplements와 optional property, index signaturenamespace and modulenamespace와 module의 차이, 여러 파일로 코드 나누기typescript moduleimport type과 .d.ts의 ambient 선언Declaration Merginginterface, namespace로 선언 합치기AJAXAsynchronous JavaScript And XMLWebRTC BaseWebRTC 개념Web ResourceURI 구조와 HTTP 요청, 응답 메시지와 상태 코드MFA-SPAMPA와 SPA, SSR과 CSR의 차이와 선택 기준MIME TypeContent-Type으로 파일 형식 구분하기typesprimitive, array, tuple, enum, never와 타입 단언DOM element selectgetElementBy와 querySelector로 DOM 요소 선택하기event delegateevent delegation과 bubbling, capturingjs global objectwindow, global 같은 전역 객체와 암묵적 전역Inheritance위임, 결합, 함수형으로 나눠 보는 prototype 상속Short circuit evaluation단축 평가와 논리 연산자, ?., ??로 기본값 주고 방어하기functional methods명령형 코드를 함수형으로 바꿔보기Functional Programming순수 함수와 일급 함수로 만드는 조합성과 모듈성typeof - instanceoftypeof와 instanceof의 동작과 typeof nullpromise-fetchPromise와 async, await로 비동기 다루기와 fetch API의 동작Infinite scrollIntersectionObserver로 무한 스크롤 구현하기js-routingLink Tag, Ajax, Hash, Pjax 라우팅 방식 비교Shallow copy - Deep copyObject.assign, spread, JSON.stringify로 복사하기Prototypeprototype chaining과 class 기반 상속과의 차이JavaScript Object객체 생성 방식과 built-in, host, wrapper objectEvery Someevery와 some의 동작, vacuous truth와 검증 로직Closure함수가 값을 가두는 방식Bind함수에 원하는 this 묶기Newnew 연산자와 생성자 함수의 동작, 익명 생성자로 캡슐화하기Function일급 객체로서의 함수와 선언문, 표현식, 화살표 함수, IIFEValue, Expression, Statement값과 표현식, 문의 구분과 표현식인 문Execution Context and Variablesexecution context 생성 과정과 변수 선언this기본, 명시적, 암묵적, new 바인딩과 화살표 함수의 thisvar let constscope와 hoisting, TDZ로 보는 var, let, const의 차이Execution Contextexecution context를 이루는 세 가지 요소evaluation strategyJavaScript의 평가 전략과 call by valueobject pool객체를 재사용해서 GC 부담 줄이기Facade Pattern복잡한 subsystem을 단순한 interface로 감싸기Hollywood principle상위와 하위 컴포넌트의 의존 방향 뒤집기