Front-end/work 15

이직하고 첫달 만에 300커밋 때려박기 - AI 에이전트 주도 개발 아키텍처 설계

2월쯤에 스타트업으로 이직했는데요.스타트업가면 으쌰으쌰 분위기에 재밌겠다! 싶어 왔는데 와서 보니 유사 디스토피아더라고요;;충격과 공포의 업무량을 소화하기 위해 사용한 방식을 소개합니다! 1. 물리적으로 작업 공간을 분리하는 방법: Git Worktree + TmuxAI 에이전트를 활용한 개발에서 가장 먼저 마주하게 되는 문제는 작업 공간 충돌입니다.기존의 단일 브랜치 기반 작업 방식은 구조적으로 순차적인 작업을 강제하기 때문에, 여러 AI를 활용한 병렬 작업에 한계가 있습니다. 1.1 단일 브랜치 방식의 한계와 컨텍스트 오염 문제예를 들어, 로그인 기능을 개발하시다가 갑작스럽게 결제 관련 긴급 버그를 수정해야 하는 상황을 가정해 보겠습니다.이 경우 일반적으로는:작업 내용을 stash 하거나 임시 커밋을..

Front-end/work 2026.03.28

경계값 분석으로 테스트 코드짜기

🧐 왜 버그는 항상 '끝'에서 터질까? : 경계값 분석(BVA) 깊게 파보기테스트 케이스를 짤 때 모든 경우의 수를 다 검사하는 건 불가능에 가깝습니다. 그렇다면 가장 효율적으로 버그를 잡아낼 수 있는 지점"은 어디일까요? 경험 많은 테스터들은 입을 모아 말합니다. 바로 '경계(Boundary)'라고요.1. 경계값 분석(BVA)이란?경계값 분석은 동등 분할(Equivalence Partitioning)의 연장선에 있는 기법입니다. 데이터나 상태의 범위가 있을 때, 그 범위의 최솟값과 최댓값 근처에서 결함이 발생할 확률이 높다는 가설을 바탕으로 테스트 케이스를 설계하는 방법이죠.우리가 흔히 겪는 'Off-by-one error'(부등호를 >로 쓸 걸 >=로 써서 생기는 1 차이의 버그)를 잡아내는 데 특..

Front-end/work 2026.03.16

MCP를 통한 문서화 기반(Document-Driven Development) 개발 시스템 만들기

AI와 mcp를 써보고, 느낀 점을 적어보았습니다.앞으로는 잘 정리된 히스토리(문서)가 개발에서 가장 중요한 자산이지 않을까 생각됩니다.문서화 기반 개발(Document-Driven Development)문서화 기반 개발이란 말 그대로 문서를 중심으로 요구사항 도출, 디자인, 개발, 테스트를 하나의 피드백 루프로 통합하는 접근 방식입니다. 기존의 코드 중심 개발(Code-Driven Development)과 달리 개발의 진입점(entry point)이 문서입니다. 팀은 문서를 작성하며 시스템의 동작을 정의하고, 이 문서가 곧바로 설계 명세서가 되며, 나아가 테스트의 기준선 역할까지 수행합니다. 문서가 곧 팀의 공통 언어이자 설계서이고, 또 코드에 대한 검증 기준이 되는 셈입니다. 잘 정립된 문서는 개발자..

Front-end/work 2025.10.30

AI가 디자인을 코드로 옮기는 시대: MCP로 퍼블리싱 워크플로우 자동화하기

요즘 MCP(Model Context Protocol)를 활용해 실무에 어떤 기능들을 적용할 수 있을지 살펴보고 있습니다. 그중에서도 특히 Cursor 에디터와 Figma를 MCP로 연동하여 디자인-to-코드 퍼블리싱 워크플로우를 자동화하는 방법을 테스트해보았는데요. 이번 글에서는 그 과정을 정리해서 공유드리고자 합니다. 개인적으로는 GAN(생성적 적대 신경망) 구조에서 영감을 받아, 마치 Generator(코드 생성)와 Discriminator(코드 리뷰)가 서로 경쟁하며 결과물을 개선하는 형태로 구현해 보았습니다. ** GAN이 뭐냐면?더보기쉽게 말해서: “서로 경쟁하며 발전하는 두 AI”GAN(Generative Adversarial Network)은 두 개의 인공지능이 서로 경쟁하면서 더 나은 ..

Front-end/work 2025.10.20

모듈화 관점에서의 오염

