로고

[CSS/UI] 미디어 쿼리(@media)의 종말과 Container Queries'

1. Media Queries vs Container Queries 개념 비교** 설명: 뷰포트(화면 전체)가 줄어들 때만 반응하는 미디어 쿼리와, 부모 컨테이너의 크기에 따라 개별적으로 반응하는 컨테이너 쿼리의 차이를 직관적으로 보여주는 다이어그램입니다. 이미지: [유효하지 않은...

css
junggwanhun
junggwanhun

MSW로 스마트하게 개발하기.

1. 프론트엔드의 독립 선언, MSW란 무엇인가? 현대적인 웹 개발 프로세스에서 프론트엔드와 백엔드는 대개 병렬적으로 작업이 진행됩니다. 하지만 현실적으로 프론트엔드는 백엔드 API 없이는 화면에 데이터를 뿌려줄 수 없는 의존적인 구조를 갖게 됩니다. 여기서 발생하는 '대기 시간'...

MSW
gwanhun1
gwanhun1

React 프로젝트에서 경로 관리

React 프로젝트에서 @ 같은 alias(별칭)를 사용하지 않으면, 파일을 불러올 때 상대 경로를 사용해야 합니다. 1. Alias 없이 상대 경로 사용 import MyComponent from '../components/MyComponent'; 디렉토리가 깊어질수록 경로가 복...

React실무
gwanhun1
gwanhun1

코더(Coder)에서 지휘자(Orchestrator)로: 2026년 AI와 공존하는 개발자의 생존 전략

2024년이 AI 도구의 등장에 감탄하던 시기였다면, 2026년은 AI 에이전트(AI Agents)가 단순한 도구를 넘어 '가상 동료'로 완전히 자리 잡은 원년입니다. 이제 개발자들 사이에서 "AI가 내 일자리를 대체할까?"라는 질문은 사라졌습니다. 대신 우리에게 필요한 질문은 이...

AI
junggwanhun
junggwanhun

setTimeout(fn, 0) vs Promise: 누가 먼저 실행될까? (자바스크립트 실행 순서 분석)

자바스크립트 비동기 처리의 핵심: 이벤트 루프와 우선순위 완벽 정리 프론트엔드 개발을 하다 보면 비동기 코드가 예상과 다르게 동작해 당황하는 경우가 종종 발생합니다. 특히 setTimeout과 Promise가 섞여 있을 때 실행 순서를 정확히 예측하는 것은 자바스크립트 엔진의 동작...

setTimeoutPromisejavascript
gwanhun1
gwanhun1

"그저 쉬운 라이브러리?" 실무에서 뽑아먹는 Zustand 고급 테크닉 5가지

Zustand는 흔히 '러닝 커브가 낮다'고 평가받지만, 프로젝트가 커질수록 그 진가는 얼마나 정교하게 설계하느냐에 달려 있습니다. 단순히 set과 get을 쓰는 단계를 넘어, 성능 최적화와 아키텍처 관점에서의 고급 활용법을 공유합니다. 1. Selector 최적화: Atomic...

Zustand
junggwanhun
junggwanhun

React.memo , useCallBack

React.memo 목적: React.memo는 함수형 컴포넌트의 렌더를 최적화하기 위한 하이어오더 컴포넌트(HOC)로, 클래스 컴포넌트용 PureComponent와 유사하지만 함수형 컴포넌트에 특화되어 있습니다. 작동 원리: 함수형 컴포넌트가 React.memo로 래핑되면 해당 ...

React훅
gwanhun1
gwanhun1

Effect: TypeScript의 새로운 표준 라이브러리?

TypeScript의 미래, Effect 라이브러리 찍먹하기 (feat. 에러 핸들링) 2026년 현재, 프론트엔드와 백엔드를 막론하고 TypeScript 진영에서 가장 뜨거운 논쟁의 중심에는 Effect가 있습니다. 누군가는 "러닝 커브가 너무 높은 함수형 프로그래밍 놀이터"라고...

typescript
gwanhun1
gwanhun1

useScheduledRefetch

📌 기능 요약 특정 분(00, 15, 30, 45분)마다 자동으로 refetch를 실행하는 훅 여러 개의 refetch 함수를 배열로 받아 한 번에 실행 가능 자동으로 다음 실행 시간을 계산하여 주기적으로 호출 🛠 구현 방식 다음 실행 시각 계산 현재 분과 초를 가져와...

React
gwanhun1
gwanhun1

React 19 다시 보기: 서버 컴포넌트와 Actions 아키텍처

React 19 다시 보기: 서버 컴포넌트와 Actions 아키텍처 2026년 1월, 현재 프론트엔드 생태계에서 React 19는 더 이상 '새로운 기술'이 아닙니다. Next.js, React Router(구 Remix), TanStack Start 등 주요 메타 프레임워크들이 ...

react
gwanhun1
gwanhun1