JavaScript ES6의 Proxy와 Reflect를 활용한 메타프로그래밍 완전 가이드입니다. 코드를 데이터처럼 다루어 런타임에 객체 동작을 제어하는 방법을 학습할 수 있습니다. 내성, 중재, 자기 수정의 3가지 핵심 기능과 실무 적용 사례, 모범 사례를 포함하여 동적 API 클라이언트, 성능 모니터링, 유효성 검사 등의 실용적인 예제를 제공합니다. 메타프로그래밍의 장단점과 사용해야 할 상황, 피해야 할 상황을 명확히 구분하여 설명합니다.

JavaScript 메타프로그래밍 가이드

REST API의 한계를 극복하는 RPC 방식을 Next.js Server Actions와 TanStack Start Server Functions 실제 구현 사례로 설명합니다. TypeScript와 Zod를 활용한 End-to-End 타입 안전성 구현 방법과 RPC 도입 시 고려해야 할 장단점, 적절한 사용 시점을 제시하여 중급 개발자의 기술 선택에 도움을 드립니다.

현대 풀스택 프레임워크가 RPC를 선택하는 이유

React 19의 새로운 use 훅으로 비동기 코드를 간소화하는 방법을 알아보세요. 기존 useEffect + useState 패턴을 50% 이상 단축하고, Promise와 Context를 효율적으로 처리하는 실무 활용법을 제공합니다.

React 19 use 훅으로 비동기 코드 간소화하기

React 프로젝트에 최적한 상태관리 라이브러리를 선택하는 완벽 가이드. Context API, Zustand, Valtio, MobX의 장단점을 실제 코드 예제로 비교하고, 프로젝트 복잡도별 선택 기준을 제시합니다. 2025년 최신 동향 반영.

React 상태관리 라이브러리 선정 가이드(Context API, Zustand, MobX, Valtio)

프론트엔드 라이브러리 보안 위험과 대응 방안을 다룹니다. npm 패키지 취약점, CDN 변조 공격, 의존성 상속 위험성과 함께 npm audit, SRI, CSP 등 실무진을 위한 보안 대책을 제시합니다.

라이브러리를 노린 보안 리스크

인증(AuthN)과 인가(AuthZ)의 핵심 개념부터 최신 보안 기술까지 상세히 설명합니다. 비밀번호 공격 유형과 대응책, 로그인 정보 보호 방법, FIDO/WebAuthn 등 최신 인증 트렌드를 알아보세요. 다중 인증(MFA)과 계정 보호 전략으로 보안을 강화하는 방법을 제시합니다.

인증과 인가의 이해 

CSRF, 클릭재킹, 오픈 리다이렉트 등 주요 웹 보안 취약점의 공격 원리와 방어 기법을 상세히 설명합니다. 실제 코드 예시와 함께 웹 개발자가 바로 적용할 수 있는 실용적인 보안 구현 방법을 제공합니다.

CSRF, 클릭재킹, 오픈 리다이렉트

XSS(Cross-Site Scripting) 공격으로부터 웹사이트를 보호하는 완전한 가이드. 프론트엔드 개발자를 위한 실무 적용 가능한 방어 코드, CSP 설정, Trusted Types 활용법을 단계별로 설명합니다.

XSS공격 이해하기

Spectre 사이드 채널 공격의 원리부터 SharedArrayBuffer를 이용한 실제 구현까지. 웹 브라우저에서 발생하는 보안 취약점과 Site Isolation 등 대응책을 코드 예시와 함께 상세히 분석합니다.

웹에서의 Spectre 공격 이해하기

CORS(Cross-Origin Resource Sharing)의 개념부터 실무 구현까지 한 글에 담았습니다. 동일 출처 정책, JSONP, 프리플라이트 요청, 서버 설정, 클라이언트 구현 방법을 실제 코드 예제와 함께 상세히 설명합니다.

CORS 이해하기 - 웹 크로스 도메인 통신 가이드

