0. 시작하며프론트엔드 개발자에게 API 문서를 보고 Interface를 정의하고, Axios 함수를 짜고, UI 컴포넌트를 만드는 과정은 매우 반복적입니다.최근에는 AI를 활용해 이 과정을 자동화하지만, 수천 줄의 API 명세 파일을 통째로 넣다 보면 비싼 토큰 비용이라는 문제에 직면하게 됩니다. 그래서 실험해봤습니다. "비싼 모델에게 일을 시키기 전, 가성비 모델로 설계를 먼저 시키면 얼마나 이득일까?" 1. 실험 환경 및 도구이번 실험의 핵심은 실시간 비용 추적입니다.LLM: Claude 4.5 Opus (구현), Gemini CLI (전처리)측정 도구: ccusage (터미널에서 AI 사용량과 비용을 즉시 계산해 주는 오픈소스 도구)대상 데이터: 실제 호출 가능한 DummyJSON 기반의 Swag..

클로드 코드(Claude Code)를 쓰다 보면, 어느 순간 얘가 왜 이러나 싶은 순간이 옵니다.잘 짜인 코드를 엉망으로 만들거나, 방금 한 약속을 어겨버리기도 합니다.이 이유가 너무 궁금해 직접 공부하고 정리해 보았습니다. 부족할 수 있지만, 제가 공부한 클로드 코드가 '산'으로 가는 5가지 기술적 이유를 공유합니다. 1. 시점 편향 (Recency Bias)출처 Primacy Bias - EqualturePrimacy bias involves recalling initial information better than later details, serving as a mental shortcut, though not always accurate.www.equalture.com 클로드 코드와 대화하다 ..

최근 핫한 Claude Code를 결제하고 가장 먼저 간단한 프로젝트를 만들어봤습니다.'나만의 뉴스레터 봇' 만들기입니다. 매일 아침 날씨와 주요 뉴스를 이메일로 쏴주는 시스템입니다. 놀라운 점은 제가 단 한 줄의 코드도 직접 타이핑하지 않았다는 것입니다. 1. 시작저는 간단한 명령과 디테일한 설정을 4가지 해주었습니다. (이것도 제미나이한테 뽑으라고 했습니다.)매일 아침 날씨와 주요 뉴스 5개를 내 이메일로 보내주는 파이썬 봇을 만들 거야. 다음 단계를 차례대로 실행해줘1. 이 폴더에 파이썬 가상환경(.venv)을 만들고 활성화해줘.2. requests, beautifulsoup4, python-dotenv 라이브러리를 설치해줘.3. main.py 파일을 만들고 아래 기능을 구현해줘.- OpenWeat..

최근 화제인 터미널 기반 AI 에디터, Claude Code를 드디어 구독했습니다. 한 달 20달러라는 거금을 들여 Pro 플랜을 결제하고, 설레는 마음으로 공식 문서에 나온 설치 명령어를 입력했습니다.curl -fsSL https://claude.ai/install.sh | bash 그런데 여기서부터 예상치 못한 인내심 테스트가 시작되었습니다. 1. 첫 번째 고비: "왜 이렇게 안 끝나?"분명 간단한 설치 스크립트인데 생각보다 다운로드와 설정 시간이 꽤 걸리더군요. 보통 curl 명령어로 설치했을 때 이렇게 오래걸리지 않았는데, 성질 급한 한국인이라 무슨 문제라도 있는 줄 알았습니다. 네트워크 상태에 따라 다르겠지만, 터미널이 멈춘 건 아닌지 몇번이나 확인했습니다. (참고로 너무 오래 걸린다면 새 터미..

문제 상황일반 코드만 푸시할 때는 아무 문제가 없었는데,용량이 큰 PNG 또는 SVG 파일을 함께 푸시하자 다음과 같은 에러가 발생하였습니다.POST git-receive-pack (chunked)send-pack: unexpected disconnect while reading sideband packetfatal: the remote end hung up unexpectedlyEverything up-to-date 원인Git은 기본적으로 전송 가능한 파일 크기 제한(기본 약 1MB)이 설정되어 있습니다.큰 이미지나 리소스 파일을 푸시할 경우, 이 제한을 초과하면서 전송이 중단됩니다. 해결 방법아래 명령어를 통해 전송 버퍼 크기(postBuffer)를 늘려주면 해결됩니다. ✅ 로컬 저장소에만 적용git..

개발을 시작할 때 제일 먼저 고민하는 것 중 하나가 바로 프로젝트 구조입니다.코드가 커질수록 "이걸 한 저장소에 다 넣어아 하나?" "아니면 프로젝트별로 따로 관리해야 하나?" 하는 고민이 생깁니다. 이 글에서는 그런 고민을 정리해보려 합니다.1. 멀티레포에서 시작한 이유처음에는 각 프론트엔드 앱을 따로 관리하는 멀티레포 구조를 선택했습니다.각 앱이 독립적으로 배포되어야 했고, 기능도 달랐기 때문입니다. 하지만 곧 여러 문제가 발생했습니다. 공통 UI 컴포넌트의 중복 관리project1/src/components/Button.tsxproject2/src/components/Button.tsxproject3/src/components/Button.tsx같은 Button, Modal, Table 등의 컴포넌..

개발을 하다 보면 어느새 import 구문이 줄줄이 늘어져서 코드 위쪽만 봐도 스트레스가 쌓일 때가 있습니다.특히 컴포넌트가 많아지고 폴더가 깊어질수록 길어지는데,이럴 때 유용하게 쓸 수 있는게 바로 barrel export 구조입니다. Barrel Export란?Barrel export는 여러 모듈(파일)을 하나의 진입점(index.ts 또는 index.js 등)에서 모아서 export 해주는 방식입니다.이 방식을 사용하면 외부에서 그 폴더 내 모듈을 사용할 때 훨씬 간단하게 import 할 수 있습니다. [예시]아래 두가지 컴포넌트가 있다고 가정해보겠습니다.// components/Button.tsxexport const Button = () => { /* ... */ };// components/I..

요즘 프론트엔드 구조화 이야기할 때 빠지지 않는 것은 FSD (Feature-Sliced Design)입니다. 실제로 프로젝트에 FSD를 적용해보면서 느낀 건,"생각보다 경계가 애매하다", "사람마다, 팀마다 다르게 쓸 수도 있겠구나" 입니다. 이번 글에서는 제가 FSD를 직접 적용해보며 겪은 시행착오화 함께, 어떻게 구성했는지, 폴더 구조는 어떻게 짰는지, 그리고 어떤 고민이 있었는지를 솔직하게 정리해봤습니다. FSD 기본 구조: Layers, Slices, SegmentsFSD(Feature-Sliced Design)는 단순히 디렉토리를 나누는 것처럼 보일 수 있지만, 실제로는 명확한 개념 체계를 기반으로 한 설계 방식입니다. 이 구조를 이해하려면 세 가지 핵심 단어를 구분해야 합니다. 1. Laye..