MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

MDN의 자바스크립트 초보자 과정에 온 걸 환영합니다. 먼저, 이 과정에서는 자바스크립트를 좀 더 넓은 범위에서 알아보고, "자바스크립트란?", "어떻게 작동하지?" 와 같은  질문들에 스스로 답변해보면서 자바스크립트의 목적과 그 편리성에 대해 알아볼 것이다.

알아야 할 것들:

기본적인 컴퓨터지식과 HTML과 CSS의 기본적인 이해

수업 목표: 자바스크립트로 무엇을 할 수 있고 웹에서 어떻게 작동되는지 익숙해지기.

둘러보기

웹페이지를 보다 보면 주기적으로 바뀌는 화면 또는 능동적인 지도나 2D/3D 그래픽, 동영상 등 웹 페이지상에 볼 수 있는 정보들을 좀 더 복잡하고 더 알맞게 표시됨이 가능해도록 하는 것이 자바스크립트이다.  우리가 지금 웹 기술이라는 것을 배우고 있는 입장에서 HTML, CSS와 함께 웹을 지탱하는 계층 구조에서 많은 역할을 자치하고 있음을 알 수 있다.

  • HTML 은 웹 페이지상에서 문단, 제목, 표, 이미지, 동영상등을 정의하고 그 구조와 의미를 부여하는 마크업 언어이다.
  • CSS 는 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하여, HTML 컨텐츠를 꾸며주는 스타일 규칙 언어이다.
  • JavaScript 는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어이다. 물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드만으로 꽤나 훌륭한 작품을 만들 수 있다.

3개의 계층 구조에서 각각은 비교적 유기적으로 잘 구성되어있다. 예제와 같이 간단한 폼을 만들어 보자. HTML을 사용하여 그 구조와 목적에 맞게 만들 수 있다.

<p>Player 1: Chris</p>

그러고 CSS를 추가하여 이쁘게 꾸밀 수도 있다.

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

그러고 마지막으로 자바스크립트를 통해 동적으로 구현할 수 있게 된다.

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

클릭하면 어떻게 되지는 한 번 보자! ( Github에서도 물론 가능하다. source code 나 run it live를 참고해보자)

자바스크립트는 이 보다 더 많은 것들을 해낼 수 있으니, 이제 한 번 제대로 시작해보자.

그러면 이제 뭘 할 수 있지?

자바스크립트 언어의 핵심은 다음과 같은 기능을 하는 것을 구성되어있다.

  • 변수안에 값을 저장할 수 있다. 위의 예시를 보면, 새로운 이름을 만들고자 name이라는 변수 안에 'Enter a new name'을 표시하는 내용을 저장하도록 하였다.
  • 프로그밍에서 '문자열'이라고 불리는 문자들도 가능하다. 위 예시에 보면 "Playe 1:"이라는 문자열을 name이라고 만든 변수와 겹합하여 "Plater 1: Chris"라는 글을 완성할 수 있었다.
  • 웹 페이지상의 이벤트에 따라 응답하는 코드를 운용할 수 있다.예제에서 click 이라는 버튼이 클릭되었을 때 코드가 실행되고 글이 바뀌는 동작을 만들 수 있다
  • 그 외에도 다양한 것이 가능하다.

하지만 무엇보다도 자바스크립트의 핵심 중에 핵심은 함수지향적으로 만들어졌다는 것에 관심을 가져야 한다. 소위 Application Programming Interfaces (APIs) 라 불리는 것은 자바스크립트를 사용해 방대하고 수많은 작업을 할 수 있게 한다.

APIs는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있다. 마치 집에서 가구를 만들 때직접 디자인하고, 재료를 구하고, 재단하고, 못을 박고 하는 등 혼자서 모든것을 하는 대신 가구 만들기 키트를 사는 것과 같다고 보면 된다

일반적으로 두 종류로 나눠진다고 보면 된다.

Browser APIs 는 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게 한다. 예를 들어,

  • DOM (Document Object Model) API 는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할을 한다. 우리가 매일 보느 팝업창이나, 위의 사진과 같이 컨텐츠들이 보여지는 것들이 모두 DOM의 결과라고 볼 수 있다.
  • Geolocation API은 지리적인 정보를 검색하게 해준다. 이는 Google Maps이 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 한다.
  • Canvas 와 WebGL APIs 2D와 3D 그래픽을 만들 수 있도록 해준다. 이러한 웹 기술을 사용하여 다양하고 재미있는 것들을 지원한다 —Chrome Experiments 와 webglsamples을 참조해보자.
  • HTMLMediaElement 와 WebRTC 같은 Audio and Video API는 음악과 비디오를 웹 페이지 상에서 재생하고, 웹캠으로 캡처하고 다른 컴퓨터에 표시하는 등의 멀티미디어를 활용할 수 있는 재미있는 기술을 지원한다. ( Snapshot demo를 한번 참조해보아라).

