React Native
React Native + Expo + Metro + 네이티브 구현 완전 해설
Metro, JSI, Codegen, Expo의 작동 원리부터 Expo SDK로 커버할 수 없는 네이티브 구현 영역까지, React Native의 내부 동작을 일관되게 해설합니다.
Back to Home
Blog
Technical blog posts about web development, AI integration, and modern frontend technologies.
Topics
Timeline
AWS
Amazon Route 53에서 취득한 도메인을 CloudFront에서 사용하는 방법
Amazon Route 53에서 취득한 도메인을 CloudFront의 커스텀 도메인으로 설정하는 절차를 설명합니다. ACM 인증서 발급, Route 53의 A/AAAA 별칭 레코드 생성, 메인 도메인과 서브도메인을 서로 다른 배포에 할당하는 구성까지 다룹니다.
AI
AI 코딩 에이전트를 전제로 한 모바일 앱 개발: 네이티브 vs 크로스플랫폼
Claude Code, GitHub Copilot, Cursor 같은 에이전트를 주력으로 사용하는 전제에서 네이티브(Swift/Kotlin), Flutter, React Native를 비교합니다. 하이브리드 구현의 현실과 AI와의 궁합을 검토합니다.
Three.js
STELLAR EPOCH: APHELION — 무료 브라우저 우주 인크리멘털 게임
무료 브라우저 우주 인크리멘털 게임 STELLAR EPOCH: APHELION. 설치 불필요, 모바일/PC에서 플레이 가능, 동적 이벤트와 진짜 엔딩이 있습니다.
OpenAI
OpenAI API: Responses API 및 Structured Outputs 사양 및 구현 가이드
2025년 OpenAI Responses API 및 Structured Outputs 가이드. 서버 사이드 상태 관리, 내장 MCP 도구, 모델 출력의 100% 스키마 준수.
WebLLM
브라우저에서 LLM 실행하기 — WebLLM 완전 가이드
WebLLM 가이드: WebGPU, WebAssembly, Web Workers를 이용한 브라우저 내 LLM 실행. 아키텍처, 벤치마크, 지원 모델, 구현 방법을 다룹니다.
draw.io
draw.io MCP로 SAM 템플릿에서 AWS 아키텍처 다이어그램 자동 생성하기
draw.io MCP 서버와 VS Code의 Draw.io Integration 확장을 사용해 SAM 템플릿에서 AWS 아키텍처 다이어그램을 생성하는 실용 가이드.
Spec-Driven Development
스펙 주도 개발(SDD) 환경 비교: SpecKit vs Kiro
두 가지 SDD 접근 방식 비교: VSCode + GitHub Copilot + SpecKit vs Kiro IDE. 설정, 워크플로우, 생성 문서, 활용 사례 추천을 다룹니다.
GitHub Actions
OIDC 인증으로 GitHub Actions에서 AWS에 배포하기
GitHub Actions와 AWS 간 OIDC 인증 설정. IAM Identity Provider, 신뢰 정책, S3, ECS, SAM을 위한 안전한 CI/CD 파이프라인을 다룹니다.
React
URL 공유 가능한 비디오 체인 플레이어 — Vite + React로 구축 (상태 동기화 / i18n / AWS 배포)
Video Chain Player: 비디오 세그먼트를 연결하고 URL로 공유. Vite + React 18로 구축하며 URL 상태 동기화, i18n, OIDC를 이용한 AWS 배포를 다룹니다.
GitHub Copilot
VS Code에서 GitHub Copilot 커스터마이징하기
VS Code에서의 GitHub Copilot 커스터마이징: 커스텀 지시사항, 프롬프트 파일, 커스텀 에이전트, 에이전트 스킬, MCP 서버 연동을 실용적인 코드 예시와 함께 소개합니다.
AI
MCP로 VSCode와 Blender를 연동해 AI 3D 모델링 환경 구축하기
VSCode + Blender를 MCP로 연동한 AI 3D 모델링 환경 구축: uv 설치, MCP 서버 설정, Blender 애드온 추가, 자연어로 Blender 조작하기.
Next.js
Own Info App 출시 — Next.js (SSG) × S3 × CloudFront로 만든 미니멀 앱
S3 + CloudFront에서 실행되는 다국어 Next.js 15 SSG 앱. 네트워크/디바이스 정보를 복사/공유 기능과 함께 표시, CloudFront URL 리라이팅, GitHub Actions CI/CD 파이프라인을 포함합니다.
Next.js
Next.js × Zustand를 이용한 상태 관리 리팩터링
Zustand를 이용한 Next.js 15 상태 관리 리팩터링: 슬라이스 패턴, Bounded Store, 세션 퍼시스턴스, TTL 캐싱, 재시도 메커니즘.
Next.js
Next.js App Router + Static Export를 이용한 다국어 아키텍처
React Context를 이용한 i18n과 UX를 위한 클라이언트 사이드 언어 감지를 사용하는 Next.js 15 다국어 정적 내보내기 아키텍처 (SSG).