1. 웹 콘솔로 코드 실행하기

[JoisFe]

1. 웹 콘솔로 코드 실행하기

자바스크립트 코드 오류 검증 및 실행 결과를 바로 보여주는 도구

1. 웹 콘솔 (Web Console)
2. 노드 (Node) REPL

웹 콘솔을 이용하는 방법

• 웹 브라우저 마다 다르지만 크롬(Chrome) 을 기준으로 단축키
  • Windows, Linux : Ctrl + Shift + J
  • Mac : cmd + option + J

웹 콘솔의 기능

1. 동일 탭에서 선언한 변수에 접근 가능
2. 자동 변환 및 입력한 코드 이력을 방향키로 쉽게 찾을 수 있음

웹 콘솔의 활용 방식

1. 자바스크립트의 콘솔 객체 함수를 통해 명시적으로 오류, 경고 및 정보 메시지 출력
2. 출력 정보를 확인하는 방식을 응용하여 디버깅 용도로 확인 가능
3. 대화형 쉘 프롬프트 용도

대화형 쉘 프롬프트 (Interactive Shell Prompt) :

• 대화하는 것처럼 처리 흐름을 주고 받는 형식을 의미
• 콘솔 입력 창을 통해 자바스크립트 코드를 실시간으로 입력-실행, 검증된 실행 결과를 바로 보여주는 대화형 상호 작용이 가능

console.log('자바스크립트 코드를 웹 콘솔에서 실행해보자');

• [Console] 패널에 위 코드를 입력하면 대화형 환경으로 내용이 출력되는 것을 확인할 수 있음

브라우저 객체 모델 (Browser Object Model)

• 모든 웹 브라우저는 기본적으로 브라우저 객체 모델 가지고 있음
• 브라우저 객체 모델이란 웹 브라우저와 관련된 객체의 집합을 의미
• 대표적으로 window, location, navigator, history, screen, document 등의 객체가 존재

document.createElement('div');
var element_div = document.createElement('div');
element_div.id = 'div_name';

위 코드를 웹 콘솔에서 실행 시켜보면

1. document.createElement('div')를 입력 시 'div'로 지정된 태그 이름으로 div 엘리먼트 생성
2. var 키워드로 변수 element_div에 document.createElement('div')를 할당하여 입력하면 변수의 값이 출력되는 것이 아니라 undefined가 보임 -> 이는 브라우저 내부 메모리에 변수 div를 저장했기 때문
3. element_div.id에 'div_name'을 할당하면 "div_name"이 출력됨 -> 이는 기존에 선언한 변수 element_div를 이용하여 div 태그에 id를 추가한 것과 동일.

브라우저 콘솔 vs 웹 콘솔

브라우저 콘솔

• 단일 콘텐츠 탭이 아닌 전체 브라우저에 적용되는 콘솔
• 웹 콘솔과 다르게 구분

일반적으로 단일 탭마다 환경을 다르게 활용하는 것이 유용하기에 웹 콘솔을 주로 사용

Reference

초보자를 위한 JavaScript 200제, 정보문화사, [고재도, 노지연]