Note: 대부분의 데모 코드들은 오래된 브라우저에서는 실행이 안될 수 있으니, FireFox, Chrome, Edge, Opera와 같은 최신의 브라우저를 사용하는 것을 추천한다.  실제 배포가 되는 코드처럼 여러 사용자가 사용할 수 있음을 고려하여 cross browser testing(여러 브라우저를 이용하여 테스트)를 해보는 것이 좋을 것이다.

Third party APIs 는 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것을 말한다. 예를 들어:

  • Twitter API 웹사이트에 가장 최근의 트윗을 보여주도록 한다.
  • Google Maps API는 웹사이트에 원하는 지도를 넣어주고, 작동되도록 해준다.

Note: 이러한 API 들은 조금 어려울 수 있다. 따라서 이 과정에서는 다루지 않을 것이지만 위에 보이는 링크를 통해 이러한 API들에 관심이 많으면 얼마든지 쉽게 찾아볼 수 있으니 걱정하지 말길.

물론 이것말고도 엄청나게 다양한 API들이 존재한다!  하지만, 이 수업을 듣고 Facebook, Google Maps, Instagram등을 만들 수는 없으니 흥분하지는 말길. 이것보다 우리는 먼저 기본적인 것에 대해 배울 것이고 이것이 곧 이 수업을 진행하는 목적이다. 자 시작해보자!

웹페이지 상에서 자바스크립트는 무슨 일을 하지?

여기서는 실제로 코드를 살펴 볼 것이고, 웹 페이지상에서 자바스크립트가 어떻게 실제로 운영되는지 알 수 있다.

브라우저에서 웹페이지를 불러올 대 어떤 일이 발생하는지 생각해보자 (먼저 How CSS works를 다뤄보자). 브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행된다. 이는 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같다.

자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진후, 브라우저의 자바스크립트 엔진에 의해 실행된다. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미이다.

동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상이다. 만약 자바 스크립트가 HTML과 CSS가 전에 실행되었다면 문제가 분명 발생할 것이다.

브라우저 보안성

각각의 브라우저 탭들은 코드가 실행되는 개별적인 구성(이러한 것은 "실행 환경"이라고 지칭한다)이다. 이는 각 탭의 대부분의 경우는 완전히 독립적이고, 하나의 탭의 코드는 다른 탭이나 웹사이트에 직접적으로 영향을 줄 수 없다 . 이것은 보안성에 중요한 부분이이다. 만약 이러한 부분이 없다면, 해커들이 다른 웹사이트로 부터 정보를 가로채는 등 악랄한 짓들을 할 수 있다.

Note: 물론 코드나 정보를 동떨어진 웹사이트나 탭으로 전송할 수 있는 안전한 방식이 존재한다. 하지만 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않도록 하겠다.

자바스크립트 실행 순서

브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서대로 실행된다. 이는 순서에 주의해서 코드를 작성해야한다는 것이다.예를 들어, 아래의 첫번째 예재를 통해 자바스크립트 블록을 반환해보자.

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

먼저 글문단을 선택한다(1번줄) 그리고 event listener를 붙여(3번줄) 그 문단이 클릭되었을 때 updateName()코드 블록(중괄호로 묶여있는 부분)이 (5-8번줄) 실행되도록 한다. updateName() 코드 블록(이렇게 계속적으로 사용할 수 있는 코드 블럭을 함수라고 한다.)사용자로 하여금 새로운 이름을 입력받기를 요청하고, 사용자가 이름을 입력하면 화면에 출력하게 된다.

만약 1번줄과 3번줄을 바꿨다면 코드는 실행되지 않을 것이다. 대신 브라우저의 개발자 콘솔창에 다음과 같은 에러 알림이 쯜 것이다. — TypeError: para is undefined. 이는 para라는 객체가 아직 존재하지 않는다는 뜻으로 para라는 변수에 event listener를 추가할 수 없다

Note: 이는 매우 일반적인 에러이기 때문에, 프로그램을 실행할 때 코드 상에서 사용되는 객체에 대해 주의할 필요가 있다.

