오승의 기술블로그

TanStack Query 제대로 알아보기

가상의 매장 관리 화면에서 데이터가 언제 낡고 지워지는지부터, 목록 이동과 변경 요청 뒤 어떤 쿼리를 다시 읽을지까지 TanStack Query v5로 따라갑니다.

Tech #TanStack Query #React #서버 상태 #캐시

지난 글

Next.js

Tech Sep 23, 2026

Next.js에서 만나는 웹 캐시: 무엇을 다시 하지 않기 위해 저장할까

상품 페이지를 다시 열 때 브라우저, CDN, Next.js 서버가 각각 무엇을 재사용하는지 따라가고, 상품 수정 후 이전 값이 남는 위치를 찾습니다.

Node.js

Tech Sep 21, 2026

Next.js 서버가 느려질 때 Node.js 안에서 일어나는 일

Next.js의 무거운 페이지를 요청했을 때 가벼운 페이지까지 늦어진 실험에서 출발해, Node.js의 메인 스레드와 이벤트 루프가 요청을 처리하는 방식을 짚습니다.

JavaScript

Tech Sep 20, 2026

클로저가 어려운 사람들을 위해

배열 콜백과 React 이벤트 핸들러가 바깥 변수를 읽는 이유를 따라가며, 같은 원리로 상태를 보관하는 카운터와 Zustand 코드를 설명합니다.

JavaScript

Tech Sep 19, 2026

함수 선언으로 알아보는 호이스팅

검증 함수의 선언문을 화살표 함수로 바꾸자 ReferenceError가 나는 이유를, 이름이 만들어지고 값이 들어가는 순서로 풀어봅니다.

Next.js

Tech Sep 17, 2026

Next.js 에이전트 가이드를 기반으로 성능 최적화 살펴보기

Next.js 패키지에 포함된 문서를 기준으로 요청 병렬화, 캐시, 번들 분리, 스트리밍을 예제에 적용하고 변경 전후의 측정값을 비교합니다.

React

Tech Sep 15, 2026

React에서 부모의 onClick이 실행되는 이유

삭제 버튼을 눌렀는데 부모 항목까지 열리는 예제로, 브라우저의 이벤트 전파와 React가 onClick 핸들러를 실행하는 순서를 소스 코드에서 확인합니다.

JavaScript

Tech Sep 9, 2026

고차 함수는 어디서 왔고, 왜 사용할까?

람다 계산법에서 시작해 함수를 값으로 다루는 방식을 짚고, JavaScript의 배열 메서드와 함수 생성·로깅 예제로 고차 함수의 쓰임을 설명합니다.

FSD

Tech Sep 3, 2026

FSD를 고민 없이 도입하면 안 되는 이유

실제 프로젝트에 FSD를 적용하며 Feature가 페이지별로 늘어나고 모델·API의 위치도 애매해졌습니다. 주문 코드에서 경계를 다시 정한 과정을 담았습니다.

React

Tech Aug 4, 2026

초기 구현에서 시작한 단계별 리팩터링

배송지 입력 예제에서 카카오 주소 검색 SDK와 배송 가능 지역 판단이 컴포넌트에 섞이는 과정을 따라가며, 책임과 의존 방향을 차례로 정리합니다.

Tech Jul 8, 2026

Figma MCP가 준 코드, 정말 디자인 시스템을 쓰고 있나요?

Figma MCP가 놓친 컴포넌트 이름과 속성을 API로 복원한 뒤, 디자인 시스템과 연결할 정보를 압축해 전달하는 훅을 만들었습니다.

Tech Jul 7, 2026

프론트엔드 트래킹, 선언적으로 풀어보니

컴포넌트에 흩어진 클릭·노출 트래킹을 data attribute와 이벤트 맵으로 옮기고, 브라우저 API로 감지하도록 만든 과정입니다.

Tech Jan 21, 2026

FileSystemWritableFileStream: 파일 스트리밍 다운로드

File System API의 파일·디렉터리 인터페이스를 살펴보고, FileSystemWritableFileStream으로 대용량 파일을 저장한 과정을 소개합니다.

