[초심자를 위한 Javascript] 1. Hello, JavaScript!

1. Hello, JavaScript!

[초심자를 위한 Javascript] 0. Javascript? 에서 자바스크립트를 이용하면 동적인 화면을 만들 수 있다고 알려드렸죠? 더 자세한 예시를 들어보면 다음과 같습니다.

• 주기적으로 내용이 갱신되는 기능
• 사용자가 조작 가능한 지도 뷰어
• 변화하는 2D / 3D 그래픽
• 여러가지 사용자 입력을 이용한 서비스

출처 - Mozilla

쉽게 말해, 기능을 웹 페이지에 적용할 수 있도록 하는 Script 혹은 프로그래밍 언어입니다. 인터넷 화면을 보여주는 기술들을 웹 기술이라고 했을 때, 자바스크립트는 표준 웹 기술이라는 덩어리에서 가장 핵심이라고 볼 수 있습니다. 아래에는 웹 상에 문서를 보여주기 위한 텍스트와 관련된 문법을 담당하는 HTML이 첫 번째 층을, 해당 문서에 효과(꾸밈)를 줄 수 있는 CSS가 두 번째 층을 담당하고 있습니다.

자바스크립트는 인터넷만 사용할 수 있다면 누구나 쉽게 사용해볼 수 있습니다. 모든 브라우저는 개발자 도구 기능을 가지고 있는데요, 크롬 브라우저에서는

• 윈도우: Ctrl + Shift + i
• MacOS: Command + Option + i 혹은 F12

를 입력하면 쉽게 열어볼 수 있습니다.

이제 크롬 개발자 도구에서 Console 탭을 열고 입력창에 다음 코드를 입력해보세요.

console.log('Hello, JavaScript!');

위 이미지와 같이 Hello, JavaScript! 가 나왔나요? 여기서 console.log는 브라우저의 콘솔 창에 특정 내용을 출력하라는 명령어 입니다.  더 나아가 자바스크립트로 출력 명령어 외에도 산술 연산이나 다양한 기능을 다룰 수 있습니다.

하지만 매번 코드를 작성할 때마다 크롬 개발자 도구를 켜야하고, 이전에 어떤 내용을 작성했는지 찾아보기 어렵기에 프로젝트를 관리하기에는 불편한 점이 많습니다. 이럴 땐 자바스크립트가 어떻게 동작하는지 코드를 작성하고 바로 결과물을 확인할 수 있는 사이트를 이용하면 됩니다.

출처 - CodeSandbox

여기서 로그인 후 Create Sandbox를 클릭하면 언어를 선택하는 창이 나오는데요, 이 때 두 번째에 있는 Vanilla를 선택하면 됩니다.

Vanilla.js?

저는 처음에 JavaScript를 배울 때 Vanilla.js가 무슨 의미인지 정말 궁금했었습니다. 여기서 Vanilla는 흔히 떠올리는 바닐라 향의 의미뿐만 아니라 '평범한, 특별한 것이 없는'이라는 뜻도 가지고 있습니다. 이처럼 '바닐라'라는 단어는 프로그래밍 세계에서 기본적인 기능만 구현해 놓은 상태를 의미합니다. 따라서 Vanilla.js 는 누군가가 Custom 하지 않은, 순수한 JavaScript를 의미합니다.

보라색 부분을 클릭하면 입력한 이름으로 바뀌는 걸 확인할 수 있어요

위의 그림에서 볼 수 있듯이 가만히 있는 화면에서 무언가 동작을 통해서 바뀌게 하는 행위를 가능하게 하는 것이 자바스크립트입니다. 여러분은 이제 별다른 세팅 없이 자바스크립트를 동작시킬 수 있습니다.