해석형 언어와 컴파일러형 언어

프로그래밍을 하는 입장에서 인터프리트와 컴파일이라는 개념에 대해서는 들어보앗을 것이다.  자바스크립트는 해석형 언어이다. 따라서 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환된다. 브라우저에서 동작하기 적에 다른 방식으로 코드를 변환할 필요가 없다는 것이다.

반면에 컴파일러형 언어는 컴퓨터에 의해 동작되기전 다른 형식으로 변환하는 언어이다. 예를 들면 C/C++과 같은 언어는 어셈블리어로 컴파일되어 동작된다.

이 둘의 관점은 각각의 장점을 가지고 있으니 다음장 부터 한번 알아보자.

서버측 코드와 클라이언트측 코드

웹 개발 맥락에서 서버측과 클라이언트측 코드에 대해 들어보았을 것이다. 클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드이다. 만약 웹페이지를 보고자 한다면, 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시하는 것이다. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 한다.

반면 서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시되는 것이다. PHP, Python, Ruby, ASP.NET등이 서버측 웹 언어의 대표적 예라고 볼 수 있다. 물론 자바스크립트도 가능하다! 유명한 Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능하다.  Dynamic Websites – Server-side programming에서 서버측 자바스크립트에 대해 더 알 수 있을 것이다.

"동적"이라는 말은 클라이언트측 서버측 언어 모두를 가르킨다. 이는 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출시키는 역할을 한다. 서버측 코드는 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠들을 만든다.반면에, 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동된다 . 이 둘 사이는 서로 미묘한 차이가 있지만, 서로 연관되어 있고 서버측 클라이언트측의 관계와 접근에 대해 알 필요가 있다.

동적으로 바뀌지 않는 페이지를 "정적"페이지라고 한다. (아마 시간이 지나도 계속 똑같은 모습을 하고 있을 것이다.)

웹페이지에 어떻게 자바스크립트를 넣을까?

자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용된다. CSS는 외부의 스타일시트를 적용하기 위해<link> 요소를 사용하거나 내부의 스타일시트를 적용하기 위해<style> 요소를 사용하는 반면,자바스크립트는 HTML상에서 오직 <script> 태크만으로 사용이 가능하다.. 어떻게 작동되는지 한번 살펴보자

