세 줄 요약
- 에러 메시지는 고장 신호가 아니라 문장입니다. 스무 줄이 쏟아져도 읽을 건 Error: 로 시작하는 한두 줄입니다.
- 에러는 무엇이(TypeError) · 왜(Cannot read properties of null) · 어디서(파일이름:줄:글자) 세 부분으로 되어 있습니다.
- 고치는 건 AI에게 넘기면 됩니다. 에러 전문 + 뭘 하려던 중이었는지 + 직전에 뭘 바꿨는지, 이 셋을 같이 주면 됩니다.
빨간 글씨는 고장난 신호가 아닙니다
여기까지 오셨으면 슬슬 만나셨을 겁니다. 잘 되던 게 갑자기 안 되고, 화면에 영어로 된 빨간 글씨가 주르륵 뜹니다.
대부분 여기서 손이 멈춥니다. 뭘 잘못 눌러서 망가진 것 같고, 영어라서 읽기도 싫습니다.
그런데 저건 고장 신호가 아니라 메시지입니다. 사람이 읽으라고 쓴 문장이고, 놀랍게도 대부분 뭐가 문제인지 그 안에 적혀 있습니다.
이 글에서는 실제로 에러를 일곱 개 만들어놓고, 그걸 어떻게 읽는지 정리했습니다. 아래 나오는 글자들은 전부 제가 방금 만든 진짜 화면입니다.
먼저, 다 읽지 마세요
이게 제일 중요합니다. 에러가 나면 보통 열 줄, 스무 줄이 쏟아집니다. 그런데 그중에 내가 볼 줄은 한두 줄입니다.
Error: 로 시작하는 줄 하나면 됩니다. 파일을 못 찾겠다고 적혀 있고, 못 찾은 파일 이름까지 나와 있습니다.
나머지 at ... 줄들은 컴퓨터가 어느 길로 거기까지 왔는지 적어놓은 기록입니다. 거의 다 남의 코드입니다. 내가 만든 게 아니니 읽어도 할 게 없습니다.
찾는 건 둘입니다. Error: 로 시작하는 줄, 그리고 거기에 내 파일이나 폴더 이름이 보이는지.
에러는 세 부분으로 되어 있습니다
영어라서 어렵게 느껴지는데, 구조를 알면 훨씬 덜 무섭습니다.
TypeError: Cannot read properties of null (reading 'addEventListener')
at http://localhost:8126/error-demo/index.html:14:36| 부분 | 위 예시 | 뜻 |
|---|---|---|
| 무엇이 | TypeError | 종류. 값이 예상과 다르다 |
| 왜 | Cannot read properties of null | 없는 걸 붙잡고 뭘 하려 했다 |
| 어디서 | index.html:14:36 | 14번째 줄, 36번째 글자 |
파일이름:숫자:숫자 이 모양이 보이면 그게 위치입니다. 앞 숫자가 줄 번호입니다. 저건 제가 id="btn" 인 버튼을 getElementById("button") 으로 찾아서 난 에러입니다. 없는 걸 찾았으니 아무것도 안 나왔고, 없는 것에 대고 클릭 기능을 붙이려다 멈춘 겁니다.
에러 메시지가 줄 번호까지 짚어준다는 걸 알고 나면, 저게 꽤 친절한 문장이라는 게 보입니다.
실제로 만나실 것들
제가 하나씩 만들어서 확인한 것들입니다. 영어 문장을 통째로 읽을 필요는 없고, 앞부분 몇 단어만 눈에 익히시면 됩니다.
is not recognized — 그런 명령어 없음
'claudee' is not recognized as an internal or external command오타이거나, 설치가 안 됐거나 둘 중 하나입니다. 저건 claude 를 claudee 로 쳐서 난 겁니다. 먼저 철자를 보시고, 맞다면 설치가 안 된 겁니다.
cannot find the path — 그런 폴더 없음
The system cannot find the path specified.cd 로 폴더에 들어가려는데 그 폴더가 없습니다. 이름을 잘못 쳤거나, 지금 있는 자리가 생각과 다른 겁니다. 탐색기 주소창에서 경로를 복사해 붙이는 게 제일 확실합니다.
Cannot find module — 그런 파일 없음
Error: Cannot find module 'C:\sample\없는파일.js'파일 이름이 틀렸거나 다른 폴더에 있습니다. 이름의 대소문자까지 봐야 합니다. 내 컴퓨터에서는 되는데 인터넷에 올리면 안 되는 일이 여기서 자주 생깁니다.
EADDRINUSE — 자리가 이미 찼음
Error: listen EADDRINUSE: address already in use :::8129이게 제일 억울한 에러입니다. 코드는 멀쩡한데 아까 켜둔 게 아직 안 꺼져서 나는 겁니다. 창을 하나 더 열어 실행하셨다면 십중팔구 이겁니다. 이전 창을 닫거나 다른 번호를 쓰면 됩니다.
Unexpected token — 괄호나 따옴표가 안 맞음
SyntaxError: Unexpected token ')'문장이 끝나야 할 자리에 다른 게 왔다는 뜻입니다. 대개 괄호 하나, 따옴표 하나, 쉼표 하나입니다. 줄 번호가 같이 나오는데, 진짜 문제는 그 줄이 아니라 그 위 어딘가인 경우가 많습니다.
404 — 파일을 못 불러옴
이건 빨간 글씨가 아니라 화면에 그림이 안 나오는 걸로 먼저 보입니다.
GET /error-demo/사진.jpg 404
GET /error-demo/helper.js 503파일이 그 자리에 없다는 뜻입니다. 같은 폴더에 뒀는지, 이름을 정확히 썼는지 보시면 됩니다.
아무 에러도 안 뜨는데 안 됨
가장 답답한 경우인데, 에러가 안 난 게 아니라 안 보이는 자리에 있는 겁니다.
웹페이지라면 F12 를 누르시면 됩니다. 화면 옆이나 아래에 개발자 도구가 열리고, Console 이라고 적힌 칸에 빨간 줄이 쌓여 있습니다. 거기가 웹페이지의 에러가 모이는 곳입니다.
AI에게 넘길 때
여기까지 읽으셨어도, 결국 고치는 건 AI에게 시키게 됩니다. 그게 맞습니다. 읽는 목적은 직접 고치기 위해서가 아니라 제대로 넘기기 위해서입니다.
넘길 때 붙이면 좋은 게 셋 있습니다.
- 에러를 통째로 복사해서. 요약하지 말고, 줄바꿈도 그대로.
at ...줄들이 나한테는 쓸모없어도 AI에게는 단서입니다 - 뭘 하려다 났는지 한 줄. “버튼 누르면 숫자가 올라가게 하려던 중”처럼요
- 직전에 뭘 바꿨는지
셋 중에 마지막이 제일 강력합니다. 방금까지 되던 게 안 된다면 원인은 거의 확실히 마지막에 바꾼 것에 있습니다.
이런 에러가 났어. 아래는 그대로 복사한 거야.
(에러 전문)
버튼 누르면 숫자가 올라가게 하려던 중이었어.
직전에 버튼 색깔 바꿔달라고 한 게 마지막이야.
이게 무슨 뜻인지 설명하고, 고쳐줘.
마지막 줄의 “이게 무슨 뜻인지 설명하고”를 빼먹지 마세요. 이거 한 마디 붙이는 것만으로 다음에 같은 에러를 만났을 때 알아보게 됩니다.
안 고쳐질 때가 있습니다
AI에게 넘겼는데 고쳐진 것 같더니 또 같은 에러가 나는 때가 있습니다. 두세 번 왔다 갔다 하면 슬슬 지칩니다.
그럴 땐 왔던 길을 되짚는 게 빠릅니다. 잘 되던 시점이 언제였는지 떠올려보고, 거기서부터 뭘 바꿨는지 하나씩 되돌려보시면 됩니다.
그래도 안 되면 카카오 오픈채팅에 올려주세요. 에러 화면을 그대로 캡처해서 올리시면 됩니다. 사람이 보면 몇 초 만에 보이는 것들이 있습니다. 오타 하나였던 적도 많습니다.
오늘 하신 일
새로 만든 건 없습니다. 대신 빨간 글씨를 만났을 때 창을 닫지 않게 됐습니다.
전부 읽지 않는다 → Error: 줄과 파일 이름을 찾는다 → 통째로 복사해 넘긴다에러가 안 나는 사람은 없습니다. 오래 한 사람과 이제 시작한 사람의 차이는 에러가 나느냐가 아니라, 에러를 보고 창을 닫느냐 읽어보느냐입니다.
다음 글
만든 걸 계속 고쳐 쓰기 — 되돌리는 법
고치다 보면 반드시 “아까가 더 나았는데” 하는 순간이 옵니다. 그때 되돌릴 수 있게 해두는 방법을 다루겠습니다.
연재 순서
처음부터 순서대로 따라오시면 됩니다. 앞 편을 안 읽으셨어도 각 글은 따로 읽을 수 있게 썼습니다.
- 1편 · 안 된다고 답해왔던 사람들이 이제 스스로 만듭니다
- 2편 · 바이브코딩이란 무엇인가 — 과장도 폄하도 빼고
- 3편 · 터미널이 무서운 분들께 — 검은 화면과 5분 만에 친해지기
- 4편 · 클로드 코드 vs 코덱스 vs 제미나이 — 뭘 골라야 하나
- 5편 · 주부를 위한 첫 프로그램 — 영수증 정리기 만들기
- 6편 · 중학생도 만드는 웹페이지 — 30분 만에 인터넷에 공개하기
- 7편 · AI가 시키는 대로 다 했는데 안 될 때 — 에러 읽는 법 (지금 보고 계신 글)
막히는 데가 생기면 카카오 오픈채팅에 화면을 그대로 캡처해서 올려주세요.