JavaScript 콘솔:초보자를 위한 가이드

코드 작성은 재미있으면서도 상당히 지루할 수 있습니다.

코드 작성을 시작하고 무언가가 실행되고 있지 않다는 것을 깨닫고 매우 좌절하는 날이 있습니다. 더 짜증나는 것은 코드가 실행되지만 제대로 작동하지 않는 이유를 알 수 없을 때입니다. 코드에 수정해야 할 것이 있을 때.

바로 여기에서 JavaScript 콘솔이 유용할 수 있습니다. 콘솔을 사용하면 코드에서 진행 중인 작업을 추적할 수 있습니다. 이렇게 하면 코드에서 무엇이 잘못되었는지 쉽게 파악할 수 있습니다.

이 가이드에서는 JavaScript 콘솔을 사용하는 방법에 대해 설명합니다. JavaScript 콘솔을 빠르게 마스터할 수 있도록 콘솔을 사용하는 응용 프로그램의 예도 제공합니다.

자바스크립트 콘솔

개발자, 콘솔을 만나보세요. 개발자로 활동하는 동안 콘솔에서 많은 시간을 보내게 될 것이므로 익숙해져야 합니다.

콘솔은 애플리케이션이 실행될 때 메시지를 표시하고 웹 페이지의 내용을 조작할 수 있는 곳입니다.

콘솔에 메시지를 기록하도록 코드에 지시할 수 있으며 지시했을 때 메시지가 나타납니다. 콘솔을 사용하여 변수, 값을 수정하고 변수에 저장된 값을 검사할 수도 있습니다.

콘솔을 표시하려면 개발자 도구를 열어야 합니다. Chrome에서는 Windows에서 Ctrl + Shift + I을 사용하거나 Mac에서 Cmd + Alt + I을 사용하여 이 작업을 수행할 수 있습니다. Firefox에서는 Command + Option + K를 사용하여 개발자 도구를 열 수 있습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

하면 다음과 같은 창이 열립니다.

모든 최신 브라우저에는 고유한 개발자 도구 모음이 있으며 모든 브라우저에는 여러 공통 기능이 있습니다. 이 튜토리얼에서는 콘솔에만 집중할 것입니다.

콘솔 시작하기

콘솔에 메시지를 표시하는 것으로 시작하겠습니다. 웹 페이지를 열지 않고도 이 작업을 수행할 수 있습니다. 브라우저 콘솔을 열고 실행하려는 JavaScript 문을 작성하기만 하면 됩니다.

콘솔에서 사용할 세 가지 주요 방법이 있습니다.

console.log():콘솔에 메시지를 표시합니다.
console.warn():콘솔에 경고를 표시합니다.
console.error():콘솔에 오류를 표시합니다.

계속하기 전에 먼저 코드가 무엇을 하는지 모르는 상태에서 콘솔에 아무 것도 붙여넣으면 안 됩니다. 콘솔을 사용하여 민감한 사용자 정보에 액세스하는 사기가 있으므로 많은 최신 사이트에서 이에 대해 경고합니다.

그렇게 말하고 시작합시다! 콘솔에 메시지를 표시하려면 다음 코드를 사용할 수 있습니다.

console.log("Career Karma is logging stuff to the console!");

이 명령을 실행하자마자 다음이 반환됩니다.

콘솔에 오류 및 경고를 표시할 수도 있습니다. 오류 및 경고와 기존 log()의 차이점 문은 오류와 경고가 각각 주황색과 빨간색으로 표시된다는 것입니다.

console.warn("Hey, something is going on!");
console.error("Hey, your code has stopped working!");

코드는 다음을 반환합니다.

애플리케이션에서 콘솔 사용

우리는 콘솔 객체가 작동하는 모습을 보여주기 위해 쿠키 클리커를 모델로 한 앱을 만들 것입니다. 이 앱은 차 한 잔의 이미지가 클릭된 횟수를 보여주는 카운터를 표시합니다. 클릭이 발생할 때마다 추적할 수 있도록 모든 클릭을 콘솔에 기록합니다.

프런트엔드 개발

