스택 추적 읽기
오류를 발생한 원인으로 거슬러 올라갑니다.
스택 추적 읽기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
스택 트레이스란 무엇인가요
스택 트레이스는 오류가 발생한 순간 활성화되어 있던 함수 호출 목록입니다. 프로그램이 오류에 도달하기까지 거친 경로를 보여 줍니다.
위에서 아래로 읽기
트레이스의 최상위 프레임은 오류가 발생한 위치입니다. 아래의 각 줄은 호출자를 보여 주며 프로그램의 최초 진입점까지 이어집니다.
프레임의 구조
각 프레임에는 일반적으로 함수 이름과 호출이 발생한 파일, 줄 번호, 열 번호가 표시됩니다. 이를 통해 정확한 위치를 파악할 수 있습니다.
오류 메시지
프레임 위에는 오류 이름과 메시지가 표시되며, 무엇이 잘못되었는지 설명하는 TypeError 등이 그 예입니다. 먼저 이 부분을 읽으십시오. 원인을 설명해 주는 경우가 많습니다.
function getName(user) {
return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")호출 chain 따라가기
아래쪽으로 읽어 내려가면 어떤 함수가 어떤 함수를 호출하여 오류가 발생한 줄에 도달했는지 순서를 재구성할 수 있습니다.
자신의 코드와 라이브러리 코드
트레이스에는 라이브러리 프레임이 포함되는 경우가 많습니다. 일반적으로 수정해야 할 부분은 자신의 소스 파일에 속한 프레임 중 가장 위에 있는 프레임이므로 여기에 집중하십시오.
비동기 스택 트레이스
최신 DevTools는 비동기 호출을 이어 붙여 promise나 타이머가 시작된 컨텍스트를 보여 주므로, 트레이스가 경계에서 끊기지 않습니다.
수동으로 트레이스 생성하기
console.trace는 오류를 발생시키지 않고 현재 호출 스택을 출력하므로, 함수가 어떤 경로로 호출되었는지 확인하는 데 도움이 됩니다.
function inner() {
console.trace("reached inner")
}
function outer() {
inner()
}
outer()Error stack 속성
Error 객체에는 트레이스를 텍스트로 담은 stack 속성이 있으며, 이를 기록하거나 오류 보고 서비스로 보낼 수 있습니다.
const err = new Error("Something failed")
console.log(typeof err.stack)압축된 코드와 소스 맵
제품용 코드는 압축되는 경우가 많아 트레이스를 이해하기 어렵습니다. 소스 맵은 압축된 위치를 원래 파일의 위치로 변환하여 읽기 쉬운 트레이스를 제공합니다.
트레이스에서 수정으로
메시지, 최상위 사용자 프레임, 줄 번호를 함께 사용하여 버그의 위치를 찾으십시오. 그런 다음 해당 위치의 변수를 확인하여 원인을 검증하십시오.
빠른 확인
스택 트레이스에 대한 지식을 테스트해 보십시오.
복습
복습: 스택 트레이스는 오류에 도달한 경로를 보여 줍니다.
- 최상위 프레임은 오류가 발생한 위치입니다
- 아래쪽 프레임은 호출자입니다
- 자신의 코드에 있는 가장 위의 프레임에 집중하십시오
- 소스 맵을 사용하면 압축된 트레이스를 읽을 수 있습니다
const err = new Error("fail")
console.log(typeof err.stack)자주 묻는 질문
“스택 추적 읽기” 강의는 무료인가요?
네 — “스택 추적 읽기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“스택 추적 읽기”에서 뭘 배우나요?
오류를 발생한 원인으로 거슬러 올라갑니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“스택 추적 읽기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.