에러 메시지 읽기

코드를 만들다 보면 에러(오류)를 만나게 됩니다. 빨간 글씨가 화면에 나타나면 당황스럽죠. 하지만 에러는 정상적인 일입니다. 전문 개발자도 매일 에러를 봅니다. 중요한 건 당황하지 않고 읽는 것입니다.

에러는 적이 아닙니다

에러 메시지는 컴퓨터가 보내는 도움 요청입니다.

"나는 이 부분을 이해 못 하겠어. 여기를 확인해 줘."

이게 에러 메시지가 하는 말입니다.

에러가 나왔다고 해서 무언가 망가진 것이 아닙니다. 코드를 고치면 다시 잘 동작합니다.

터미널 에러 읽기

npm run dev를 실행한 터미널에 빨간 글씨가 나타날 때가 있습니다. 이럴 때 마지막 줄부터 읽으세요.


error - ./src/app/page.tsx:15:0
Module not found: Can't resolve 'lucide-react'

이 에러에서 중요한 정보는 세 가지입니다:

정보	예시	의미
파일 이름	`page.tsx`	문제가 있는 파일
줄 번호	`:15`	문제가 있는 위치 (15번째 줄)
에러 내용	`Module not found`	무엇이 문제인지

길고 복잡한 내용이 잔뜩 나올 수 있지만, 파일 이름, 줄 번호, 에러 내용 이 세 가지만 찾으면 됩니다. 나머지는 무시해도 괜찮습니다.

브라우저 에러 확인하기

웹사이트가 이상하게 보일 때는 브라우저 개발자 도구를 열어봅니다.

Chrome에서 F12 키를 누릅니다 (또는 마우스 오른쪽 클릭 → "검사")
위쪽 탭에서 "Console"을 클릭합니다
빨간 글씨가 있는지 확인합니다

처음 열면 복잡해 보이지만, 빨간 글씨만 확인하면 됩니다. 노란 글씨(경고)는 대부분 무시해도 됩니다.

에러 메시지의 구조

대부분의 에러 메시지는 비슷한 형태를 가지고 있습니다:


Error: Cannot read properties of undefined (reading 'name')
    at Home (./src/app/page.tsx:23:15)
    at renderWithHooks (...생략...)
    at mountIndeterminateComponent (...생략...)

부분	무엇인지	봐야 하는지
첫째 줄 (`Error: ...`)	에러 설명	반드시 읽기
둘째 줄 (`at Home ...`)	내 코드에서 문제 위치	반드시 읽기
그 아래 줄들	시스템 내부 동작	무시해도 됨

핵심 규칙: 처음 두 줄만 읽으면 됩니다. 그 아래 길게 나열된 줄들은 "스택 트레이스"라고 하는데, 지금 단계에서는 무시해도 됩니다.

화면에 에러가 표시될 때

Next.js는 에러가 나면 브라우저 화면 자체에 에러 내용을 보여주기도 합니다. 빨간 배경에 흰 글씨로 나타나면:

에러 메시지를 천천히 읽습니다
파일 이름과 줄 번호를 확인합니다
에러 내용 전체를 복사(Ctrl+C)해 둡니다

다음 절에서 이 복사한 에러를 AI에게 보여주고 해결하는 방법을 배웁니다.

이 절의 요약

에러는 정상적인 일이며, 전문 개발자도 매일 만납니다
에러 메시지에서 파일 이름, 줄 번호, 에러 내용 세 가지를 찾습니다
터미널 에러는 마지막 줄부터 읽습니다
브라우저 에러는 F12 → Console 탭에서 확인합니다
길게 나열된 줄들(스택 트레이스)은 무시해도 됩니다