로고

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

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

css
junggwanhun
junggwanhun

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

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

AI
junggwanhun
junggwanhun

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

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

setTimeoutjavascriptPromise
gwanhun1
gwanhun1

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

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

typescript
gwanhun1
gwanhun1

React.memo , useCallBack

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

React훅
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

React 화살표 함수 vs function 함수

1. 가독성 및 디버깅 기존 함수 및 디버깅: 기존 함수 선언에는 기본적으로 이름이 지정되어 React DevTools와 같은 도구에서 가시성이 향상됩니다. 이름이 지정된 함수는 실행 흐름을 추적하거나 문제를 디버깅할 때 더 쉽게 식별할 수 있습니다. 대규모 구성 요소나 빈번한 디...

React실무
gwanhun1
gwanhun1

결합도 응집도

결합도(Coupling)와 응집도(Cohesion) 소프트웨어 설계에서 결합도(Coupling)와 응집도(Cohesion)는 시스템의 모듈 간 관계를 설명하는 두 가지 중요한 개념입니다. 높은 응집도는 유지하되 결합도를 낮추는 것이 좋은 설계의 핵심입니다. 아래는 React, Ty...

React최적화
gwanhun1
gwanhun1

React 프로젝트에서 경로 관리

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

React실무
gwanhun1
gwanhun1