하네스만으로는 부족하다. (Dex Horthy)

HumanLayer 공동창업자 Dex Horthy의 AI Engineer 발표를 보고, AI 도구만 늘린다고 코드 품질이 따라오지 않는 이유를 정리해 본다.

# harness-engineering# software-factory# ai-agents# pr-review

설치형 하네스 패키지 활용. (Superpowers)

에이전트가 일하는 환경을 짜는 하네스 엔지니어링 다음에, Superpowers가 세션 훅과 스킬로 어떻게 도는지 속을 연다.

# superpowers# harness# agent# skills

V8 엔진의 동작 방식.

우리가 사용하는 JavaScript는 소스, 해석, 실행, 최적화 과정을 통해 실행된다. 그 층을 맡는 V8이 Heap을 어떻게 쓰는지 정리해 본다.

# v8# nodejs# javascript# memory

스타일링 방식 비교.

CSS, SCSS, CSS Modules, Tailwind, Emotion을 같은 축에서 비교하고, 프로젝트에서 무엇을 고를지 정리해 본다.

# css# scss# tailwind# emotion

이미지가 브라우저에서 렌더링 되는 과정.

<img>에 src를 넣은 뒤 화면에 보이기까지 단계를 정리하고, 그 타이밍을 알면 이미지 로딩 UX를 어떻게 챙길 수 있는지 본다.

# image# decode# browser# rendering

npm 스코프 배포.

unscoped와 scoped를 나눈 뒤, org 스코프, 2FA, Granular 토큰, Changesets linked로 올리는 절차를 정리해 본다.

# npm# organization# changesets# 2fa

오케스트레이션과 플래닝.

AI에게 바로 코드를 시키기보다, 플래닝으로 일을 나눈 뒤 오케스트레이션하는 쪽이 왜 덜 헤매는지 출처와 함께 정리해 본다.

# orchestration# ai-agents# planning# cursor

에이전트가 읽는 문서.

AI가 없는 export를 써 줄 때가 있다. 사람용 docs가 없어서가 아니라, AI가 어디 문서를 보면 되는지 입구가 없었던 경우다. llms.txt, context7, AGENTS.md를 쉽게 풀어 본다.

# llms-txt# context7# agents-md# ai-agents

Debounce와 Throttle.

스크롤, 검색 입력처럼 연속 호출이 많은 장면에서 Debounce와 Throttle을 어떻게 나눠 쓰는지 정리해 본다.

# debounce# throttle# javascript# performance

SEO와 AEO.

검색엔진 노출(SEO)과 AI 답변 채택(AEO)이 같은 크롤링에서 어떻게 갈라지는지, 프론트엔드에서 챙겨야 할 경계를 정리해 본다.

# seo# aeo# crawler# frontend

npm, Yarn, pnpm.

패키지 매니저를 고를 때 속도만 보면 놓친다. 의존성을 어떻게 풀어 두는지, 안 적은 패키지가 우연히 보이는 문제를 어떻게 막는지 기준으로 npm, Yarn, pnpm을 비교해 본다.

# npm# yarn# pnpm# package-manager

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

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

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

sprite image 전처리.

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

# webpack# image-sprite# nodejs# scss

하네스 엔지니어링.

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

HTTP 캐시.

브라우저 HTTP 캐시와 조건부 요청, 304를 실무에서 어떻게 나눠 쓰는지 정리해 본다.

# http# cache# performance# frontend

GRG Games 랭킹 SDK.

GRG Games는 웹에서 HTML5 미니게임을 바로 플레이하고 겨루는 플랫폼이다. 랭킹 SDK랑 서버 세션, 검증, 속도 제한을 어떻게 나눴는지 정리해 본다.

# grggames# sdk# ranking# security

i18n으로 글로벌 언어 처리.

UI 문구를 키로 분리하는 i18n의 개념부터, react-i18next 사용법과 문장 설계, locale, SEO 쪽 유의점까지 정리해 본다.

# i18n# react-i18next# frontend# locale

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

화면이 붙으려면 HTML을 만드는 렌더링이 필요하다. 그 시점을 CSR, SSR, SSG, ISR로 나눠 고르는 기준을 정리해 본다.

# rendering# csr# ssr# isr

블로그 리리뉴얼.

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

# blog# renewal# oauth