코드를 한 단계씩 실행하기
함수 호출을 건너뛰거나, 들어가거나, 빠져나오며 실행합니다.
코드를 한 단계씩 실행하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
코드를 단계별로 실행하기
중단점에서 일시 중지한 후에는 한 번에 하나의 작업씩 코드를 단계별로 실행하며 상태가 줄마다 어떻게 변하는지 확인할 수 있습니다.
계속 실행
계속 실행 버튼은 다음 중단점에 도달하거나 프로그램이 끝날 때까지 정상적인 실행을 이어 갑니다. 현재 일시 중지 지점에서 충분히 확인했을 때 사용하십시오.
건너뛰며 실행
건너뛰며 실행하면 현재 줄을 호출된 함수까지 포함하여 모두 실행한 다음, 같은 함수의 다음 줄에서 일시 중지합니다. 호출된 함수 안으로 들어가지는 않습니다.
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}들어가며 실행
들어가며 실행하면 현재 줄의 함수 호출 안으로 들어가 첫 번째 문에서 일시 중지하므로, 함수 내부를 디버깅할 수 있습니다.
function helper() {
const x = 10
return x
}
function main() {
return helper()
}나오며 실행
나오며 실행하면 현재 함수를 끝까지 실행한 후, 해당 함수로 들어오게 만든 호출 바로 다음 줄에서 일시 중지합니다. 더 이상 확인할 필요가 없는 함수에서 나올 때 사용하십시오.
단계별 실행 명령 선택하기
함수를 신뢰할 수 있다면 건너뛰며 실행하고, 조사하려면 들어가며 실행하며, 내부 로직이 올바르다는 것을 확인한 후에는 나오며 실행하십시오.
호출 스택 창
단계별로 실행하는 동안 호출 스택 창에는 현재 줄에 도달하기까지의 함수 호출 chain이 표시됩니다. 프레임을 클릭하면 해당 컨텍스트로 이동합니다.
상태 변화 관찰하기
단계별로 실행하면 범위 창과 Watch 창이 업데이트되어 어떤 줄이 변수를 예상치 못하게 수정하는지 정확히 확인할 수 있습니다.
반복문에서 단계별로 실행하기
반복문 안에서는 단계별 실행을 할 때마다 각 반복에서 본문이 다시 실행됩니다. 여러 반복을 수동으로 진행하는 것보다 조건부 중단점을 사용하는 편이 더 빠른 경우가 많습니다.
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}라이브러리 코드 안으로 들어가기
들어가며 실행을 사용하면 라이브러리 내부로 들어갈 수 있습니다. DevTools에는 지정한 스크립트를 무시하여 자신의 코드 안에 머무르게 하는 기능이 있습니다.
일반적인 작업 흐름
버그가 의심되는 부분 근처에 중단점을 설정한 다음, 변수를 살펴보며 한 줄씩 실행하여 실제 동작이 예상과 달라지는 지점을 찾으십시오.
빠른 확인
단계별 실행에 대한 지식을 테스트해 보십시오.
복습
복습: 단계별 실행은 제어된 방식으로 코드를 진행하게 합니다.
- 건너뛰며 실행하면 호출 안으로 들어가지 않고 줄을 실행합니다
- 들어가며 실행하면 호출된 함수 안으로 들어갑니다
- 나오며 실행하면 현재 함수를 끝까지 실행합니다
- 호출 스택은 현재 위치에 도달한 경로를 보여 줍니다
자주 묻는 질문
“코드를 한 단계씩 실행하기” 강의는 무료인가요?
네 — “코드를 한 단계씩 실행하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“코드를 한 단계씩 실행하기”에서 뭘 배우나요?
함수 호출을 건너뛰거나, 들어가거나, 빠져나오며 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“코드를 한 단계씩 실행하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- console.log 그 이상
- 중단점 설정하기
- 코드를 한 단계씩 실행하기
- 스택 추적 읽기