이 페이지는 Cloud Translation API를 통해 번역되었습니다.

콘솔에서 자바스크립트 실행

Kayce Basques

이 대화형 튜토리얼에서는 Chrome DevTools 콘솔에서 JavaScript를 실행하는 방법을 보여줍니다. 콘솔에 메시지를 로깅하는 방법은 메시지 로깅 시작하기를 참조하세요. 자바스크립트 코드를 일시중지하고 한 번에 한 줄씩 단계별로 실행하는 방법을 알아보려면 자바스크립트 디버깅 시작하기를 참고하세요.

그림 1. 콘솔.

개요

콘솔은 REPL(읽기, 평가, 인쇄, 루프)의 약자입니다. 이 함수는 입력된 JavaScript를 읽고, 코드를 평가하고, 표현식의 결과를 출력하고, 첫 번째 단계로 루프백합니다.

DevTools 설정

이 튜토리얼은 데모를 열고 모든 워크플로를 직접 사용해 볼 수 있도록 제작되었습니다. 실제로 따라 하면 나중에 워크플로를 기억할 가능성이 더 높아집니다.

Command+Option+J (Mac) 또는 Control+Shift+J (Windows, Linux, ChromeOS)를 눌러 바로 이 페이지에서 콘솔을 엽니다.

그림 2. 왼쪽에는 이 튜토리얼, 오른쪽에는 DevTools가 있습니다.

페이지의 JavaScript 또는 DOM 보기 및 변경

페이지를 빌드하거나 디버깅할 때 페이지 모양 또는 실행 방식을 변경하기 위해 콘솔에서 문을 실행하는 것이 유용한 경우가 많습니다.

아래 버튼의 텍스트를 확인하세요.
콘솔에 document.getElementById('hello').textContent = 'Hello, Console!'을 입력한 다음 Enter 키를 눌러 표현식을 평가합니다. 버튼 내부의 텍스트가 어떻게 변경되는지 확인합니다.

그림 3. 위의 표현식을 평가한 후 콘솔의 모습

평가한 코드 아래에 "Hello, Console!"이 표시됩니다. REPL의 4단계인 읽기, 평가, 출력, 루프를 떠올려 보세요. REPL은 코드를 평가한 후 표현식의 결과를 출력합니다. 따라서 "Hello, Console!"는 document.getElementById('hello').textContent = 'Hello, Console!'의 평가 결과여야 합니다.

페이지와 관련이 없는 임의의 JavaScript 실행

일부 코드를 테스트하거나 익숙하지 않은 새로운 JavaScript 기능을 사용해 볼 수 있는 코드 플레이그라운드를 원할 때가 있습니다. 콘솔은 이러한 실험을 하기에 완벽한 공간입니다.

콘솔에 5 + 15를 입력합니다. 표현식이 평가되는 데 너무 많은 시간이 걸리는 경우를 제외하고 결과 20이 표현식 아래에 표시됩니다.
표현식을 평가하려면 Enter 키를 누릅니다. Console에서 코드 아래에 표현식의 결과를 출력합니다. 아래 그림 4는 이 표현식을 평가한 후 Console이 어떻게 표시되는지 보여줍니다.
콘솔에 다음 코드를 입력합니다. 복사하여 붙여넣지 말고 문자 단위로 입력해 보세요
```
function add(a, b=20) {
  return a + b;
}
```
b=20 문법에 익숙하지 않은 경우 함수 인수의 기본값 정의를 참고하세요.
이제 방금 정의한 함수를 호출합니다.
```
add(25);
```
그림 4. 위의 표현식을 평가한 후 Console이 표시되는 방식

add(25)는 45로 평가됩니다. 두 번째 인수 없이 add 함수를 호출하면 b가 기본적으로 20가 되기 때문입니다.

함수가 반환될 때까지 이 콘솔 세션에서 코드를 실행할 수 없습니다. 시간이 너무 오래 걸리면 작업 관리자를 사용하여 시간이 많이 소요되는 계산을 취소할 수 있습니다. 하지만 현재 페이지가 실패하고 입력한 모든 데이터가 손실됩니다.

다음 단계

Console에서 JavaScript를 실행하는 것과 관련된 더 많은 기능을 알아보려면 JavaScript 실행을 참고하세요.

DevTools를 사용하면 실행 중에 스크립트를 일시 중지할 수 있습니다. 일시중지된 동안 콘솔을 사용하여 해당 시점의 window 또는 DOM를 보고 변경할 수 있습니다. 따라서 강력한 디버깅 워크플로가 가능합니다. 대화형 튜토리얼은 JavaScript 디버깅 시작하기를 참고하세요.

Console은 형식 지정자 집합도 지원합니다. 콘솔 메시지의 형식을 지정하고 스타일을 지정하는 모든 방법을 살펴보려면 콘솔에서 메시지 서식 지정 및 스타일 지정을 참조하세요.

그 외에도 콘솔에는 페이지와 더 쉽게 상호작용할 수 있는 일련의 편의 기능이 있습니다. 예를 들면 다음과 같습니다.

document.querySelector()를 입력하여 요소를 선택하는 대신 $()를 입력할 수 있습니다. 이 구문은 jQuery에서 영감을 받았지만 실제로는 jQuery가 아닙니다. document.querySelector()의 별칭일 뿐입니다.
debug(function)는 이 함수의 첫 번째 줄에 효과적으로 중단점을 설정합니다.
keys(object)는 지정된 객체의 키가 포함된 배열을 반환합니다.

편의 기능을 모두 살펴보려면 콘솔 유틸리티 API 참조를 확인하세요.