#debugging
노트 20개
Frontend › JavaScript
에러 처리: try...catch와 커스텀 에러JavaScript 언어 차원의 에러 처리. try...catch...finally가 잡는 것과 못 잡는 것(문법 에러, 예약된 콜백), 에러 객체의 name·message·stack·cause, 내장 에러 종류, throw와 다시 던지기, finally와 return의 우선순위, Error를 상속한 커스텀 에러와 계층, cause로 예외 감싸기, 전역 에러 이벤트, 에러를 삼키지 않고 클라이언트에서 수집해 보내는 법까지.
Frontend › JavaScript
TypeScript 오류 메시지 읽기와 흔한 오류TypeScript 오류는 한 줄 요약과 「왜?」를 따라 내려가는 상세 사슬로 되어 있다. 사슬을 맨 아래부터 읽는 법, TS 코드로 검색하는 법, 자주 만나는 오류 코드(TS2322·2345·2339·2304·2307·7006·18048·2353·2741·2352·1196 등)의 원인과 해결, 리터럴 넓히기·빈 객체 초기화 같은 흔한 함정, 오류를 덮는 방법의 우선순위와 진단용 컴파일러 플래그를 정리한다.
Frontend › React
리렌더링 원인과 추적리렌더링을 일으키는 원인, React.memo가 효과 없는 경우, useQuery가 최소 두 번 렌더링하는 이유, DevTools로 추적하고 줄이는 순서.
Computer Science › C Programming
C 디버깅 도구C 프로그램의 버그를 잡는 도구를 쓰임새별로 정리한다. GDB·LLDB로 멈춰서 들여다보기, AddressSanitizer·UBSan으로 메모리 오류와 미정의 동작 잡기, leaks·Valgrind로 누수 찾기, strace로 시스템 콜 추적하기, 그리고 Segmentation fault와 Bus error의 차이.
Computer Science › Operating System
리눅스 서버 점검: 부하·메모리·자원 한도서버에 들어가면 보는 순서(부하 평균, 커널 로그, 디스크, TCP 상태, I/O), free의 available과 페이지 캐시·버퍼 캐시, 메모리가 바닥날 때 캐시 회수에서 OOM Killer까지 벌어지는 일, open files·max user processes 같은 ulimit 한도와 systemd 설정, 운영 보안 습관을 정리했다.
Computer Science › Operating System
자주 쓰는 리눅스 명령어 지도리눅스 명령어를 파일·보기·텍스트 처리·프로세스·시스템 정보·사용자·네트워크·패키지 범주로 묶은 지도. grep·cut·sed·awk·sort·uniq를 파이프로 이어 로그를 훑는 법과, CPU 사용률이 100%일 때 의심할 원인과 확인 순서를 함께 정리한다.
DevOps
서버 장애 진단 패턴서버 장애를 추측이 아니라 계측으로 좁혀 가는 방법과, 자주 반복되는 장애 유형의 증상·원인·해결을 모았다. load average와 CPU·I/O 지표 읽기, 힙 덤프로 메모리 누수 찾기, DB 커넥션 실패와 DNS 역조회, 인덱스를 못 타는 쿼리와 MVCC 죽은 튜플, 세션이 Redis 메모리를 고갈시키는 경우, 선착순 카운터 병목, 피크 트래픽 대비와 사후 분석까지 다룬다.
DevOps
장애 대응과 포스트모템장애는 탐지 → 전파 → 해결 → 보고 → 회고의 다섯 단계로 다룬다. 해결은 확산을 막는 임시 조치(롤백·재기동·증설·기능 스위치)가 먼저고, 보고서와 비난 없는 포스트모템으로 재발 방지·탐지·처리 개선 과제를 검증 가능한 액션 아이템으로 남긴다.
Tools
Chrome DevToolsChrome에 내장된 웹 개발자 도구 모음. 여는 법, 할 일별로 어느 패널을 쓰는지, 명령 메뉴·단축키·설정, 검색·문제·변경사항 같은 보조 도구를 한곳에 모은 DevTools 노트 안내.
Tools › Chrome DevTools
DevTools Application 패널: 저장소·서비스 워커Application 패널은 매니페스트·서비스 워커·캐시 저장소(PWA), Local/Session Storage·IndexedDB·쿠키, 저장소 지우기, bfcache 테스트, 추측 규칙(prefetch·prerender) 디버깅, 프레임 보안 정보를 한곳에서 보고 고치는 곳이다. 무엇을 확인하려 할 때 어느 탭을 열고 무엇을 보는지 정리한다.
Tools › Chrome DevTools
DevTools Console 활용Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
Tools › Chrome DevTools
DevTools Network 패널리소스가 실제로 오가는지, 헤더·페이로드·응답·쿠키가 무엇인지, 어느 단계에서 시간이 드는지 확인하는 패널. 기록·필터·검색으로 요청을 좁히고, 캐시 끄기·스로틀링·오프라인·요청 차단으로 조건을 바꾸고, HAR·fetch·cURL로 내보내거나 다시 보낸다. HTTPS·혼합 콘텐츠·서드 파티 쿠키는 개인 정보 보호 및 보안 패널에서 본다.
Tools › Chrome DevTools
DevTools로 기기·환경 에뮬레이션하기기기 모드로 뷰포트·DPR·터치·기기 프리셋을, 네트워크 상태 패널로 사용자 에이전트를, 센서 패널로 위치·방향·유휴 상태를, 렌더링 탭으로 다크 모드·모션 감소·인쇄·색각 이상을 흉내 낸다. 흉내로 부족하면 Android 원격 디버깅·WebView 검사·포트 포워딩으로 실기기에서 확인하고, WebAuthn 패널로 가상 인증기를 만든다.
Tools › Chrome DevTools
DevTools로 성능·메모리 분석하기Performance 패널의 실시간 지표 화면과 트레이스 녹화·읽기(메인 트랙, 플레임 차트, Bottom-up·Call tree, 긴 작업, 인사이트, 주석, 저장·공유, 선택기 통계), 성능 모니터, 렌더링 탭과 레이어 패널, 커버리지, 메모리 패널로 누수·팽창·잦은 GC를 찾는 절차, Lighthouse 실행법을 정리한다.
Tools › Chrome DevTools
DevTools로 DOM과 CSS 다루기Elements 패널에서 DOM을 고르고 고치는 법, 스타일 창의 취소선·흐림·경고 표시로 CSS가 안 먹는 이유를 읽는 법, 상태 강제(:hov)·색상 선택기·Flex/Grid/컨테이너 오버레이·애니메이션 패널로 레이아웃과 움직임을 디버깅하는 법, CSS 개요·자동 완성 패널, 접근성 트리·대비·포커스 검사까지 정리한다.
Tools › Chrome DevTools
DevTools로 JavaScript 디버깅하기Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.
Tools › Chrome DevTools
DevTools의 AI 지원과 에이전트용 DevTools(MCP)DevTools 안에서 Gemini와 채팅하며 스타일·네트워크·소스·성능을 묻는 AI 지원 패널과 코드 생성, 그때 Google로 가는 데이터와 끄는 정책, 그리고 코딩 에이전트가 MCP로 실제 Chrome을 조작하게 하는 Chrome DevTools MCP 서버(설정 플래그, 자동 연결, 에뮬레이션·Lighthouse·메모리·확장 프로그램·서드파티 도구)와 WebMCP 디버깅을 정리한다.
Tools › Git
Git 이력 검색: log 필터, grep, pickaxe, blame, bisect커밋 이력에서 원하는 것을 찾는 방법을 질문별로 정리했다. 범위 표기(A..B, A...B)와 log 필터(작성자·기간·메시지·파일), 지금 코드에서 찾는 git grep, 코드가 생기거나 사라진 커밋을 찾는 pickaxe(-S, -G)와 log -L, 줄마다 마지막 수정을 보는 blame, 버그를 넣은 커밋을 이진 탐색하는 bisect까지 다룬다.
Tools
The Missing Semester: CS 교육에서 빠진 도구 학기MIT의 무학점 과정 The Missing Semester는 전공 수업이 가르치지 않는 셸, 편집기, Git, 디버깅, 패키징, 코드 품질 도구와 코딩 에이전트 활용을 9강으로 다룬다. 강의별 핵심 개념과 도구, 이 창고의 관련 노트를 지도처럼 묶었다.
Career › Work
디버깅 사고법: 가설을 세우고 반증한다버그는 머릿속 모델(멘탈 모델)이 실제 시스템과 어긋난 자리에서 생기므로, 디버깅은 그 어긋남을 배우는 문제 해결이다. 과학적 방법의 다섯 단계, 좋은 가설의 조건(원인과 실패 지점을 함께 설명하고 반증 가능), 주석을 규범이 아닌 참고로 읽기, 고정 마인드셋과 성장 마인드셋, 능동적 회상·나눠 공부하기·끈기 같은 습관을 정리한다.