IAInformation ArchitectureFSDFeature-Sliced Designhow to use socket.iosocket.io conceptSocket.iosocket.io conceptauth routing권한에 따른 페이지 접근 제어chakra ui - component stylechakra ui customize componentchakra ui - customize themechakra ui customchakra ui - default theme(Foundation)chakra ui foundationError Handling (advanced react)React에서 try-catch의 한계와 ErrorBoundary를 사용한 에러 처리 및 비동기 에러 처리 방법IPCElectron IPC(Inter-process communication)를 사용한 main과 renderer 프로세스 간 통신 방법context isolationElectron context isolation을 통한 보안 강화와 contextBridge를 사용한 안전한 API 노출process modelElectron의 main 프로세스와 renderer 프로세스 구조, preload script와 utility process의 역할data fetching with race conditions (advanced react)React에서 데이터 페칭 시 발생하는 race condition 문제와 해결 방법(cleanup, AbortController 등)Portal (advanced react)React Portal을 사용한 쌓임 맥락(Stacking Context) 문제 해결과 모달 구현 방법reconcilation (advanced react)React 재조정(Reconciliation) 과정에서 변경 감지 방식, DOM 엘리먼트 재사용, key의 역할에 대한 심화 내용Refs (advanced react)React useRef와 useImperativeHandle을 사용한 DOM 접근과 선언적 API 구현 방법Closure (advanced react)React에서 클로저와 stale closure 문제, useCallback과 React.memo에서의 클로저 활용과 ref를 통한 해결HOC (advanced react)React HOC(High Order Component) 패턴을 사용한 컴포넌트 로직 재사용과 forwardRef 활용memoization (advanced react)React에서 useMemo, useCallback, React.memo 사용 시 주의사항과 참조 안정성 유지 방법element as props (advanced react)React에서 element를 props로 전달하는 패턴과 cloneElement를 사용한 default props 적용 방법Map DataMap에서 다루는 datare-render (advanced react)React 컴포넌트 리렌더링 메커니즘과 상태 업데이트, 하위 컴포넌트 리렌더링, memo 최적화에 대한 심화 내용3C4P전략을 세우는 과정에서 아이디어 논리화 및 구조화하는 패턴Websocket Life CycleWebsocket handshakingWebsocke, HTTP Polling, SSEWebsocket conceptAuthentication and Authorization인증과 인가checkmate hotfix모바일 레이아웃 버그와 401 에러 핸들링을 해결한 hotfix 과정과 Interceptor 구현useEffect와 useCallback과 useMemo와 React.memouseEffect, useCallback, useMemo, React.memo의 사용법과 성능 최적화를 위한 활용 방법프론트엔드 성능 개선프론트엔드 성능 개선을 위한 Web Vitals 측정, 번들 크기 최적화, gzip 압축, 캐싱 전략 적용ts summaryTypeScript를 사용하는 이유, 타입 시스템, 타입 계층 구조, 제네릭, 가변성, 타입 넓히기에 대한 종합 정리Routing클라이언트 사이드 라우팅의 개념과 react-router-dom을 사용한 다양한 라우팅 관리 방식Effective typescriptTypeScript 컴파일러의 역할과 타입 선언, 타입 단언, 잉여 속성 체크, type과 interface의 차이점에 대한 가이드ModuleJavaScript 모듈의 개념과 CommonJS, AMD, ESM(ES6 Module)의 특징과 동작 방식type alias vs interfaceType alias와 interface의 차이점과 각각의 사용 시나리오에 대한 비교 분석type systemReact 컴포넌트 타이핑, 컴파일과 런타임 차이, 이벤트 타입, 구조적 서브 타이핑에 대한 TypeScript 가이드InferTypeScript의 infer 키워드를 사용한 조건부 타입에서 타입 추론하는 방법ts compilerTypeScript 컴파일러의 역할과 Babel과의 차이점에 대한 설명triple-slash directivesTypeScript triple-slash directives를 사용한 파일 참조, 타입 참조, 라이브러리 참조 방법object typeTypeScript에서 배열을 객체로 변환하고 mapped type과 Record utility type을 활용하는 방법OverloadingTypeScript 함수 오버로딩을 사용하여 다양한 매개변수 타입을 처리하는 방법typescript importTypeScript 모듈 import 방법과 ambient 모듈 선언, namespace 사용 시 주의사항typescript utilityTypeScript 유틸리티 타입들(Partial, Readonly, Record, Pick, Omit 등)의 사용법과 예제Type guardTypeScript 타입 가드를 사용한 타입 좁히기(narrowing)와 typeof, instanceof, in 연산자 활용법typescript classTypeScript 클래스의 접근 제어자, 상속, getter와 setter, 정적 멤버, 추상 클래스, 싱글톤 패턴typescript genericTypeScript 제네릭의 개념과 클래스, 함수, 팩토리 함수에서의 활용 방법typescript interfaceTypeScript interface의 개념, 특징, implements, 옵셔널 프로퍼티, 인덱스 시그니처, 함수 타입에 대한 가이드namespace and moduleTypeScript namespace와 module의 차이점, namespace를 사용한 코드 구조화와 멀티 파일 관리typescript moduleTypeScript 모듈 시스템과 import type, ambient 선언(.d.ts 파일)을 사용한 타입 정의Declaration MergingTypeScript 선언 병합(Declaration Merging)의 개념과 interface, namespace, 모듈 보강 방법AJAXAsynchronous Javascript And XMLWebRTC BaseWebRTC conceptWeb Resource웹 리소스와 URI 구조, HTTP 요청과 응답 메시지의 구성 요소와 상태 코드MFA-SPAMPA와 SPA의 차이점, SSR과 CSR의 특징과 각각의 선택 기준MIME TypeMIME Type의 개념과 Content-Type을 통한 파일 형식 식별 방법typesTypeScript의 기본 타입들(primitive, array, tuple, enum, function, object, never 등)과 타입 어설션DOM element selectDOM 요소 선택 방법으로 직접 선택(getElementBy, querySelector)과 관계적 선택(parentNode, children 등)event delegate이벤트 위임 패턴을 사용한 상위 노드에서 하위 노드 이벤트 제어와 이벤트 버블링과 캡처링js global objectJavaScript 전역 객체(window, global)의 특징과 암묵적 전역 변수 생성 메커니즘InheritanceJavaScript 프로토타입 기반 상속의 종류인 위임형, 연결형, 함수형 상속과 각각의 특징Short circuit evaluationJavaScript 단축 평가(short circuit evaluation)와 ||, &&, ?., ?? 연산자를 활용한 기본값 설정과 보호 연산functional methods함수형으로 전환Functional Programming함수형 프로그래밍의 개념과 순수 함수, 일급 함수를 통한 조합성과 모듈화에 대한 가이드typeof - instanceoftypeof와 instanceof 연산자의 동작 원리와 typeof null이 object를 반환하는 이유promise-fetchJavaScript Promise와 async와 await를 사용한 비동기 처리 방법과 fetch API의 동작 원리Infinite scroll무한 스크롤 구현 방법으로 scroll height 계산과 IntersectionObserver API 활용js-routingJavaScript 라우팅 방식 비교로 Link Tag, Ajax, Hash, Pjax 방식의 특징과 trade-offShallow copy - Deep copyJavaScript 얕은 복사와 깊은 복사, Object.assign, 전개 연산자, JSON.stringify를 사용한 복사 방법PrototypeJavaScript 프로토타입 기반 상속의 개념과 프로토타입 체이닝, 클래스 기반 상속과의 차이점자바스크립트 객체JavaScript 객체의 개념과 생성 방법, 빌트인 객체, 호스트 객체, 래퍼 객체의 동작 원리Every SomeJavaScript 배열 메서드 every와 some의 동작 원리와 공허참 개념, 검증 로직에의 활용Closure값 캡처Bind함수에 원하는 this 연결NewJavaScript new 연산자와 생성자 함수의 동작 과정과 익명 생성자 함수를 사용한 캡슐화FunctionJavaScript 함수의 일급 객체 특성, 함수 선언문과 표현식, 화살표 함수, 즉시 실행 함수의 특징값식문JavaScript의 값, 식(표현식), 문(statement)의 개념과 표현식인 문과 표현식이 아닌 문의 차이실행 컨텍스트와 변수JavaScript 실행 컨텍스트의 생성 과정과 Variable Environment, Lexical Environment, 변수 선언의 차이thisJavaScript의 this 바인딩 규칙과 기본 바인딩, 명시적 바인딩, 암시적 바인딩, new 바인딩, 화살표 함수에서의 thisvar let contJavaScript의 var, let, const의 차이점과 스코프, 호이스팅, TDZ(Temporal Dead Zone)에 대한 설명Execution ContextJavaScript 실행 컨텍스트의 생성 과정과 Variable Environment, Lexical Environment, This Binding에 대한 설명evaluation strategyJavaScript 평가 전략(evaluation strategy)과 call by value의 동작 원리object pool객체 풀 패턴을 사용한 메모리 관리와 GC 부담을 줄이는 정적 메모리 JavaScript 기법Facade Pattern퍼사드 패턴을 사용한 복잡한 서브시스템을 간단한 인터페이스로 제공하는 방법Hollywood principle헐리웃 원칙을 통한 고수준-저수준 구성요소 간 단방향 의존성 관리와 이벤트 처리