성장 증거
제가 사용하는 기술과 도구들입니다
총 기술 수
28
카테고리
7
주요 트랙
Frontend
TypeScript
판별 유니온과 satisfies로 도메인 규칙을 타입 레이어에 담습니다.
코드 워크스루 준비 중…
const tech = {
name: 'React',
category: ['Frameworks & Libraries'],
beforeCode: 'const count = 0',
afterCode: 'const [count] = useState(0)',
};무엇이 달라졌는가
느슨한 객체 리터럴에서 satisfies로 검증된 판별 유니온(kind: 'code' | 'narrative')으로 바뀝니다. 누락된 필드를 호출부가 아닌 정의 시점에서 TypeScript가 잡아냅니다.
AI 에이전트 엔지니어링
중요한 신호는 Codex나 Claude Code를 쓸 줄 안다는 사실 자체가 아닙니다. 사람과 에이전트 모두가 실행 가능한 범위, 입력 계약, 검증 루프, 증거 산출물을 설계할 수 있다는 점입니다.
핵심 주장
모호한 요청을 범위, 제약, 성공 기준이 선명한 구현 단위로 바꿉니다.
워크플로우
먼저 저장소의 실제 구조와 제약을 확인한 뒤, 인계 가능한 작업 단위와 인터페이스, 완료 기준으로 분해합니다.
Codex
Codex는 실제 저장소 편집, 테스트 실행, 반복 검증이 필요한 구현 작업에서 주 실행 표면으로 사용합니다.
Claude Code
Claude Code는 코딩 전후로 스펙 구조, 프롬프트 선명도, 작업 분해가 맞는지 다른 시각으로 점검할 때 유용합니다.
입력 계약
모든 작업에는 목표, 핵심 제약, 변경 범위, 기대 산출물, 완료를 증명할 체크를 함께 넣습니다.
검증
에이전트가 답을 냈다는 사실로 끝내지 않습니다. 결과가 소스, 문서, 테스트와 함께 맞물려야 합니다.
핵심 주장
CLI 도구, 저장소 지침, 프롬프트, 브라우저 자동화를 한 흐름으로 엮어도 맥락을 잃지 않게 설계합니다.
워크플로우
AGENTS.md, 작업별 프롬프트, 관련 경로, 허용된 명령 표면을 명시해 에이전트가 경계 안에서 움직이게 합니다.
Codex
Codex는 실제 프로젝트 문맥 안에서 저장소 중심 구현, 셸 기반 탐색, 테스트 중심 반복 작업을 담당합니다.
Claude Code
Claude Code는 프롬프트 구조와 작업 분해, 고맥락 리뷰 루프를 다른 관점에서 보완할 때 함께 사용합니다.
입력 계약
에이전트에게 느낌만 전달하지 않습니다. 정확한 파일/서브시스템 범위, 사용 가능한 도구, 기대 출력 형식을 같이 줍니다.
검증
오케스트레이션의 품질은 다른 엔지니어가 같은 산출물을 다시 보고 같은 결론에 도달할 수 있는지로 판단합니다.
핵심 주장
에이전트 출력이 그럴듯한 문장이 아니라 증거 기반 엔지니어링이 되도록 검증을 워크플로우에 내장합니다.
워크플로우
저장소 기본 체크, 페이지 단위 assertion, 그리고 무엇이 증거인지 설명하는 Markdown 기록으로 루프를 닫습니다.
Codex
Codex는 소스 수정, 라우트 메타데이터, 실행 가능한 체크를 하나의 작동하는 하니스로 묶는 데 사용합니다.
Claude Code
Claude Code는 작업 브리프, 프롬프트 표면, 관찰 결과가 계속 일치하는지 대조 리뷰어처럼 활용합니다.
입력 계약
계약은 서술형 요약으로 끝나지 않습니다. 실행 가능한 체크와 이름 붙은 증거 산출물까지 포함해야 합니다.
검증
이 포트폴리오에서는 UI, 소스 데이터, 테스트, markdown 문서가 서로 같은 이야기를 할 때만 증명이 성립합니다.
엔지니어블 하니스
인계, 재실행, 검증 단계를 견디지 못하는 워크플로우는 프로덕션 수준 엔지니어링이라고 보지 않습니다.
실제 목표, 강한 경계, 변경 범위, 중요한 완료 기준부터 고정합니다.
예시 표면
goal + constraints + acceptance criteria저장소 계약, 작업 프롬프트, 관련 경로를 함께 줘서 에이전트가 경계 안에서 작업하게 합니다.
예시 표면
AGENTS.md + prompts + repo paths패치가 존재한다는 사실이 아니라 출력이 실제로 동작한다는 점을 증명하는 저장소 기본 체크를 돌립니다.
예시 표면
pnpm lint && pnpm test -- --run && pnpm build다른 엔지니어가 의도를 다시 추측하지 않아도 되도록 문서, 소스, 테스트 증거를 남깁니다.
예시 표면
docs/agent-engineering.md + project source + tests제품 개발과 프론트엔드 시스템 구현에 사용하는 핵심 언어입니다.
TypeScript
판별 유니온과 satisfies로 도메인 규칙을 타입 레이어에 담습니다.
코드 워크스루 준비 중…
const tech = {
name: 'React',
category: ['Frameworks & Libraries'],
beforeCode: 'const count = 0',
afterCode: 'const [count] = useState(0)',
};무엇이 달라졌는가
느슨한 객체 리터럴에서 satisfies로 검증된 판별 유니온(kind: 'code' | 'narrative')으로 바뀝니다. 누락된 필드를 호출부가 아닌 정의 시점에서 TypeScript가 잡아냅니다.
확장 가능한 인터페이스를 위한 프레임워크와 상태 관리 패턴입니다.
React
수동 loading 상태를 React 19의 내장 액션 모델로 교체합니다.
코드 워크스루 준비 중…
function CheckoutButton({ items }) {
const [loading, setLoading] = useState(false);
async function handleClick() {
setLoading(true);
await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify(items),
});
setLoading(false);
}
return <button onClick={handleClick}>Buy</button>;
}무엇이 달라졌는가
임시 useState 플래그에서 useActionState로 넘어갑니다. form의 action prop이 비동기 흐름을 담당하고, isPending이 수동 토글을 대체하며, 성공 콜백이 깔끔하게 합성됩니다.
제품 데이터 저장과 분석 흐름에 활용하는 데이터 레이어 기술입니다.
Supabase
BaaS 속도와 Postgres 깊이를 함께 — 인증, 실시간, RLS를 하나의 플랫폼에서.
설명 중심 워크스루
Supabase는 BaaS 속도로 빠르게 구축하면서도 Postgres의 완전한 제어권을 포기하지 않아도 될 때 선택합니다. Row Level Security는 인가 규칙을 DB 안에 직접 담아 API 라우트를 얇게 유지하고, 접근 정책을 스키마와 함께 버전 관리할 수 있게 합니다. 실시간 레이어는 폴링 없이 WebSocket push 방식으로 데이터를 전달해 협업·라이브 업데이트 UI에 자연스럽게 맞아떨어집니다. Supabase의 자동 생성 REST API와 타입드 클라이언트 덕분에 스키마 자체가 계약이 되고, 브레이킹 체인지는 운영 환경이 아닌 빌드 타임에 드러납니다.
무엇이 달라졌는가
인가 로직을 애플리케이션 코드에서 꺼내 DB 레이어의 Row Level Security 정책으로 옮깁니다. 버그 발생 여지가 줄고, 접근 규칙이 스키마와 함께 버전 관리됩니다.
유지보수 가능한 UI를 위한 디자인 시스템 및 스타일링 전략입니다.
안정적인 배포를 위한 품질 검증 도구입니다.
Playwright
테스트를 단조로운 await 나열이 아닌, 읽기 좋은 step 구조로 작성합니다.
코드 워크스루 준비 중…
test('tech stack page', async ({ page }) => {
await page.goto('/en/tech-stack');
});무엇이 달라졌는가
단순 페이지 이동에서 이름 있는 test.step 블록으로 전환합니다. 각 assertion이 범위를 가지고, 실패 시 어느 step이 깨졌는지 바로 파악되며, 테스트 리포트가 제품 스펙처럼 읽힙니다.
일상적인 개발 실행, 협업, AI 에이전트 작업에 사용하는 도구입니다.
Playwright
테스트를 단조로운 await 나열이 아닌, 읽기 좋은 step 구조로 작성합니다.
코드 워크스루 준비 중…
test('tech stack page', async ({ page }) => {
await page.goto('/en/tech-stack');
});무엇이 달라졌는가
단순 페이지 이동에서 이름 있는 test.step 블록으로 전환합니다. 각 assertion이 범위를 가지고, 실패 시 어느 step이 깨졌는지 바로 파악되며, 테스트 리포트가 제품 스펙처럼 읽힙니다.
풀스택 구현에서 사용하는 서버 및 플랫폼 기술입니다.
Next.js
PageProps와 async params로 완전한 타입 안전성을 갖춘 서버 우선 라우트를 만듭니다.
코드 워크스루 준비 중…
"use client";
export default function TechStackPage() {
const [selected, setSelected] = useState('React');
return <TechStackExperience selected={selected} />;
}무엇이 달라졌는가
클라이언트 중심 페이지 셸에서 PageProps<'/route'>로 타입이 지정된 async 서버 컴포넌트로 전환합니다. next typegen이 생성하는 글로벌 헬퍼로 수동 타입 선언 없이 params를 Promise로 안전하게 다룰 수 있습니다.