프론트엔드 개발 경험과 라이브러리 코드 분석을 기록하는 오승의 기술블로그.https://oseungkwon.github.io/kohttps://oseungkwon.github.io/algorithm/monotonic-stack/https://oseungkwon.github.io/algorithm/monotonic-stack/원소마다 오른쪽에서 처음 나오는 더 큰 값을 찾을 때 씁니다. 아직 답을 못 찾은 원소를 스택에 쌓아 두었다가, 더 큰 값이 오면 맨 위부터 꺼내며 답을 정합니다. 모든 쌍을 비교하는 O(n²) 풀이가 O(n)으로 줄어듭니다.Sun, 04 Oct 2026 00:00:00 GMT알고리즘자료구조https://oseungkwon.github.io/algorithm/dijkstra/https://oseungkwon.github.io/algorithm/dijkstra/간선마다 비용이 다른 그래프에서, 출발지로부터 모든 노드까지의 최단 거리를 구합니다. 아직 확정하지 않은 노드 가운데 가장 가까운 것을 하나씩 확정하고, 그 노드에서 나가는 간선으로 이웃의 거리를 줄여 나갑니다.Sun, 27 Sep 2026 00:00:00 GMT알고리즘그래프https://oseungkwon.github.io/algorithm/heap/https://oseungkwon.github.io/algorithm/heap/값을 넣고 빼는 도중에도 가장 큰 값(또는 가장 작은 값)을 O(log n)에 꺼낼 수 있게 유지하는 완전 이진 트리입니다. 우선순위 큐를 만들 때 씁니다.Sun, 27 Sep 2026 00:00:00 GMT알고리즘자료구조https://oseungkwon.github.io/algorithm/sliding-window/https://oseungkwon.github.io/algorithm/sliding-window/배열이나 문자열의 연속 구간을 창 하나로 보고, 오른쪽 끝을 늘리고 왼쪽 끝을 줄이며 한 번만 훑습니다. 모든 구간을 따로 확인하는 O(n²) 풀이를 O(n)으로 줄입니다.Sun, 27 Sep 2026 00:00:00 GMT알고리즘투 포인터·슬라이딩 윈도우https://oseungkwon.github.io/algorithm/bfs/https://oseungkwon.github.io/algorithm/bfs/시작점에서 가까운 칸부터 한 레벨씩 넓혀 가며 둘러봅니다. 칸에 처음 닿은 순서가 곧 가장 짧은 거리라서, 최소 시간이나 최단 거리를 구할 때 씁니다.Sat, 26 Sep 2026 00:00:00 GMT알고리즘그래프https://oseungkwon.github.io/algorithm/binary-search/https://oseungkwon.github.io/algorithm/binary-search/정렬된 범위를 가운데에서 잘라, 답이 있을 수 없는 절반을 한 번에 버립니다. 비교 한 번마다 범위가 절반으로 줄어, 100만 칸에서도 비교 20번 안쪽으로 답을 찾습니다.Sat, 26 Sep 2026 00:00:00 GMT알고리즘이분 탐색https://oseungkwon.github.io/algorithm/greedy/https://oseungkwon.github.io/algorithm/greedy/지금 가장 좋아 보이는 선택 하나를 하고 되돌리지 않습니다. 구간 문제에서는 가장 먼저 끝나는 구간부터 남기면, 겹치지 않게 가장 많은 구간을 남길 수 있습니다.Sat, 26 Sep 2026 00:00:00 GMT알고리즘그리디https://oseungkwon.github.io/algorithm/bucket-sort/https://oseungkwon.github.io/algorithm/bucket-sort/값이나 빈도처럼 범위가 정해진 수를 배열의 번호로 써서, 값끼리 비교하지 않고 들어갈 자리를 바로 정합니다. 범위가 입력 크기 정도라면 O(n log n)이 아니라 O(n)에 순서를 얻습니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘정렬https://oseungkwon.github.io/algorithm/dfs-flood-fill/https://oseungkwon.github.io/algorithm/dfs-flood-fill/격자를 훑다가 땅을 만나면 거기서 이어진 칸을 깊이 우선으로 모두 지워, 이어진 덩어리를 하나씩 셉니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘그래프https://oseungkwon.github.io/algorithm/custom-comparator-sort/https://oseungkwon.github.io/algorithm/custom-comparator-sort/크기 순서로는 답이 나오지 않을 때, 두 원소를 받아 누가 앞에 설지 알려 주는 비교 함수를 직접 만들어 정렬합니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘정렬https://oseungkwon.github.io/algorithm/dynamic-programming/https://oseungkwon.github.io/algorithm/dynamic-programming/작은 문제의 답을 테이블에 적어 두고, 큰 문제를 풀 때 테이블에서 꺼내 씁니다. 같은 계산을 두 번 하지 않아 경우의 수가 폭발하는 문제를 칸 수만큼의 계산으로 풉니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘동적 계획법https://oseungkwon.github.io/algorithm/merge-sort/https://oseungkwon.github.io/algorithm/merge-sort/배열을 한 칸이 될 때까지 반씩 나눈 뒤, 정렬된 두 절반의 맨 앞끼리 비교하며 합쳐 올라옵니다. 어떤 입력이 들어와도 O(n log n)에 끝납니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘정렬https://oseungkwon.github.io/algorithm/prefix-sum/https://oseungkwon.github.io/algorithm/prefix-sum/앞에서부터 더해 온 합을 칸 사이마다 적어 두면, 어떤 연속 구간의 합이든 두 값의 차 한 번으로 구할 수 있습니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘누적 합https://oseungkwon.github.io/algorithm/quickselect/https://oseungkwon.github.io/algorithm/quickselect/pivot 하나를 기준으로 작은 수와 큰 수를 양쪽으로 나누면 pivot의 자리가 확정됩니다. 찾는 순위가 있는 쪽만 다시 나누면, 전체를 정렬하지 않고도 k번째로 큰 수를 평균 O(n)에 찾습니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘정렬https://oseungkwon.github.io/algorithm/three-way-partition/https://oseungkwon.github.io/algorithm/three-way-partition/값이 세 종류뿐인 배열을 포인터 세 개로 한 번 훑어 정렬합니다. 배열을 앞쪽, 가운데, 뒤쪽 구역으로 나누고, 읽은 값을 제 구역으로 바꿔 넣습니다.Fri, 25 Sep 2026 00:00:00 GMT알고리즘정렬https://oseungkwon.github.io/post/tanstack-query-beyond-use-query/https://oseungkwon.github.io/post/tanstack-query-beyond-use-query/가상의 매장 관리 화면에서 데이터가 언제 낡고 지워지는지부터, 목록 이동과 변경 요청 뒤 어떤 쿼리를 다시 읽을지까지 TanStack Query v5로 따라갑니다.Thu, 24 Sep 2026 00:00:00 GMTTanStack QueryReact서버 상태캐시https://oseungkwon.github.io/algorithm/backtracking/https://oseungkwon.github.io/algorithm/backtracking/하나씩 골라 보다가 더 고를 것이 없으면 앞으로 돌아가 다른 것을 골라 보는 방식으로, 가능한 경우를 빠짐없이 만듭니다.Thu, 24 Sep 2026 00:00:00 GMT알고리즘완전 탐색https://oseungkwon.github.io/post/web-cache-nextjs/https://oseungkwon.github.io/post/web-cache-nextjs/상품 페이지를 다시 열 때 브라우저, CDN, Next.js 서버가 각각 무엇을 재사용하는지 따라가고, 상품 수정 후 이전 값이 남는 위치를 찾습니다.Wed, 23 Sep 2026 00:00:00 GMTNext.jsHTTP캐시CDNCloudFronthttps://oseungkwon.github.io/post/nodejs-runtime-anatomy/https://oseungkwon.github.io/post/nodejs-runtime-anatomy/Next.js의 무거운 페이지를 요청했을 때 가벼운 페이지까지 늦어진 실험에서 출발해, Node.js의 메인 스레드와 이벤트 루프가 요청을 처리하는 방식을 짚습니다.Mon, 21 Sep 2026 00:00:00 GMTNode.jsNext.js이벤트 루프libuvhttps://oseungkwon.github.io/post/javascript-closures/https://oseungkwon.github.io/post/javascript-closures/배열 콜백과 React 이벤트 핸들러가 바깥 변수를 읽는 이유를 따라가며, 같은 원리로 상태를 보관하는 카운터와 Zustand 코드를 설명합니다.Sun, 20 Sep 2026 00:00:00 GMTJavaScript클로저Zustandhttps://oseungkwon.github.io/post/javascript-hoisting/https://oseungkwon.github.io/post/javascript-hoisting/검증 함수의 선언문을 화살표 함수로 바꾸자 ReferenceError가 나는 이유를, 이름이 만들어지고 값이 들어가는 순서로 풀어봅니다.Sat, 19 Sep 2026 00:00:00 GMTJavaScript호이스팅TDZhttps://oseungkwon.github.io/post/nextjs-docs-performance/https://oseungkwon.github.io/post/nextjs-docs-performance/Next.js 패키지에 포함된 문서를 기준으로 요청 병렬화, 캐시, 번들 분리, 스트리밍을 예제에 적용하고 변경 전후의 측정값을 비교합니다.Thu, 17 Sep 2026 00:00:00 GMTNext.jsReact성능 최적화Server ComponentsAIhttps://oseungkwon.github.io/post/react-event-propagation/https://oseungkwon.github.io/post/react-event-propagation/삭제 버튼을 눌렀는데 부모 항목까지 열리는 예제로, 브라우저의 이벤트 전파와 React가 onClick 핸들러를 실행하는 순서를 소스 코드에서 확인합니다.Tue, 15 Sep 2026 00:00:00 GMTReactDOM이벤트소스 코드 분석https://oseungkwon.github.io/post/higher-order-functions/https://oseungkwon.github.io/post/higher-order-functions/람다 계산법에서 시작해 함수를 값으로 다루는 방식을 짚고, JavaScript의 배열 메서드와 함수 생성·로깅 예제로 고차 함수의 쓰임을 설명합니다.Wed, 09 Sep 2026 00:00:00 GMTJavaScript고차 함수람다함수형 프로그래밍https://oseungkwon.github.io/post/thoughts-on-fsd-architecture/https://oseungkwon.github.io/post/thoughts-on-fsd-architecture/실제 프로젝트에 FSD를 적용하며 Feature가 페이지별로 늘어나고 모델·API의 위치도 애매해졌습니다. 주문 코드에서 경계를 다시 정한 과정을 담았습니다.Thu, 03 Sep 2026 00:00:00 GMTFSDFrontend ArchitectureReactTypeScript도메인 모델링https://oseungkwon.github.io/post/dependency-inversion-address/https://oseungkwon.github.io/post/dependency-inversion-address/배송지 입력 예제에서 카카오 주소 검색 SDK와 배송 가능 지역 판단이 컴포넌트에 섞이는 과정을 따라가며, 책임과 의존 방향을 차례로 정리합니다.Tue, 04 Aug 2026 00:00:00 GMTReactTypeScript의존성 역전리팩터링아키텍처프론트엔드https://oseungkwon.github.io/post/figma-mcp-design-system-hook/https://oseungkwon.github.io/post/figma-mcp-design-system-hook/Figma MCP가 놓친 컴포넌트 이름과 속성을 API로 복원한 뒤, 디자인 시스템과 연결할 정보를 압축해 전달하는 훅을 만들었습니다.Wed, 08 Jul 2026 00:00:00 GMTFigma MCPMCP디자인 시스템AIClaude Code프론트엔드https://oseungkwon.github.io/post/declarative-tracking/https://oseungkwon.github.io/post/declarative-tracking/컴포넌트에 흩어진 클릭·노출 트래킹을 data attribute와 이벤트 맵으로 옮기고, 브라우저 API로 감지하도록 만든 과정입니다.Tue, 07 Jul 2026 00:00:00 GMT트래킹선언적 프로그래밍MutationObserverIntersectionObserver아키텍처프론트엔드https://oseungkwon.github.io/post/file-system-api/https://oseungkwon.github.io/post/file-system-api/File System API의 파일·디렉터리 인터페이스를 살펴보고, FileSystemWritableFileStream으로 대용량 파일을 저장한 과정을 소개합니다.Wed, 21 Jan 2026 00:00:00 GMTWeb APIsFile System APIFileSystemWritableFileStream스트리밍 다운로드대용량 파일 다운로드https://oseungkwon.github.io/post/breaking-free-from-backend/https://oseungkwon.github.io/post/breaking-free-from-backend/API가 완성되기 전에도 화면을 개발할 수 있도록 도메인 모델과 어댑터를 만들고, MSW로 서버 응답을 재현한 과정을 담았습니다.Thu, 15 Jan 2026 00:00:00 GMTMSW어댑터 패턴프론트엔드아키텍처Domain ModelMockhttps://oseungkwon.github.io/post/analyze-zustand/https://oseungkwon.github.io/post/analyze-zustand/Zustand의 create가 상태와 구독자를 관리하는 코드부터 useStore가 React 컴포넌트를 스토어에 연결하는 코드까지 따라갑니다.Sat, 20 Dec 2025 00:00:00 GMTZustand상태 관리 라이브러리ReactuseSyncExternalStorehttps://oseungkwon.github.io/post/expandable-table-component/https://oseungkwon.github.io/post/expandable-table-component/기능이 뒤섞인 기존 테이블을 정리하고, 가상화로 DOM 노드를 줄인 뒤 컴파운드 컴포넌트로 사용 방식을 다시 설계했습니다.Fri, 19 Dec 2025 00:00:00 GMTReact컴포넌트디자인 시스템가상화컴파운드 컴포넌트 패턴https://oseungkwon.github.io/post/design-system-refactoring/https://oseungkwon.github.io/post/design-system-refactoring/요구사항마다 props가 늘어나던 공통 컴포넌트를 HTML 속성 상속과 합성 패턴으로 고치고, 폴더 구조와 Storybook까지 정리한 과정입니다.Sun, 07 Dec 2025 00:00:00 GMTDesign SystemReact컴포넌트 아키텍처프론트엔드Compound ComponentsFigmahttps://oseungkwon.github.io/post/bridge-design/https://oseungkwon.github.io/post/bridge-design/iOS와 Android의 브릿지 호출 방식을 통합하고, 웹뷰가 준비되기 전에 도착한 이벤트를 놓치지 않도록 큐를 둔 과정을 다룹니다.Sat, 06 Dec 2025 00:00:00 GMTWebView브릿지iOSAndroidReact아키텍처