[자바스크립트] TIL1 : 크롬 웹 브라우저의 자바스크립트 콘솔 이용 방법

---

학습을 시작하기 전에 실습 환경 설치 및 설정과 기본적인 HTML에 대하여 먼저 살펴보길 바랍니다.  

[자바스크립트] VSC와 크롬 웹 브라우저를 이용한 JavaScript, HTML, CSS 코딩 준비

 

---

 

▣ 자바스크립트 콘솔

크롬(Chrome) 브라우저를 열어 상단 메뉴에서 보기(View) - 개발자(Developer) - 자바스크립트 콘솔(JavaScript Console)을 찾아 실행하면 콘솔 창을 열 수 있고, 여기에서 간단한 코딩 실습뿐만 아니라 디버깅 및 실행 시 로그(Log)를 볼 수도 있으며, HTML, CSS, 네트워크 등 웹 브라우저 실행과 관련된 다양한 정보를 파악할 수 있습니다.

앞으로 진행하게 될 내용들은 위의 예시에서 볼 수 있듯이 index.html 파일과 동일한 폴더 안에 app.js 파일을 만들어 코딩 실습을 하고, 결과는 자바스크립트 콘솔 창을 통해서 확인하도록 하겠습니다.

 

---

□ 객체 기반 언어

자바스크립트는 객체 기반(Object-based) 언어입니다. '객체 기반 언어'에 대하여 간단하게 설명하자면, "모든 대상을 특성(Property)을 가진 객체로 파악하고, 특성은 다시 고유의 이름(name 또는 key)과 값(value)을 가진다."는 개념입니다. 

 

실제 생활에서 예를 들어보자면, 투명한 병이 가진 특성 중 '사용대상', 담을 수 있는 '용량' 그리고 다른 용기에 '붓는'기능을 이용해 아래와 같이 나타낼 수 있습니다. 

 

// Define 'bottle' object
var bottle = {
  use: 'milk',
  capacity: 1000,
  pour: function () {
  	this.capacity = this.capacity - 100;
  }
}

 

즉, 물병이 가진 특성 중 '사용대상(use)'의 값을 '우유'로 정하고, '용량(capacity)'의 값을 1000으로 정하며, '붓다(pour)'라는 기능을 기존 용량에서 100을 빼는 것으로 정한 것입니다. 보다시피 객체가 가진 특성의 값은 단순히 숫자(Number)나 문자열(String) 데이터뿐만 아니라 함수(Function)가 될 수도 있으며, 이때의 함수를 메서드(Method)라고 합니다. 향후에 우리가 사용할 많은 메서드들은 이렇게 이미 정의된 객체로부터 가져와 사용하는 것입니다.

 

갑자기 낯선 코드가 나와 조금 힘들 수도 있지만, '객체' 개념을 지금 조금이라도 이해해야만 이후의 내용을 진행하는데 어려움이 없을 것 같아 불가피하게 설명하였습니다. 여기서 핵심은 객체는 특성들을 정의한 것이고, 특성은 이름과 값의 쌍으로 이루어져 있으며, 값은 숫자, 문자, 함수, 객체 등 다양한 형태가 될 수 있다는 점입니다.

 

console.log(bottle.use);
console.log(bottle.capacity);
bottle.pour();
console.log(bottle.capacity);

 

앞서 정의한 bottle을 이용해 위와 같이 실행해 보면 결과가 아래와 같습니다.👇

 

---

□ 주석(Comments)

코드 실행에 영향을 미치지 않으며, 실제 코드를 업데이트하거나 수정해야 할 경우 도움이 될 수 있도록 최대한 코드에 대하여 설명하는 것입니다. 코드의 양이 많아질수록 반드시 필요한 작업입니다.

 

// Single line comments

/*
    Multi
    line
    comments
*/

 

위와 같이 한 줄로 작성하는 경우와 두 줄 이상 작성하는 경우에 다른 기호를 사용합니다.

 

---

반응형

---

 

---

□ 콘솔 객체(Console Object)

아래와 같이 자바스크립트 콘솔을 열어 'window'를 타이핑해서 엔터 키를 치면 'window' 객체를 들여다볼 수 있습니다. 그리고 그 안에는 지금부터 살펴볼 'console' 객체가 정의되어 있는 것을 확인할 수 있습니다.

콘솔 객체는 브라우저의 자바스크립트 콘솔을 활용할 수 있게 다양한 메서드들을 제공합니다. 주된 목적은 개발자가 콘솔 창에 특정 데이터를 출력하여 확인하거나, 실행 시 경고 또는 디버깅 시 에러 메시지 등을 남기는 것입니다. 

 

/* Console */
// Log
console.log('Hello world');
console.log(123);
console.log(true);
var greeting = 'Hello';
console.log(greeting);

// Table
console.table({a: 1, b: 2});

// Warning
console.warn('This is a warning');

// Error
console.error('This is some error');

// Timer
console.time('timer1');
console.log('Hello world');
console.timeEnd('timer1');

console.time('timer2');
console.log('Hello world');
console.log('Hello world');
console.log('Hello world');
console.timeEnd('timer2');

// Clear console
// console.clear();

 

위의 예시들을 보면 메서드 이름 그대로 다양한 데이터들의 기록(log)을 남기고, 표(table)의 형태로 보여 주거나, 경고(warning) 또는 에러(Error) 등을 알려줍니다. 뿐만 아니라 타이머를 설정한 시각(time)부터 끝난 시각(timeEnd) 사이의 걸린 시간을 계산하여 보여 줄 수도 있습니다.

콘솔 창에 'Hello world'라는 문자열을 한번 출력했을 때와 세 번 출력했을 때의 걸린 시간은 각각 얼마인가요? 참고로 마지막 줄 코드는 실행하면 콘솔 창을 깨끗이 지워버리게(clear) 됩니다.

 

위의 코드들을 실행하여 확인해 봅시다.👇

 

---