본 포스팅은 자바스크립트 코드를 웹 브라우저에서 바로 실행하는 방법과 console.log()를 사용하는 방법에 대해 다룹니다.
대부분의 기초과정에서 작성되는 JavaScript는 브라우저를 통해 실행할 수 있습니다.
가장 간단한 방법으로는 HTML 파일안에 <script> 태그를 사용하여 JavaScript 코드를 직접 삽입하는 것입니다. 아래와 같이 html 파일을 Visual Studio Code에서 작성하고 “라이브 서버“를 사용하여 실행할 수 있습니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>페이지 타이틀</title>
</head>
<body>
<script>
console.log("Hello, World!")
</script>
</body>
Visual Studio Code와 라이브 서버 익스텐션이 설치된 후 오른쪽 아래 Go Live 버튼을 누른다면 해당 javascript 코드가 포함된 HTML파일이 브라우저를 통해 구현되는 것을 볼 수 있습니다.
이제 브라우저에서 보이는 하얀 웹페이지를 우클릭해서 “inspect“를 누르고 Developer Tools창이 뜬다면 “Console“을 눌러보세요.
아래와 같이 우리가 입력한 “Hello, World!” 가 정상적으로 출력된 것을 확인 할 수 있습니다.
console.log()는 코드를 debugging할때 많이 쓰여지는 함수로 이미 선언이 되있는 여러 종류의 변수를 출력하거나 사용자에게 표시할 메시지등 문구를 출력하는데 사용됩니다. 위에서 본 바와 같이 웹 브라우저(크롬)에 있는 Developer tools에서 함수의 결과값을 확인할 수 있습니다.
javascript를 실행하는 또 다른 방법으로는 .js 자바스크립트 파일을 작성 후 .html 파일에다가 <script>태그를 이용하여 연결 하는 방법입니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>페이지 타이틀</title>
</head>
<body>
<script src="console.js">
</script>
</body>
본 포스팅에서는 자바스크립트 실행방법 및 console.log() 함수에 대해 알아보았습니다.
웹 브라우저 말고 사용자의 컴퓨터에서 자바스크립트를 실행하고 콘솔을 사용할 수 있는 방법도 있는데요. 바로 Node.js 라는 자바스크립트 런타임을 설치해서 사용하는 방법입니다. 자세한 건 아래 포스팅을 참고해주세요.