HTML 내부의 자바스크립트

  1. 먼저, 예제로 주어진 apply-javascript.html파일을 본읜 로컬서버등에 복사한다. 아니면 다른 서버등에 저장해도 좋다.(물론 실행이 가능해야 한다.)
  2. 파일을 브라우저와 편집기 상에서 둘다 열어본다. 아마 HTML이 클릭 버튼이 있는 웹페이지를 만들었을 것이다.
  3. 그런다음, 편집기로 가서 </body> 태그 전에 다음의 코드를 추가하도록 한다 :
    <script>
    
      // JavaScript goes here
    
    </script>
  4. 그러고 이제 자바스크립트를 <script>사이에 넣음으로서 페이지상에서 동작이 가능하게끔 할 수 있다.( 위 코드에서 "// JavaScript goes here" 부분에 아래의 코드를 추가하면 된다.)
    function createParagraph() {
      var para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
    
    var buttons = document.querySelectorAll('button');
    
    for (var i = 0; i < buttons.length ; i++) {
      buttons[i].addEventListener('click', createParagraph);
    }
  5. 파일을 저장하고 새로고침을 눌러보자. 이제 버튼을 클릭하면 새로운 문단이 아래쪽에 생기는 것을 볼 수 있다.

Note: 만약 예제가 실행되지 않는다면,  돌아가서 올바른지 한 번 더 체크해보도록 하자. 혹시 저장할 때 확장자를 .html 로 하지 않았는가? 혹시 <script></body> 태그 뒤에 붙인 건 아닌가?  다음과 같이 자바스크립트를 작성했는가? 자바스크립트는 까다로운 언어이기 때문에 정확하게 문법을 지킬 필요가 있다. 그렇지 않으면 제대로 동작하지 않을 수 도 있다.

Note: 깃허브에서도 이 코드를 볼 수 있다. apply-javascript-internal.html (see it live too).

외부의 자바스크립트

이는 자바스크립트를 만들 대 훌륭한 방법이다. 근데 왜 외부의 다른 파일로 자바스크립트를 만들까? 이제부터 한 번 알아보자.

  1. 먼저, HTML 파일이 있는 디렉토리에 새로우 파일을 만든다. script.js로 필히 이름을 바꾸어 사용해야한다 .js 파일 확장자는 그 파일이 자바스크립트로 이루어져 있음을 뜻한다.
  2. 다음으로 <script> 안에 있는 코드를 복사하여 .js 파일에 붙여넣는다. 그 다음 저장한다.
  3. 다음으로 HTML파일 안의 <script>요소를 다음과 같이 바꾼다.
    <script src="script.js"></script>
  4. 저장하고 브라우저를 새로고침하면 앞과 똑같은 결과가 나올것이다.똑같이 작동하기 때문에 이제 자바스크립트는 외부에서 만들 수 있음을 알 수 있다. 이는 코드를 만들고 구성하는 입장에서 좋으며, 여러 HTML파일로 부터 재사용이 가능하다. 더군다나 HTML은 다량의 스크립트를 제외하기 때문에 쉽게 분석이 가능하다.

Note: 깃허브에서 이 버전을 볼 수 있다. apply-javascript-external.html 그리고 script.js (see it live too).

인라인 자바스크립트 핸들러

실제 HTML 속에 포함된 자바스크립트코드를 함께 쓸 수 있다. 이는 다음과 같으니 참고해보자:

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

이는 다음과 같은 데모예제로 볼 수 있다.

이 데모 예제는 버튼이 눌릴 때 실행되는 함수를 만들기 위한 <button> 요소가 보함된 인라인 onclick 핸들러를 제외하고는, 앞의 두 섹션과 같은 기능을 한다.

하지만, 이렇게는 하지 말자.이는 자바스크립트와 함께 HTML 소스를 복잡하게 할 수 있고 비효율적이다.  함수를 만들기 위한 모든 버튼 마다의 onclick="createParagraph()" 속성을 포함해야한다.

순수한 자바스크립트를 사용하는 것이 하나의 명령으로도 모든 버튼을 제어할 수 있도록 구성해준다. 이를 반영한 예제코드가 바로 아래이다.

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

이 코드는 onclick 속성 코드 보다 조금 길어보이지만, 페이지가 많든, 버튼의 수가 많든 적든 상관없이 모든 버튼들이 같은 기능을 할 수 있도록 한다. 물론 자바스크립트 코드를 변경할 필요가 없다.

Note:  apply-javascript.html 수정을 해보고 버튼을 한 번 추가해 보자. 실행해보면 버튼 하나하나 클릭할 때 마다 글이 보일 것이다. 코드는 깔금하지 않은가?

주석문

HTML과 CSS와 같이, 자바스크립트에서도 주석문의 사용이 가능하다. 주석문은 브라우저 실행때는 무시되어 넘어가고 다른 개발자로 하여금 어떻게 구성되고 작동되는지 설명해주는 역할을 한다.(물론 자신의 훗날 코드를 다시 보았을 때 빨리 기억하고, 이해할 수 있게끔 도와주기도 한다.) 주석문은 매우 유용하고 코딩시 자주 사용된다.(특히 큰 프로젝트에서). 주석문에는 두가지 종류가 있다

  • 두개의 슬래시(//)를 통해 한 줄의 주석이 가능하다.
    // I am a comment
  •  /* 와 */를 사용하여 그 사이에 여러 줄의 주석문의 구성이 가능하다.
    /*
      I am also
      a comment
    */

예를 들자면, 앞의 데모예제에 주석문을 다음과 같이 달 수 있다.

// Function: creates a new paragraph and append it to the bottom of the HTML body.

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page and sort them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

요점정리

지금까지 우리는 자바스크립트의 첫걸음을 뗏다.  여기서 자바스크립트를 왜 사용하고 어떻게 사용하는지에 대한 방법들에 대한 기초적인 부분을 배웠다. 여러 예제 코드를 봄으로써, 웹사이트와 다른 곳에서의 코드상 자바스크립트가 어떻게 구성되어있는지 배웠다.

자바스크립트가 지금은 조금 어려울 수 있으나, 걱정하지 말자. 이 수업은 첫 단계인만큼 앞으로 더 많은 것을 배우기 위해 감각을 키우기 위한 수업이다. 다음 수업에서 우리는 plunge straight into the practical를 통해 앞으로 더 나아가고 스스로 자바스크립트 예제를 실행해볼 것이다.

문서 태그 및 공헌자

 이 페이지의 공헌자: ChanghwaLee
 최종 변경: ChanghwaLee,