아이디어와 인사이트

AI 퍼스트 개발, 코딩 가드레일, 그리고 폐기 가능한 아키텍처를 탐구합니다.

마이그레이션하지 말고 삭제하라: Vibe-Coded React Native 앱의 리팩터링 전략

AI가 생성한 코드를 리팩터링한다는 건 애초에 없던 의도를 역으로 해석하는 일이다. 삭제를 안전하게 만드는 interface 중심 replacement 패턴을 설명합니다.

생물학에서 autotomy는 더 이상 유용하지 않은 신체 일부를 스스로 떼어 내는 행동입니다. 도마뱀은 포식자를 피하려고 꼬리를 버립니다. 한때는 유용했지만, 살아남으려면 놓아줘야 합니다. 그리고 새 꼬리가 다시 자랍니다. Vibe-coded React Native 앱을 리팩터링할…

Cursor와 Claude Code가 React Native 아키텍처를 망가뜨리는 방식 (그리고 고치는 법)

AI가 만든 auth는 새 feature가 잘못된 service를 건드리기 전까지는 멀쩡해 보입니다. vendor 교체와 feature 작업이 login을 깨뜨리지 않게 만드는 interface 중심 architecture를 설명합니다.

Vibe-coded React Native 앱에서 반복해서 보이는 failure mode 중 하나는, 새 feature가 기존 service를 직접 import하고 자기 소유가 아닌 state를 건드린 뒤 전혀 관계없는 flow를 깨뜨리는 것입니다. auth가 특히 자주 희생되는…

왜 Deep Link가 Vibe-Coded React Native 앱을 크래시시키는가 (그리고 Zod로 검증하는 법)

deep link, push payload, 공유 URL은 모두 untrusted input입니다. 잘못된 param이 screen까지 들어오기 전에 Expo Router boundary에서 검증하는 방법을 설명합니다.

Vibe-coded 앱에서 deep link bug는 대체로 지루한 input 문제에서 시작합니다. malformed user ID, 오래된 campaign URL, push payload에서 빠진 enum 값 같은 것들입니다. 그다음 앱은 그 input을 신뢰해 버리고,…

useSyncExternalStore: Vibe-Coded 앱을 state 버그에서 구하는 React Hook

메모리 누수와 state 업데이트 누락을 만드는 useEffect subscription 코드를 그만 쓰자. 외부 state를 단단하게 다루는 React 18 패턴을 설명합니다.

예전의 저는 대부분의 Vibe coder처럼 network detection hook을 작성했습니다. 에서 NetInfo를 subscribe하고, connectivity가 바뀌면 state를 갱신하고, 잘 되길 바랐습니다. 개발 환경에서는 괜찮았습니다. production에서는…