Tech Jan 15, 2026

백엔드 의존성에서 탈출하기. with MSW & 어댑터 패턴

API가 완성되기 전에도 화면을 개발할 수 있도록 도메인 모델과 어댑터를 만들고, MSW로 서버 응답을 재현한 과정을 담았습니다.

Tech Dec 20, 2025

zustand 라이브러리 코드 분석하기

Zustand의 create가 상태와 구독자를 관리하는 코드부터 useStore가 React 컴포넌트를 스토어에 연결하는 코드까지 따라갑니다.

Tech Dec 19, 2025

확장성 있는 테이블 컴포넌트 구축하기

기능이 뒤섞인 기존 테이블을 정리하고, 가상화로 DOM 노드를 줄인 뒤 컴파운드 컴포넌트로 사용 방식을 다시 설계했습니다.

Tech Dec 7, 2025

유연하고 확장 가능하게 디자인 시스템 개선하기

요구사항마다 props가 늘어나던 공통 컴포넌트를 HTML 속성 상속과 합성 패턴으로 고치고, 폴더 구조와 Storybook까지 정리한 과정입니다.

Tech Dec 6, 2025

웹뷰 브릿지 설계 및 개선기

iOS와 Android의 브릿지 호출 방식을 통합하고, 웹뷰가 준비되기 전에 도착한 이벤트를 놓치지 않도록 큐를 둔 과정을 다룹니다.

주제

React 9 아키텍처 5 프론트엔드 5 JavaScript 3 Next.js 3 디자인 시스템 3 AI 2 TypeScript 2 Zustand 2 캐시 2 컴파운드 컴포넌트 패턴 2

최신 글

TanStack Query 제대로 알아보기

지난 글

Next.js에서 만나는 웹 캐시: 무엇을 다시 하지 않기 위해 저장할까

Next.js 서버가 느려질 때 Node.js 안에서 일어나는 일

클로저가 어려운 사람들을 위해

함수 선언으로 알아보는 호이스팅

Next.js 에이전트 가이드를 기반으로 성능 최적화 살펴보기

React에서 부모의 onClick이 실행되는 이유

고차 함수는 어디서 왔고, 왜 사용할까?

FSD를 고민 없이 도입하면 안 되는 이유

초기 구현에서 시작한 단계별 리팩터링

Figma MCP가 준 코드, 정말 디자인 시스템을 쓰고 있나요?

프론트엔드 트래킹, 선언적으로 풀어보니

FileSystemWritableFileStream: 파일 스트리밍 다운로드

백엔드 의존성에서 탈출하기. with MSW & 어댑터 패턴

zustand 라이브러리 코드 분석하기

확장성 있는 테이블 컴포넌트 구축하기

유연하고 확장 가능하게 디자인 시스템 개선하기

웹뷰 브릿지 설계 및 개선기

주제

그 외 태그

오승의 기술블로그 글 목록

최신 글

TanStack Query 제대로 알아보기

지난 글

Next.js에서 만나는 웹 캐시: 무엇을 다시 하지 않기 위해 저장할까

Next.js 서버가 느려질 때 Node.js 안에서 일어나는 일

클로저가 어려운 사람들을 위해

함수 선언으로 알아보는 호이스팅

Next.js 에이전트 가이드를 기반으로 성능 최적화 살펴보기

React에서 부모의 onClick이 실행되는 이유

고차 함수는 어디서 왔고, 왜 사용할까?

FSD를 고민 없이 도입하면 안 되는 이유

초기 구현에서 시작한 단계별 리팩터링

Figma MCP가 준 코드, 정말 디자인 시스템을 쓰고 있나요?

프론트엔드 트래킹, 선언적으로 풀어보니

FileSystemWritableFileStream: 파일 스트리밍 다운로드

백엔드 의존성에서 탈출하기. with MSW & 어댑터 패턴

zustand 라이브러리 코드 분석하기

확장성 있는 테이블 컴포넌트 구축하기

유연하고 확장 가능하게 디자인 시스템 개선하기

웹뷰 브릿지 설계 및 개선기

주제

그 외 태그