Week 4 · 통합 점검과 디버깅 Day 27 / 42

복합 오류 해결 — 연쇄 오류 끊기

오류 하나가 다른 오류를 부르는 도미노를 멈추는 법

10초 핵심 요약

오류는 종종 도미노처럼 연쇄 오류로 이어집니다: HTML 오류 → CSS 미적용 → JS null 오류.
순서는 항상 고정입니다: HTML 구조 → props/데이터 → CSS → JS.
한 번에 하나씩만 고치고 확인하세요 — 동시에 고치면 뭐가 효과 있었는지 알 수 없습니다.

복합 오류는 왜 무섭게 느껴질까

도미노 하나가 쓰러지면 그 뒤 것들도 줄줄이 쓰러집니다. HTML 태그 하나가 잘못 닫히면 그 안의 CSS 선택자가 대상을 못 찾고, CSS가 안 먹히니 JS로 값을 읽으려다 TypeError까지 납니다. Console에 오류가 3개 떠도, 진짜 원인은 대부분 맨 처음 도미노 1개입니다.

항상 같은 순서로: 우선순위 4단계

1HTML 구조 — 태그가 다 짝지어 닫혔는지

2props/데이터 — Day 25의 3증상 대응표로 점검

3CSS — Day 23의 5가지 원인표로 점검

4JS — Day 24의 오류 3종 구분표로 점검

이 우선순위 4단계로 가는 이유는 앞 단계가 뒤 단계의 원인이 되는 경우가 많기 때문입니다. HTML부터 바로잡으면 CSS·JS 오류가 저절로 사라지는 경우도 흔합니다.

왜 "1개씩만" 고쳐야 하나

HTML, CSS, JS를 한꺼번에 고치고 새로고침하면 문제가 사라져도 어떤 수정이 효과가 있었는지 알 수 없습니다. 다음에 비슷한 문제가 또 생기면 처음부터 다시 헤매게 됩니다. 1개 고치고 → 확인하고 → 다음으로 넘어가는 순차 수정, 이 리듬이 느려 보여도 결국 더 빠릅니다.

안 될 때 확인하세요 Console에 오류가 여러 줄 떠서 당황스럽다면, 맨 위에 있는 오류부터 보세요. 시간상 가장 먼저 발생한 오류가 위에 뜨는 경우가 많고, 그것이 도미노의 첫 번째 조각일 확률이 높습니다.

Day 27 완료 체크리스트

HTML+CSS+JS 오류를 일부러 동시에 만들어보고 4단계 순서로 하나씩 풀어봤다.

고칠 때마다 새로고침해서 어떤 수정이 효과가 있었는지 확인했다.

스스로 설명해보기 — 여러 오류를 동시에 안 고치고 HTML→props/데이터→CSS→JS 순서로 하나씩 고쳐야 하는 이유를 설명할 수 있나요?

오늘의 용어

연쇄 오류

하나의 오류가 원인이 되어 다른 오류를 연달아 일으키는 현상

우선순위 4단계

HTML→props/데이터→CSS→JS 순서로 원인을 점검하는 고정된 순서

순차 수정

한 번에 하나씩만 고치고 결과를 확인하는 디버깅 원칙