요즘 회사에서 일하던 프로젝트가 잘되서(?) 사업의 스케일이 커졌고, 모듈리식 레포지토리에서 작은 도메인 단위의서브 프로젝트 여러개로 쪼개는 모노레포 리펙토링 작업을 진행하고 있다 공통 로직이랑 중복 코드를 추출하면서, 자연스럽게 추출 및 활용이 쉬운 코드와 어려운 코드가 나뉘는 걸 체감하고 있다. 처음엔 단순히 코드 복잡도나 의존성 때문이라고 생각했는데, 계속 리팩토링을 하다 보니까 그 차이의 본질이 결국 오염(contamination) 이라는 생각이 들었다. 한 모듈의 상태나 로직이 다른 곳에 얼마나 퍼져 있느냐, 그게 오염의 정도다.오염이 심할수록 추출이 어렵고, 반대로 모듈 경계가 깔끔하게 지켜진 코드일수록 손쉽게 분리된다. 이를 “모듈화 관점에서의 오염(contamination)”은, 한 모듈의..

Front-end/work 2025.10.11

커서 룰(Cursor Rule), 팀 문서 퀄리티 자동으로 챙기는 꿀팁

최근 회사에서 커서를 구매해줘서 써봤는데, 인생이 달라졌습니다.. 지금까진 뗀석기로 개발한 기분인데요 아무튼 cursor를 쓰면서, 내가 원하는 스크립트를 미리 입력하는 방법을 찾고 있었는데"rule" 이라는 방법을 찾아서 간단히 공유하고, 제가 실제로 어떻게 쓰는지 몇가지 케이스를 공유해볼려고 합니다. Cursor AI IDE의 룰(Rule), 이렇게 활용합니다 Cursor AI IDE의 룰(Rule)은 개발자가 원하는 코딩 원칙과 팀 규칙을 AI에게 전달하는 일종의 “가이드라인 문서”입니다.보통 코드 스타일이나 문법 규칙은 ESLint, Prettier 같은 도구가 처리합니다. 하지만 Cursor 룰은 그보다 상위 개념으로, AI가 코드를 생성하는 순간부터 개발자 또는 팀의 철학과 컨벤션을 반영할 ..

Front-end/work 2025.09.02

디자인 시스템을 위한 개발 환경 boilerplate 자동 생성 script 구현하기

사내 디자인 시스템을 만들고 있었는데배포 및 개발 환경 관련해서 여러가지 피드백 및 요청이 왔습니다..! 1. 배포 환경을 갖추기 어려운데 자동화 스크립트가 있으면 좋을거 같다.2. 초심자도 쉽게 배포하고 빌드하면 좋을 것 같다. 특히, 각 컴포넌트를 하나의 모노 레포지토리로 관리하고 있고 내부에서 turbo repo, rollup, jest 등 많은 개발 라이브러리를 사용하고 있는데 시행착오를 많이 겪으시는거 같아서 boilerplate 생성 스크립트를 하나 작성했고, 블로그에도 공유해 봅니다.  생성 스크립트 더보기const fs = require('fs')const path = require('path')const readline = require('readline')const { exec } = ..

Front-end/work 2024.06.13

사내 디자인 시스템 관련 용어 & 기술 정리

사내에서 프로젝트 별 코드의 파편화를 줄이고 디자인 시스템을 만들려고 하고 있다. 인수인계 겸 정리한 문서를 공개해도 상관 없을꺼 같아서 블로그에 간단 정리해본다. 사용 툴 🏎 Turborepo — 모노레포 라이브러리로 여러 패키지나 프로젝트 간의 의존성 관리를 효율화하고 Monorepo 내에서 빌드 프로세스를 간소화 🚀 React — 프론트엔드 사용 라이브러리 🛠 Parcel — 번들러로 설정 없이 간편하게 쓸 수 있어서 사용, 추후 rollup으로 변경될 가능성도 있음 📖 Storybook — UI 컴포넌트 문서화 및 공유 & 협업용 TypeScript는 정적 타입 검사를 위한 도구 ESLint는 코드 린팅을 위한 도구 Prettier는 코드 포맷팅을 위한 도구 Changesets는 버전 관리와 변경..

Front-end/work 2024.03.23

Null 전파를 막자

함수나 react의 props로 가끔 피치 못할 사정으로 nullable한 값을 내려보낼 때가 있다. function example(a?: number, b?:number) { if(isNil(a) || isNil(b)) ... // null 방어 코드 .. } null값이면 해당 parameter를 사용 못하니 Nullish coalescing operator(??) 나 Optional chaining(?.)를 사용해서 방어 로직을 짜게 되는데, 그러다보면 nullable한 변수를 쓰는 곳마다 방어로직을 넣게 되고 다른 함수의 정보가 넘어오다보니 코드의 유연성과 안정성이 떨어지는 문제가 발생한다. 그래서 Null 전파를 막지는 못해도 피하는 방법에 대해 써보려고 한다. 실제 예시 지금 테이블 라이브러리..

Front-end/work 2023.11.04