#state
노트 17개
Frontend › Architecture
프론트엔드 MV* 아키텍처의 흐름: MVC에서 MVI까지MVC·MVP·MVVM의 구조와 차이, 수동적 뷰·감독 컨트롤러·프레젠테이션 모델·Model 2 같은 변형, 웹 프론트엔드의 아키텍처가 MVC → MVVM → Container-Presenter → Flux → 가벼운 전역 스토어·서버 상태 관리로 바뀌어 온 흐름과, Flux가 reducer와 단일 스토어의 Redux로 줄어든 과정, 그 흐름을 정리한 MVI(Model-View-Intent) 아키텍처. 뷰와 비즈니스 로직을 분리하고, 뷰는 의도만 전하고, 데이터는 한 방향으로 돈다.
Frontend › Architecture
UI 변경 감지: 상태가 바뀌면 화면은 어떻게 따라 바뀌나UI 프레임워크의 핵심 문제는 상태를 화면으로 투영하고, 상태가 바뀌었을 때 최소한의 DOM만 고치는 것이다. 전부 새로 그리기, 수동 재렌더, 데이터 바인딩(관찰 가능한 모델·Proxy), 더티 체킹(AngularJS digest·zone.js), 가상 DOM 비교, 불변 데이터로 비교 건너뛰기, 시그널, 컴파일러까지 변경을 '언제·어떻게 아는가'로 나눠 비교하고, React Fiber가 렌더링을 쪼개 우선순위를 매기는 방식을 정리한다.
Frontend › Mobile
React Native 기초와 스타일링React 코드를 네이티브 UI로 바꿔 주는 React Native의 동작 원리(브리지에서 New Architecture로), Expo로 시작하기, 코어 컴포넌트, StyleSheet와 Flexbox 레이아웃, onPress·onChangeText 이벤트와 ScrollView·FlatList 목록.
Frontend › React
리액트 상태 관리의 흐름과 고르는 기준상태를 종류(로컬·서버·URL·폼·전역 클라이언트)로 먼저 나누고, 전역 상태 라이브러리는 읽기·쓰기·리렌더링 최적화·메모리 네 가지 문제를 어떻게 푸는지로 비교한다. Flux·Redux에서 Context, 서버 상태 라이브러리, atom·proxy 기반 라이브러리로 이어진 흐름까지.
Frontend › React
재조정(Reconciliation)과 state 보존React가 리렌더링 때 이전 엘리먼트 트리와 새 트리를 비교해 DOM 변경을 최소로 계산하는 과정. render 단계와 commit 단계, 타입이 다르면 하위 트리를 통째로 리마운트하고 같으면 속성만 고치는 비교 규칙, state가 트리의 '위치'에 묶여 보존·초기화되는 원리와 key로 초기화하는 법을 정리한다.
Frontend › React
폼과 제어 컴포넌트입력값을 React state로 관리하는 제어 컴포넌트, 여러 입력 다루기, 파생 값 계산, 그리고 React 19의 폼 액션(useActionState·useFormStatus).
Frontend › React
Context와 전역 상태props를 일일이 내려주지 않고 컴포넌트 트리 전체에 값을 공유하는 Context API와, Context로 부족할 때 고르는 전역 상태 라이브러리(Redux Toolkit, Zustand, Jotai).
Frontend › React
React Hooks함수 컴포넌트에서 state·생명주기·메모이제이션을 쓰게 해 주는 API와 그 규칙, 커스텀 훅. useEffect를 생명주기가 아니라 동기화로 보는 관점, deps를 줄이는 법, 요청 경쟁 상태 처리까지.
Frontend › React
react-hook-form과 MUI Selectreact-hook-form의 Controller로 MUI Select 같은 외부 UI 컴포넌트를 연결하고, 빈 값·placeholder·수정 폼 초기값을 다루는 방법.
Frontend › React
React와 TypeScriptReact 코드에 타입을 붙이는 자리별 방법. 컴포넌트는 props 타입을 매개변수에 붙인 평범한 함수로 쓰고, children은 ReactNode, HTML 요소 감싸기는 ComponentProps<'button'>, ref는 React 19부터 Ref<T> prop으로 받는다. props 조합은 판별 유니언·never·오버로드로 제한하고, 제네릭 컴포넌트로 목록 항목 타입을 이어 준다. 이벤트·훅(useState·useRef·useReducer·useActionState·useOptimistic)·Context·클래스·Redux의 타입까지.
Frontend › React
Redux 미들웨어와 비동기 처리미들웨어는 dispatch와 reducer 사이에 끼어 액션을 기록·변형·무시하거나 다른 액션을 일으키는 함수 체인(store => next => action)이다. 비동기 처리는 thunk가 기본이고, 지금은 데이터 요청에 RTK Query나 createAsyncThunk, 액션에 반응하는 흐름에 listener middleware를 쓴다. redux-saga는 취소·디바운스가 얽힌 복잡한 흐름에만 남았다.
Frontend › React
Redux와 react-redux앱 전체가 공유하는 state를 store 한 곳에 두고, reducer에 정의한 방식대로 dispatch로만 바꾸게 하는 상태 관리 라이브러리. 지금은 Redux Toolkit의 createSlice·configureStore로 쓰고, react-redux의 Provider·useSelector·useDispatch로 컴포넌트와 연결한다.
Frontend › React
State와 useState컴포넌트가 스스로 관리하는 변하는 데이터인 state, useState와 함수형 업데이트, 배열·객체를 불변으로 바꾸는 방법(ES2023 복사 메서드, Immer), 공통 부모로 state 끌어올리기.
Frontend › React
TanStack Query(React Query)서버에서 가져온 데이터의 캐싱·재요청·로딩/에러 상태를 훅 하나로 다루게 해 주는 서버 상태 라이브러리. QueryClientProvider 설정, query key 설계, 캐시의 fresh·stale·inactive 생명 주기와 isPending·isFetching, 다시 가져오는 시점(mount·focus·reconnect·interval), select·enabled·의존 쿼리·useQueries, 페이지네이션과 useInfiniteQuery, useMutation 뒤 무효화·setQueryData·낙관적 업데이트, SSR(dehydrate·HydrationBoundary)까지.
Frontend › Web
Web Storage: localStorage와 sessionStorage브라우저에 키-값 문자열을 저장하는 localStorage·sessionStorage의 API, 객체를 JSON으로 직렬화해 저장하고 복원하는 법, 다른 탭과 동기화하는 storage 이벤트, 예외 처리와 보안상 넣지 말아야 할 것을 정리한다.
Computer Science › Programming Languages
같은 문제, 열다섯 가지 설계: 상태와 결합을 다루는 법터틀 그래픽(앞으로 가기, 돌기, 펜 올리기)이라는 단순한 문제를 객체 지향 클래스부터 순수 함수 모듈, 함수형 코어 API, 에이전트, 인터페이스·함수 의존성 주입, 상태 모나드, 커맨드 배치, 이벤트 소싱, 스트림 처리, 인터프리터, 추상 자료형, 능력 기반 API까지 열다섯 가지로 구현하며 상태를 누가 쥐는지와 구현과 어떻게 떼어 내는지를 비교한다. 행동(인터페이스)이 아니라 데이터(커맨드 타입)로 결합을 끊는 방식의 장점도 정리한다.
Computer Science
소프트웨어 복잡성: 본질적 복잡성과 우발적 복잡성큰 소프트웨어를 만들기 어려운 근본 원인은 이해하기 어렵다는 것, 곧 복잡성이다. 문제 자체에 있는 본질적 복잡성과 도구·설계가 덧붙인 우발적 복잡성을 나누고, 복잡성의 주원인인 상태·제어 흐름·코드 양, 「단순함(simple)」과 「쉬움(easy)」의 차이와 얽힘(complect), 피하고(avoid) 분리하라(separate)는 처방을 정리한다.