첫 번째 단계는 애플리케이션의 프런트 엔드를 개발하는 것입니다. "index.html"이라는 파일을 만들고 다음 코드를 붙여넣습니다.

<!DOCTYPE html>
<html>
    <head>
   	 <title>Tea Clicker</title>
   	 <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
   	 <div class="container">
   		 <h2>Tea Clicker</h2>
   		 <p>Click the tea cup as many times as you can!</p>
   		 <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" />
   		 <p>You have clicked the tea cup <span>0</span> times.</p>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

이 코드는 웹 페이지에 제목, 게임 설명, 차 이미지, 사용자가 차를 몇 번 클릭했는지 알려주는 메시지의 네 가지 항목을 표시합니다.

코드가 매력적으로 보이도록 몇 가지 스타일을 추가해 보겠습니다. "styles.css"라는 파일을 만들고 다음 코드에 붙여넣습니다.

.container {
    background-color: lightblue;
    margin: auto;
    width: 50%;
    padding: 40px;
    text-align: center;
}

span {
    color: yellow;
}

img {
    border-radius: 50px;
}

이러한 스타일은 차 리모콘 게임을 위한 상자를 만들고 클릭 카운터의 색상을 노란색으로 설정하고 이미지의 둥근 모서리를 만듭니다. 현재 웹페이지는 다음과 같습니다.

찻잔을 클릭하면 아무 일도 일어나지 않습니다. 아직 JavaScript 코드를 추가하지 않았기 때문입니다. 애플리케이션용 JavaScript 코드를 작성해 보겠습니다.

자바스크립트를 사용하여 기능 추가

사용자가 찻잔을 클릭하면 카운터가 1씩 증가해야 합니다. 카운터를 증가시키기 전에 작업할 DOM 요소인 이미지와 카운터를 선택해야 합니다. DOM 또는 Document Object Model, 요소는 웹 페이지의 태그입니다.

var clickCounter = document.querySelector("span");
var teaCup = document.querySelector("img");

또한 차 한잔을 클릭한 횟수를 추적하는 변수를 설정할 것입니다.

var clicks = 0;

다음 단계는 버튼이 클릭되었을 때 기록하고 카운터를 하나씩 증가시키는 함수를 만드는 것입니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

function createClick() {
    console.log("The button has been clicked")
    clicks += 1;
    clickCounter.innerText = clicks;
}

첫 번째 줄은 "버튼이 클릭되었습니다"라는 콘솔 메시지를 콘솔에 출력합니다. 다음으로 "클릭" 카운터에 1을 추가합니다. 그런 다음 innerText 메서드를 사용하여 업데이트된 클릭 수를 반영하도록 태그의 텍스트 내용을 변경합니다.

웹 페이지를 보고 차 이미지를 클릭해 보겠습니다.

보시는 바와 같이 차 한잔을 클릭하면 카운터가 1씩 증가합니다. 또한 코드에서 지정한 메시지가 콘솔에 인쇄됩니다. 이것은 사용자가 차 한잔을 클릭할 때를 이해하는 데 도움이 됩니다.

이것은 console.log()의 매우 기본적인 구현이지만 명령문을 보면 더 큰 응용 프로그램에서 로깅이 널리 사용되는 것을 볼 수 있습니다. 대부분의 경우 로그는 애플리케이션의 개발 버전에만 보관됩니다. 사용자가 무대 뒤에서 무슨 일이 일어나는지 볼 필요가 없기 때문입니다. 그럼에도 불구하고 로깅은 여전히 개발자에게 매우 유용한 도구입니다.

결론

콘솔은 코드 작동 방식을 배우는 데 사용할 수 있는 도구입니다. 이를 사용하여 코드가 실행될 때 디버깅 메시지를 표시하거나 경고 및 오류를 추적할 수 있습니다.

애플리케이션을 개발 중이거나 디버깅에 사용할 수 있는 코드에 대한 사용자 지정 오류 메시지를 생성하려는 경우에만 로깅 문을 사용해야 합니다. 온라인에서 사용할 수 있는 웹 애플리케이션에 너무 많은 로그를 보관해서는 안 됩니다.