Next.js Server Actions와 TanStack Query를 활용한 데이터 페칭 완벽 가이드. API Routes 대비 Server Actions의 장점, CSRF 보안 메커니즘, App Router와 Pages Router에서의 TanStack Query 구현 방법을 실제 코드 예제와 함께 상세히 설명합니다.

Next.js Routes API와 Server Action의 차이,Tanstack Query 사용하기

HTTPS와 HSTS의 개념부터 작동 원리, TLS/SSL 인증서 체계, 웹 서버 설정 방법, SSL 스트리핑 방지까지 현대 웹 보안을 위한 모든 핵심 요소를 상세히 설명합니다.

HTTPS와 HSTS 핵심 이해

Next.js의 에러 핸들링과 로딩 전략을 알아봅니다. 예상 가능한 에러와 예상치 못한 에러 처리 방법, loading.js와 Suspense를 활용한 로딩 UI 구현 방법에 대해 정리했습니다.

Next.js에서의 에러 핸들링, 로딩 전략

Next.js App Router의 Layout과 Template 차이점을 실무 코드 예시와 함께 완벽 정리. 상태 유지, 페이지 전환 애니메이션, 라우트 파라미터 처리 방법부터 Pages Router 대안까지 모든 것을 다룹니다.

Next.js App Router의 Layout vs Template

Notion API를 활용해 GitHub Pages에 정적 블로그를 배포한 실제 경험과 과정을 공유합니다. SSG와 SSR의 적절한 선택, react-notion-x 라이브러리 활용법, 이미지 렌더링 문제 해결 방법까지 상세히 다룹니다. Kent C. Dodds와 Dan Abramov 같은 저명 개발자들의 관점도 함께 살펴봅니다.

Notion API를 이용해 정적 블로그 배포하기

Claude AI와 MCP(Model Context Protocol)를 활용해 코드 한 줄 없이 요가 클래스 데이터를 자동 수집하고, Supabase에 저장하는 파이프라인을 구축한 사례를 소개합니다. 크롤링, 위치 변환, 중복 필터링, 이미지 수집까지 모두 자동화한 실제 사례를 확인해보세요.

코드 한 줄 없이 데이터 수집 자동화? MCP로 해봤습니다

꽃다발 같은 사랑을 했다 영화를 보며 느낀 20대 청춘 사랑에 대한 성찰. 화려하지만 금세 지는 꽃다발 같은 사랑보다, 익숙함 속에서도 깊어지는 무르익은 사랑에 대한 개인적 사유와 철학을 담았습니다.

꽃다발 같은 사랑보단, 무르익어가는 사랑을

영화 '해피엔드'를 통해 현대 자본주의와 파시즘의 유사성을 탐구. 미셸 푸코의 판옵티콘 이론으로 한국 사회의 감시와 통제 메커니즘을 분석. 권위주의 문화와 민주주의의 한계에 대한 철학적 고찰.

감시 사회에서의 ‘해피엔드’

하루하루는 성실하게, 인생 전체는 되는 대로'라는 이동진 평론가의 통찰과 기시미 이치로의 '단념' 개념을 통해 진정한 꿈의 의미를 성찰합니다. 성실함과 꿈 사이의 역설, 그리고 단념을 통한 새로운 희망 찾기에 대한 깊은 사색을 담은 에세이입니다.

인생 전체는 되는대로

밤의 사색

왜 너는 편하게 살고자 하는가

중력과 은총

결코 나의 운명을 원망하지 않으리라

미셸 푸코의 ‘광기의 역사’ 읽기

기시미 이치로 『죽을 때까지 나를 다스린다는 것』을 통해 단념과 희망, 자기 수양의 철학을 성찰합니다. 아우렐리우스의 메시지와 함께 오늘을 살아내는 용기를 되새겨보세요.

죽을때까지 나를 다스린다는 것

보안까지 고려하는 진정한 프론트엔드 개발자로 성장하기 위해 모였습니다. 

Development

Insights

Reading

Study

Photos