mason-log.

sprite image 전처리.

Webpack 빌드와의 호환 문제를 피하기 위해 이미지 스프라이트 생성을 Node 전처리 단계로 분리하고, WebP 이미지와 SCSS 코드를 자동 생성한 과정을 기록해 본다.

# webpack# image-sprite# nodejs# scss

스프라이트 애니메이션 패키지, mason-sprite.

React, Vue, Svelte에서 함께 사용하는 스프라이트 애니메이션 패키지를 만들고, 실제 사용 중 발견한 로딩 문제를 고쳐 v0.1.8까지 발전시킨 과정을 기록해 본다.

# mason-sprite# sprite-animation# npm# opensource

하네스 엔지니어링.

AI한테 잘 시키는 법이, 말 잘하기에서 문서 주기, 일하는 환경 만들기로 어떻게 바뀌었는지 정리해 본다.

# harness-engineering# prompt-engineering# context-engineering# ai-agents

AWS 배포, 한 번에 정리하기.

프론트 배포에서 자주 마주치는 S3, CloudFront, EC2, ECS를 쉬운 말로 묶어 정리해 본다.

# aws# s3# cloudfront# ecs

Next.js App Router.

Next.js 15를 기준으로 App Router의 라우팅 구조, 서버와 클라이언트 경계, 비동기 params와 데이터 캐시를 정리해 본다.

# nextjs# react# app-router

E2E 테스트 (Playwright).

E2E 테스트가 무엇을 검사하는지, Playwright로 어떻게 작성하고 안정적으로 유지하는지 정리해 본다.

# e2e# playwright# testing# ci

masoneffect NPM Update.(ver2)

masoneffect v2.x 멀티 이펙트 패키지 업데이트 과정 기록.

# npm# masoneffect# treeshaking# 최적화

React Bits에 MasonEffect를 제안하며 배운 것.

React Bits에 MasonEffect를 제안하며 컴포넌트 레지스트리, 4가지 variant, 메타데이터 자동화와 오픈소스 기여 절차를 살펴본다.

# masoneffect# reactbits# opensource

패키지 배포, 그 이후.

masoneffect npm package 배포 이후 홍보를 통해 예상보다 빠르게 사용자 피드백이 모였고, 다음 방향을 정하는 계기가 되었다.

# masoneffect# tmi

masoneffect NPM 개발 기록.(ver1)

text -> particle 효과 구현과 NPM Package 개발 과정

# masoneffect# react# vue# vanillajs

렌더링 타입 (CSR, SSR, SSG, ISR).

CSR, SSR, SSG, ISR는 HTML을 언제 만드느냐로 나눈 렌더링 타입이다. 동작과 고르는 기준을 정리해 본다.

# rendering# csr# ssr# isr

블로그 리리뉴얼.

Jekyll 기반 기존 블로그의 한계를 정리하고, 익숙한 기술 스택으로 운영과 작성 경험을 다시 설계한 과정을 기록해 본다.

# blog# renewal# oauth