AI랑 같이하는 코딩

목차1. 기능 추가가 기존 코드를 깨뜨리는 이유2. 안전한 기능 추가 요청의 핵심 원칙3. 복붙해서 쓰는 실전 요청 템플릿4. 적용 후 회귀 버그를 막는 점검법5. 자주 묻는 질문1. 기능 추가가 기존 코드를 깨뜨리는 이유AI에게 새 기능을 요청할 때 가장 흔한 문제는 “원하던 기능은 들어갔는데 기존 기능이 망가졌다”는 상황입니다. 이런 회귀 버그는 보통 AI가 나빠서 생기는 게 아니라, 요청 범위가 넓고 제약이 없어서 생깁니다. “검색 기능 추가해줘”처럼 목표만 주면 AI는 구현 편의를 위해 기존 구조를 크게 바꾸기도 합니다. 그 결과 기존 이벤트 흐름이나 상태 관리 규칙이 무너질 수 있습니다.특히 프론트엔드에서는 작은 변경이 연쇄 영향을 만들기 쉽습니다. 필터 하나를 추가했는데 렌더링 조건이 바뀌고,..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 개발에서 버그가 반복되는 가장 큰 이유 중 하나는 상태를 어디에 둬야 하는지 초기에 정하지 않았기 때문입니다. 화면이 커질수록 같은 데이터가 여러 컴포넌트에 흩어지고, 누가 값을 바꿨는지 추적하기 어려워집니다. 결국 기능은 돌아가지만 수정할 때마다 예기치 않은 사이드 이펙트가 생깁니다. 그래서 상태 설계의 첫 질문은 단순합니다. 이 값은 어디에 저장해야 하고, 누가 변경 권한을 가져야 하는가?입문 단계에서 흔히 하는 실수는 “일단 가까운 컴포넌트에 state를 둔다”는 방식입니다. 초기엔 편하지만 기능이 늘어나면 props 전달이 깊어지고, 중간 컴포넌트가 데이터 중계 역할만 하게 됩니다. 이 문제를 줄이..