#Debugging

앱을 오래 쓰면 느려지는 이유가 메모리 누수였다. Chrome DevTools Memory 탭으로 범인을 찾는 과정을 정리했다.

빨간 에러 메시지가 뜨면 당황해서 그냥 구글에 복붙했는데, 스택 트레이스를 읽는 법을 알고 나니 디버깅 속도가 10배 빨라졌다.

React 앱이 느린 이유를 찾지 못해 코드만 뒤지고 있었는데, React DevTools의 Profiler와 Components 탭이 범인을 바로 찾아줬다.

API 응답이 이상한데 코드 문제인지 서버 문제인지 구분이 안 될 때, 브라우저 네트워크 탭 하나로 원인을 찾는 방법.

console.log 100개 찍어가며 디버깅하던 시절을 끝내고, 브라우저 debugger와 breakpoint로 효율적으로 버그를 잡는 방법.

`npm install`을 했는데 모듈을 못 찾는다고 합니다. 로컬에선 되는데 CI에서만 터지는 이유와 `package.json`의 `exports`, 그리고 TypeScript 설정까지 완벽 분석.

안드로이드는 Xcode보다 낫다고요? Gradle 지옥에 빠져보면 그 말이 쏙 들어갈 겁니다. minSdkVersion 충돌, Multidex 에러, Namespace 변경(Gradle 8.0), JDK 버전 문제, 그리고 의존성 트리 분석까지 완벽하게 해결해 봅니다.

서버에서 잘 오던 데이터가 갑자기 앱을 죽입니다. 'type Null is not a subtype of type String' 에러의 원인과, 안전한 JSON 파싱을 위한 Null Safety 전략을 정리해봤습니다.

서버가 죽었는지 1분째 로딩바만 돌아가고 있습니다. http 패키지와 Dio에서 타임아웃을 설정하는 방법, 그리고 사용자에게 '잠시 후 다시 시도해주세요'라고 말하는 우아한 방법을 정리해봤습니다.

분명히 Provider로 감쌌는데 찾을 수 없다고 에러가 뜹니다. BuildContext와 위젯 트리의 '족보' 관계를 이해하면, 이 에러는 다시는 당신을 괴롭히지 못합니다.

분명 코드를 실행했는데 화면은 그대로입니다. 리스트에 add를 했는데 반응이 없습니다. Dart의 메모리 참조(Reference)와 불변성(Immutability)을 이해하면, 당신의 앱은 다시 살아납니다.

상태만 바꿨는데 왜 이미지까지 다시 로딩될까요? FutureBuilder를 build 안에 넣는 실수부터 const 생성자, RepaintBoundary까지, 플러터 앱이 번개처럼 파닥거리는 원인을 잡습니다.

글자 하나 칠 때마다 키보드가 내려가고 포커스가 풀리나요? 당신이 저지른 '컨트롤러 초기화' 실수를 찾아드립니다. TextEditingController와 build() 메서드의 관계를 완벽하게 파헤칩니다.

Flutter 개발자라면 피할 수 없는 노란색/검은색 줄무늬 에러. 단순히 Expanded로 감싸는 게 답이 아닐 수 있습니다. 플러터의 제약 조건(Constraints) 시스템을 완벽하게 이해해봤다.

Vite에서 환경 변수가 제대로 로드되지 않는 문제의 원인과 해결 방법을 심층 분석합니다. bundler의 동작 원리, 보안 모델, Docker/CI 환경에서의 동적 주입, 그리고 Monorepo 설정까지 완벽하게 가이드합니다.

z-index가 작동하지 않는 문제와 stacking context 이해하기

부모에서 전달한 props가 undefined로 나와서 앱이 크래시되는 문제 해결

useEffect 의존성 배열 때문에 무한 루프에 빠졌던 경험과 해결 방법

비동기 통신의 함정, 경쟁 상태(Race Condition)를 해결하는 과정을 담았습니다. 플래그 변수부터 AbortController까지, 탭 전환 시 발생하는 버그까지 잡는 법.

React의 setState가 비동기로 동작해서 겪었던 삽질과 해결 과정. 사학과 출신 창업자가 겪은 React 상태 관리의 미스터리를 풉니다.

React에서는 잘 돌아가던 코드가 Next.js로 옮기자마자 'window is not defined' 에러를 뿜으며 폭발했습니다. Next.js의 SSR/Hydration 원리를 통해 이 에러가 발생하는 근본적인 이유를 파헤치고, useEffect, typeof 체크, Dynamic Import 등 3가지 확실한 해결책을 제시합니다.

회원가입 후 프로필 이미지를 올리는 간단한 로직이었습니다. 그런데 왜 가끔 'User Not Found' 에러가 뜰까요? 자바스크립트의 비동기 처리와 Promise Waterfall 문제를 해결한 과정을 공유합니다.

React 콘솔에 뜨는 'unique key prop' 경고, 귀찮아서 index로 때우셨나요? 그 사소한 습관이 입력 폼 데이터를 뒤죽박죽으로 만들고 사용자를 미치게 만듭니다. Virtual DOM의 동작 원리와 함께 왜 index를 key로 쓰면 안 되는지, 제 '삽질' 경험을 통해 파헤칩니다.

데이터를 수정했는데 페이지에 계속 예전 값이 나오는 유령 같은 현상. Next.js 13+의 강력한(그리고 사악한) 캐싱 메커니즘을 4계층으로 분석하고, React Query와의 차이점, 그리고 실제 디버깅 전략을 공유합니다.

React에서 `count && <Component />`를 썼을 때 의도치 않게 숫자 0이 화면에 출력되는 현상, 다들 겪어보셨죠? JavaScript의 단락 평가(Short-Circuit Evaluation)와 Falsy 값의 특성 때문에 발생하는 이 버그의 원인을 심층 분석하고, 3가지 확실한 해결책(비교 연산자, 이중 부정, 삼항 연산자)과 React Native에서의 크래시 위험성까지 상세히 다룹니다.

멀쩡하던 이미지가 Next.js의 `<Image>` 컴포넌트를 쓰자마자 에러를 뿜어냈습니다. 단순한 설정 문제인 줄 알았지만, 알고 보니 Next.js가 서버 자원을 보호하기 위한 강력한 보안 장치였습니다. `remotePatterns` 설정 방법과 Image Optimization의 내부 동작 원리를 깊이 있게 파헤칩니다.

로컬에서는 잘 되던 API 키가 브라우저 콘솔에서는 `undefined`로 뜨는 현상. Next.js의 보안 철학인 'Server-Client Boundary'를 이해하지 못해 3시간을 삽질하고, 실수로 비밀 키를 노출할 뻔했던 아찔한 경험을 공유합니다.

잘 돌아가던 Node.js 서버가 매일 밤 12시만 되면 'Heap Out of Memory'를 뱉으며 죽었습니다. 원인은 전역 변수에 쌓인 데이터 더미였죠. 이 디버깅 과정을 통해 배운 Stack과 Heap의 차이, 그리고 메모리 누수를 막는 방법을 정리했습니다.

분명히 클래스를 적었는데 화면은 그대로다? 개발자 도구엔 클래스가 있는데 스타일이 없다? Tailwind 실종 사건 수사 일지.