JavaScript 프로그램을 한 번에 완벽하게 동작시키는 건 어렵습니다. 그럴 때, 어떤 방법으로 자바스크립트 디버깅을 해야 합니다.
그 디버깅 하는법이 맹활약하는 console.log라고 아십니까?
console.log를 사용하여 디버깅 할 때 브라우저 콘솔 화면에 어떤 메시지를 표시할 수 있으신가요?
이번 글에서는 console.log 사용 방법부터 console.log를 사용한 디버깅 방법까지 상세하게 설명합니다.
console.log는 JavaScript의 기본! 확실히 기억하고 활용할 수 있도록 하세요.
✅ 크롬 오류 해결 팁
console.log 란?
여러분은 console.log를 사용해 보셨나요? 원래, console.log가 뭔지 아시나요?
JavaScript 프로그래밍의 디버깅 방법은 다양하지만, 압도적으로 이용 빈도가 높은 것이 이번에 소개하는 console.log입니다.
자바스크립트 console.log 인수로 설정한 값을 디버거 콘솔에 표시하는 함수 입니다.
사용법이 매우 간단하므로, JavaScript 프로그래밍에서는 기본 중의 기본인 디버깅 방법입니다.
Google Chrome에서 console.log ()를 사용하는 방법
그럼 먼저 "console.log()"를 이용하기 위한 순서를 확인합시다!
"console.log()"는 어떤 문자열을 출력하는 방법입니다.
그리고 그 대상은 브라우저에 탑재되어 있는 "개발자 도구"의 "콘솔"이라 불리는 화면입니다. "콘솔"에 표시하고 싶은 내용을 출력하여 프로그램이 제대로 작동하고 있는지 등을 확인할 수 있습니다.
그러면 실제로 콘솔 화면에 값을 표시해 봅시다!
이번에는 Chrome 브라우저를 이용합니다. (IE, Firefox, Safari 등의 브라우저에도 비슷한 기능이 탑재되어 있습니다) 임의의 Web 페이지를 연 다음 "F12 키" 또는 "Ctrl + Shift + I"를 눌러 브라우저의 개발자 도구를 시작하세요.
그리고 Console이라고 적힌 탭을 클릭하면 다음과 같은 "콘솔 화면"이 표시됩니다.
이 자바스크립트 콘솔 화면에 변수 값이나 객체 내용 등을 표시할 수 있습니다.
console.log()에서 문자열 출력하는 방법
이번에는 "console.log()"를 사용하여 임의의 문자열을 출력해 보죠!
앞서 소개한 바와 같이 임의의 Web 페이지를 열고 브라우저의 "개발자 도구"를 시작하세요.
이번에는 콘솔 화면에 "안녕하세요"라는 메시지를 표시해 보겠습니다! 다음 샘플 예제를 보세요!
console.log('안녕하세요');
이처럼 "log()" 인수에 출력하고 싶은 문자열을 직접 작성하면 OK입니다!
그러면 다음과 같은 결과가 나타납니다!
콘솔 화면에 "Hello"라는 문자열이 출력되는 것을 확인할 수 있습니다.
이처럼 "console.log()"를 사용하면 JavaScript 프로그램에서 어떤 값이나 문자를 출력 할 수 있습니다.
Object, 배열 출력 방법
console.log를 사용하여 메시지를 콘솔에 출력하는 방법을 소개했습니다. 콘솔에 문자열 메시지 뿐만 아니라 배열이나 객체도 표시할 수 있습니다.
다음 코드를 참조하십시오.
<html> <body> <script> var array = ['apple','banana','lemon','orange']; console.log(array); </script> </body></html>
실행 결과
["apple", "banana", "lemon", "orange"]
위 코드는 간단한 배열을 만들고 그 내용을 콘솔에 표시합니다.
콘솔 화면의 실행 결과를 클릭하면 요소가 펼쳐지고 각 요소의 "값"이나 "요소 개수" 등도 확인할 수 있습니다.
다음, 객체를 콘솔에 표시해 봅시다. 다음 코드를 참조하세요.
<html> <body> <script> var object = {name: "apple", color:"red", type: "fruit"}; console.log(object); </script> </body></html>
실행 결과
{name: "apple", color: "red", type: "fruit"}
위 코드는 변수 "object"란 간단한 객체를 만들어 값을 할당하고 console.log를 사용하여 출력했습니다.
console.log의 Parameters에 문자, 숫자를 삽입하는 방법
console.log 인수는 "Hello"와 같은 문자열이나 배열, 객체, 변수가 될 수 있습니다.
그러나 console.log 문자열 내에 %s와 %d 등을 사용하면 원하는 부분 문자열이나 숫자를 삽입하는 것도 가능합니다. 다음 코드를 참조하세요.
<html> <body> <script> var mystring = "Hello world!"; var mynumber = 1234; console.log("The message is: " + "%s" + " %d", mystring, mynumber); </script> </body></html>
출력 결과는 다음과 같습니다.
The message is: Hello world! 1234
이 자바스크립트 샘플 코드에서는 문자열 "Hello world!"를 포함하는 변수 mystring와 숫자 "1234"을 포함하는 변수 mynumber을 console.log를 사용하여 표시하고 있습니다.
%s는 "문자열 출력", %d는 10 진수로 출력한다는 뜻입니다. console.log의 첫 번째 인수는 현재와 같이 표시 할 문자열을 설정하는 것입니다 만, 그 중 두 % s와 % d 등 중간에 표시 할 값을 삽입합니다.
그리고 두 번째 인수는 문자열을 포함하는 변수 mystring, 세 번째 인수는 숫자를 포함하는 변수 mynumber로 설정합니다.
주의해야 할 것은 중간에 삽입 된 "%s" "%d" 순서대로 "mystring" "mynumber" 변수를 인수로 지정해야 한다는 점입니다.
또한 객체의 출력에 주의가 필요 합니다. 다음 코드를 참조하십시오.
<html> <body> <script> var object = {name: "apple", color:"red", type: "fruit"}; console.log("obj=" + object); </script> </body></html>
출력 결과는 다음과 같습니다.
obj=[object Object]
따라서 위 코드처럼 작성하면 문자열로 출력되어 내용을 확인할 수 없습니다.
그러므로 다음과 같이 사용하는 것을 권장합니다.
<html> <body> <script> var object = {name: "apple", color:"red", type: "fruit"}; console.log("obj=", object); </script> </body></html>
실행 결과
obj= {name: "apple", color: "red", type: "fruit"}
위 코드처럼, 2번째 인수에 적용시키면 객체 출력이 잘 됩니다.
"console"API 목록
"console.log()"에 대해 학습하고 있지만, 실은 "console" 객체에는 더 많은 메소드가 존재합니다.
일반적으로 자주 사용하는 주요 메소드를 표에 정리했으니 확인해 보죠!
| 메소드 이름 | 내용 |
| console.log() | 임의의 값 출력 |
| console.clear() | 콘솔 화면 비움 |
| console.error() | 오류 정보로 출력 (info/warn도 있음) |
| console.group() | 계층 구조를 갖게 출력 (groupEnd()로 종료) |
| console.time() | time()~timeEnd() 사이 시간을 계산 |
| console.trace() | 호출 함수 등을 기록. 실행 과정 출력 |
| console.count() | 실행할 때 마다 카운트 up. 횟수 출력 |
| console.table() | 배열, 객체 등의 구조를 테이블 형태로 출력 |
| console.dir() | 객체가 보유한 속성 목록 리스트 출력 |
이처럼 "log()" 값을 출력할뿐만 아니라 처리 시간 측정과 값의 구조를 출력하는 등 용도에 따라 편리하게 쓸 수 있도록 다양한 메소드를 지원합니다.
디버깅할 때 필요한 정보를 얻는 가장 좋은 방법이며 작업 효율화에도 연결되므로 꼭 기억하세요!
"console" 디버깅
"console.count()" 카운트 방법
우선, 카운트업에 따른 횟수를 출력 할 수 있는 "count()"에 대해 살펴 보겠습니다! "count()"를 이용하면 불필요한 변수를 만들지 않아도 몇 차례 실행되었는지 확인할 수 있습니다.
일반적인 기술로는 [console.count (레이블 이름)]처럼 인수에 카운트 업을 위한 대한 명칭을 부여합니다.
다음 샘플 예제를보세요!
for(var i=0; i<5; i++) {
console.count('one');
}
실행 결과
one : 1
one : 2
one : 3
one : 4
one : 5
이 예제에서는 for 문에서 "count()"를 실행합니다. 실행 결과를 보면 아시겠지만, for 문이 실행된 횟수만큼 count()도 실행되었습니다.
그리고 count()는 실행할 때마다 카운트 해 나가므로 마지막 수치가 횟수라는 것을 알 수 있습니다.
덧붙여서, 라벨을 변경하면 동시에 여러 작업의 횟수를 함께 얻을 수 있습니다!
for(var i=0; i<5; i++) {
console.count('one');
if(i == 1 || i == 4) {
console.count('two');
}
}
실행 결과
one : 1
one : 2
two : 1
one : 3
one : 4
one : 5
two : 2
이 예제에서는 for 문의 반복 횟수가 "1"과 "4"일때만 다른 "count()"를 실행합니다.
"count('one')"과 "count('two)" 각각의 카운트가 개별적으로 실행되는 것을 확인할 수 있군요.
"console.time()"으로 성능 검사하는 방법 (퍼포먼스)
"time()"을 이용하여 시간 측정하는 방법입니다! "time()"은 다른 함수인 "timeEnd()"와 한 쌍으로 이용(페어)함으로써 처리에 걸리는 시간을 측정합니다.
측정하고 싶은 부분(자바스크립트 소스 코드)의 위와 아래에 "time()"~"timeEnd()"를 삽입합니다.
작성 방법은 [console.time(레이블 이름)~console.time(레이블 이름)]과 같이 인수에 레이블 이름을 작성합니다. 다음 샘플 예제를 보시죠!
var result = 0;
console.time('plusAll')
for(var i=0; i<1000; i++) {
result += i;
}
console.timeEnd('plusAll')
실행 결과
plusAll: 1.7919921875ms
이 예제에서는 for문을 1000번 반복하는데 걸리는 시간을 측정했습니다.
"time('plusAll')"처럼 레이블 이름을 "plusAll"이라고 입력했습니다. 중요한 건 "timeEnd()"레이블 이름도 같은 이름으로 지정해야 한다는 점입니다!
"console.dir()"에서 개체 구조 확인하는 방법
이번엔 객체가 가진 속성을 리스트로 만들어 구조를 확인할 수있는 "dir()"에 대해 살펴봅니다.
"dir()"을 사용하면, 예를 들어 JavaScript로 얻은 DOM 요소가 어떤 속성을 가지고 있는지 쉽게 확인할 수 있습니다.
다음과 같은 p 요소가 있다고 예를 들어 보죠.
<p id="text">안녕하세요</p>
위 p 요소를 콘솔에 출력하면 다음과 같습니다.
var text = document.getElementById('text');
console.log( text );
실행 결과
<p id="text">안녕하세요</p>
실행 결과를 보면 단순히 p 요소를 그대로 출력합니다.
다음 샘플 예제도 보세요!
var text = document.getElementById('text');
console.dir( text );
실행 결과는 다음과 같습니다!
p 요소에 있는 속성 목록이 나열되어 있네요! 리스트로 확인됩니다!
코드 디버깅은 물론, 학습 용도로도 이용 가치가 높으므로 다룰 수 있게 연습합시다!
JSON 내용을 출력하는 방법
JSON은 JavaScript Object Notation의 약자입니다. JavaScript 객체를 통일하기 위해 태어났습니다.
여기에서는 JSON.stringify라는 메소드를 이용하여 객체(오브젝트 object)와 JSON의 내용을 그대로 콘솔에 출력하는 방법을 설명합니다.
JSON.stringify는 인수로 지정한 값을 JSON 문자열로 변환해 줍니다. 앞서 소개한 것처럼 객체를 콘솔에 표시하려면 객체를 두 번째 인수에 적용해야 합니다.
그러나 JSON.stringify를 사용하면 같은 결과를 얻을 수 있습니다.
<html>
<body>
<script>
var object = {name: "apple", color:"red", type: "fruit"};
var myjson = JSON.stringify(object);
console.log(myjson);
</script>
</body>
</html>
출력 결과는 다음과 같습니다.
{"name":"apple","color":"red","type":"fruit"}
위의 자바스크립트 예제 코드는 간단한 객체를 만들고 그것을 JSON.stringify 인수로 전달합니다.
JSON.stringify의 반환값은 문자열이고, console.log를 사용하여 콘솔에 표시할 수 있습니다.
또한 HTML p 태그에 객체 자체를 표시할 경우에도 주의가 필요합니다. 다음 코드를 참조하세요.
<html>
<body>
<p id="myid1">Without JSON.stringify: </p>
<script>
var object = {name: "apple", color:"red", type: "fruit"};
document.getElementById("myid1").innerHTML += object;
</script>
</body>
</html>
위의 샘플 코드에서는 getElementById에서 추출한 p 태그의 innerHTML 속성의 내용을 변경하여 객체를 표시했습니다.
그러나 이런 코드는 아래 이미지 처럼 출력 값이 [object Object] 입니다.
JSON.stringify()를 사용해야 내용이 표시됩니다.
다음 코드를 참조하십시오.
<html>
<body>
<p id="myid2">With JSON.stringify: </p>
<script>
var object = {name: "apple", color:"red", type: "fruit"};
var myjson = JSON.stringify(object);
document.getElementById("myid2").innerHTML += myjson;
</script>
</body>
</html>
위의 샘플 코드에서는 innerHTML 속성의 값으로 개체가 아닌 JSON.stringify의 반환값인 문자열이 설정됩니다.
아래 그림을 참조하세요.
이와 같이, 객체 내용이 제대로 p 태그에 표시되었습니다!
정리
이번에는 자바스크립트 console.log 기본에 대해 배웠습니다.
console.log는 디버깅 하는 방법 중에서도 기본 중의 기본인 메소드입니다. 간단한 사용 방법이 매력적이라 다룰 때 매우 편리합니다.
프로그램을 만들 때 아무래도 버그 및 오류를 수정할 필요가 있으므로 간단한 디버깅 방법을 익혀두면 손해보진 않습니다.
프로그램의 품질 향상을 위해서도 꼭 console.log를 비롯한 다양한 디버깅 방법을 공부하세요.
자바스크립트 관련 글
- 구글 Chrome 오류 해결책 : Unchecked runtime.lastError: The message port closed before a response was received
- C# 개발자에게 필요한 Console 사용 방법
✅ 크롬 오류 해결 팁
댓글