41. 자바스크립 시작하기

소개

이 글에서는 자바스크립트를 어떻게 사용하며 어디에 사용할 것인지, 피해야만 할 문제점들은 무엇인지를 알아보고, 높은 수준의 자바스크립트 개발자가 되기 위한 여행의 첫 발을 내 딛고자 한다.

이 글의 구조는 다음과 같다:

  • 자바스크립트란 무엇이며 어떻게 실행하는가?
    • 자바스크립트를 HTML 속으로 집어넣기
    • 외부 자바스크립트 파일과 연결하기
  • 자바스크립트와 브라우저 성능
  • 자바스크립트를 집어넣을 곳
  • 자바스크립트 보안과 미비점들
  • 피해야 할 테크닉
  • 요약
  • 연습문제

자바스크립트란 무엇이며 어떻게 실행하는가?

자바스크립트란 실행을 위해 따로 변환될 필요가 없는 텍스트 기반의 컴퓨터 언어이다. Java 와 C++ 같은 다른 언어들은 실행하기 전에 컴파일을 해야 하지만 자바스크립트는 실행기parser라 불리는 프로그램을 통해 즉석에서 실행된다(거의 모든 웹 브라우저들이 실행기를 내장하고 있다).

자바스크립트를 브라우저에서 실행하는데는 두 가지 방법이 있다. 한가지 방법은 HTML 내부 어디에서든 script 요소를 내부에 포함시키는 것이고, 또 다른 방법은 외부 자바스크립트 파일(.js 확장자를 갖는다)에 포함시킨 다음 HTML 내부에서 src 속성을 갖는 script 요소로 참조하는 것이다. 이 글에서는 두 가지 방법을 모두 살펴볼 것이다.

자바스크립트를 HTML 속으로 집어넣기

자바스크립트를 HTML 페이지 안으로 포함시키는 가장 기본적인 방법은 다음과 같다:

<script>
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
</script>

위 코드는 문서의 어디에든 넣을 수 있고 잘 실행될 것이다. 하지만 다른 곳보다 훨씬 더 좋은 곳이 있다. 자바스크립트를 집어넣을 곳에서 이에 대해 설명하겠다.

이후에는 웹 페이지에서 사용할 다양한 스크립트들이 생길 수 있으므로, 사용하고 있는 스크립트의 이름을 MIME 타입으로 명명해 두는 것이 좋겠다:

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
</script>

웹을 돌아다니다 보면 language=“javascript” 속성을 가진 스크립트 예제들을 발견할 수 있을 것이다. 이것은 현재 통용되는 어떠한 웹 표준에도 포함되어 있지 않은 문법이며 따라서 의미가 없는 것이다. 가능하다면 이것을 다 지워버리자. 이것은 과거에 VBScript가 함께 사용되던 좋지 않은 상태로 돌아가는 것이다. VBScript는 이제 사라졌으며 오로지 IE 에서만 동작한다.

예전에는 브라우저가 자바스크립트의 존재에 대해 몰랐기 때문에, 그것을 HTML의 일부로서 표현하는 것을 방지하기 위해 HTML의 주석으로서 표현할 필요가 있었다. 이것은 정말로 오래된 브라우저에서만 필요한 방법이기 때문에 더이상 번거롭게 이런 작업을 할 필요는 없다. 하지만 만약 당신이 DTD로 Strict XHTML을 사용한다면 모든 자바스크립트 코드들을 CDATA 블럭으로 감싸 줌으로서 코드를 유효하게 할 필요도 있다(왜 그러는지 아직은 알 필요가 없다. 자바스크립트 공부를 시작하는 지금의 상태에서는 그렇게 중요한 사항이 아니다. 곧 알게 될 것이다.):

<script type="text/javascript">
/* <![CDATA[ */
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
/* ]]> */
</script>

그러나, strict XHTML 문서에서는 훨씬 더 민감하게 반응하며 어떤 자바스크립트도 문서에 포함시키지 말고 외부 파일로 두어야 한다.

외부 자바스크립트 파일과 연결하기

외부 자바스크립트 파일(같은 서버에 있든, 인터넷 어딘가에 있든 간에)을 연결하기 위해 해야 할 일은 스크립트 요소에 src 속성을 추가하는 것이 전부이다:

<script type="text/javascript" src="myscript.js"></script>

페이지에서 이 요소를 만나게 되면, 브라우저는 myscript.js 파일을 불러와서 그것을 실행시킨다. src 속성을 정의해 두었다면, script 요소 내부에 있는 내용은 그것이 무엇이든간에 건너뛰게 된다. 다음의 예제는 myscript.js 파일을 불러와서 실행시키지만, script 요소 내부의 내용은 전혀 실행하지 않을 것이다.

<script type="text/javascript" src="myscript.js"> alert('I am pointless as I won`t be executed'); </script>

자바스크립트 코드를 외부 파일로 두는 것은 여러가지로 이치에 맞는 일인데, 예를 들어:

  • 같은 자바스크립트 기능을 여러개의 HTML 파일에 적용시키면서도 쉽게 관리할 수 있다: 기능에 변화를 주고 싶다면, 단지 하나의 파일만 변경하면 된다.
  • 자바스크립트 파일은 브라우저의 캐쉬에 담길 것이다. 캐슁하게 되면, 브라우저는 자바스크립트의 복사본을 로컬에 저장하게 된다. 다음에 같은 사용자가 방문하게 되면, 브라우저는 서버에서 자바스크립트 파일을 다운로드 받지 않고 사용자의 컴퓨터에서 불러오게 된다. 따라서 훨씬 빠르다.
  • 스크립트를 수정할 필요가 있다면 그것을 빠르게 찾을 수 있다: 긴 길이의 HTML 파일을 검색해서 문제를 고치기 위한 지점을 일일히 찾을 필요가 있다.
  • 디버깅 툴이나 에러 콘솔이 어느 파일에서 에러가 있는지 알려줄 것이며, 꽤 신뢰할 만 한 행 번호를 알려주기 때문에 에러를 고치는 것이 더욱 쉽다.

원한다면, 문서에 추가할 수 있는 자바스크립트 파일의 갯수에는 제한이 없지만, 그렇게 하기 전에 몇가지 고려해야만 할 것들이 있다.

자바스크립트와 브라우저 성능

방대한 양의 자바스크립트를 여러개의 파일에 나누어 담고, 한 번에 하나의 일을 하게 한다면 기능성을 유지하면서도 관리와 디버그가 편리하게 되는 아주 좋은 아이디어이다. 예를 들어 다음과 같이 여러개의 스크립트 블럭을 사용할 수 있다:

<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="widgets.js"></script>

이렇게 함으로서 개발에는 여러가지 혜택이 있지만, 브라우저의 성능 문제가 이러한 혜택을 흐리게 한다. 이것은 브라우저에 따라 조금씩 다르기는 한데, 가장 나쁜 시나리오(정말 슬프게도, 가장 많이 사용되는 브라우저에서 이런 일이 일어난다)는 다음과 같다:

  • 브라우저가 script 요소를 만날때마다, 문서의 렌더링(표시)을 잠시 중단할 것이다.
  • 브라우저는 src 속성에 정의된 자바스크립트 파일을 불러온다(만약 스크립트 파일을 다른 서버에 저장해 두었다면, 브라우저가 그 서버를 찾아낼 때까지 더 기다려야 한다).
  • 스크립트를 실행한 뒤 다음 작업을 진행한다.

이것이 의미하는 바는 간단하다. 당신이 문서에 포함시키는 스크립트 하나 하나에 대해 위의 과정이 반복되어야 하며 당신의 사이트는 그만큼 느리게 표시될 것이다. 방문자들은 이것에 대해 짜증을 내기 시작할 것이다.

이것을 피하기 위한 한가지 방법은, 모든 스크립트를 하나의 파일에 집중시키는, 스크립트를 위한 스크립트를 사용하는 것이다. 이러한 방법을 사용함으로서 관리의 편의성을 누리면서도 웹 페이지가 표시되는 딜레이는 줄일 수 있다. 이것을 하는 스크립트를 웹에서 몇가지 찾을 수 있는데, Ed Eliot이 작성한 PHP 스크립트도 이러한 일을 한다.

화면 표시에 생기는 딜레이는, 또한 우리가 자바스크립트를 문서의 어디에 포함시켜야 하는지도 지시해준다.

자바스크립트를 집어넣을 곳

기술적으로는, 자바스크립트를 문서의 어디에 포함시키든 관계가 없다. 결정을 내리기 위해 고려해야 할 사항은, 성능과, 개발자들이 당신의 스크립트를 빨리 찾아낼 수 있도록 하는 것과, 자바스크립트가 방문자들을 위해 즉시 동작해서 그들에게 봉사해야 한다는 것이다.

고전적으로 가장 좋은 방법은 스크립트를 문서의 head 에 포함시키는 것이다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript" src="myscripts.js"></script>
</head>
<body>
<!-- lots of HTML here -->
</body>
</html>

이것의 장점은, 스크립트의 위치를 예측할 수 있다는 것이다. 개발자들은 스크립트를 어디에서 찾아야 할 지 빠르게 알 수 있을 것이다. 또하나의 장점이 있는데, 문서가 화면에 표시되기 전에 모든 자바스크립트가 로드되고 실행된다는 것이다.

하지만 이것의 단점은 스크립트가 문서의 표시를 지연시킬 것이며, 스크립트가 문서의 HTML 요소에 접근할 방법이 없다는 것이다. 따라서 HTML에 변경을 가하는 스크립트들은 문서가 완전히 로드될때까지 실행을 잠시 지연시켜야 할 필요가 있다. 이것은 온로드 핸들러, 웹에서 찾을 수 있는 다양한 DOMready, 또는 contentAvailable 들을 통해서 할 수 있다. 하지만 이들 중 어느것도 완전히 신뢰할 수는 없으며, 그들 대부분은 브라우저에 따라 달라지는 핵을 사용하고 있다.

성능 전문가들은 최근 들어서 자바스크립트를 body의 마지막에 위치시키는 방법의 손을 들어주고 있다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
</head>
<body>
<!-- lots of HTML here -->
<script type="text/javascript" src="myscripts.js"></script>
</body>
</html>

이렇게 함으로서 자바스크립트는 HTML의 표시를 전혀 지연시키지 않으며, 자바스크립트를 이용해 변경하고자 하는 모든 HTML 요소들이 이미 로드되어 있다는 점이다.

이 방법의 단점 중 하나는 이것이 아직 널리 알려지지 않았으며, 개발자들이 당신의 코드를 관리하려고 할 때 혼동을 할 수 있다. 다른 좀 더 심각한 문제는, 자바스크립트가 로드되기 전에 HTML에 접근할 수 있다는 것이다. 사실 이것이 당신이 원하는 것이었긴 하지만, 이것은 또한 사이트의 방문자들이 스크립트를 통한 의도된 변경들이 이루어지기 전에 HTML 과 상호작용한다는 것을 의미한다. 예를 들어, 자바스크립트를 이용해서 입력양식을 서버에 전송하기 전에 유효성을 검증하려고 했다고 가정하면 입력양식은 스크립트가 로드되기 전에 서버로 전송될지도 모른다. 당신이 스크립트로 하는 일이 그저 사소한 추가적인 장점들(그것에 완전히 의존하는 것이 아니라)이라면, 이것은 큰 문제가 되지는 않는다. 조금 거슬릴 뿐이다.

당신의 웹 사이트에 어떤 방법을 사용할 것인지 선택하는 것은 당신의 몫이다. 사이트의 목적에 더 부합하는 방법을 사용하도록 하라. 두가지 방법을 절충할수도 있는데, 아주 중요한 기능을 가지고 있는 스크립트를 head에 위치시키고, “있으면 더 좋은” 스크립트들은 문서의 끝 부분에 위치시키는 방법이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript" src="myimportantscripts.js"></script>
</head>
<body>
<!-- lots of HTML here -->
<script type="text/javascript">
applyFunctionality();
</script>
<script type="text/javascript" src="myscripts.js"></script>
</body>
</html>

무엇을 하든 간에, 스크립트의 순서를 정확히 하도록 하라. 브라우저는 그것들을 순서대로 불러와서 실행시킨다. 이것은 또 하나의 고려할 만 한 것을 상기시켜준다.

자바스크립트 보안과 미비점들

아무리 강조해도 지나치지 않다. 자바스크립트는 대단한 언어이고, 뛰어난 응답성과 아름다운 상호작용들을 웹사이트와 웹 응용프로그램에 부여한다. 하지만, 보안에서는 대단히 취약하다. 간단히 말해, 자바스크립트에는 어떠한 보안 모델도 존재하지 않으며, 당신은 중요하거나 기밀이 필요한 것들에 대해 자바스크립트를 사용해서 보호, 암호화, 보안, 저장, 그 어떤 것도 시도해서는 안된다.

페이지의 모든 스크립트들은 똑같은 권한을 갖고 있다 – 그것들 모두는 서로 접근할 수 있고, 변수들을 읽을 수 있고, 함수에 접근하며 다른것을 덮어 쓸 수 있다. 만약 당신이 처음에 포함시킨 자바스크립트 파일에 init() 라는 이름의 함수를 사용하고, 그리고 같은 이름의 함수를 마지막에 포함시킨 자바스크립트 파일에서 다시 사용한다면, 처음의 것은 덮어써진다. 우리는 이 문제에 대해 최선의 연습 방법에서 다시 다룰 것이다.

이러한 것들은, 당신이 다른 사람의 스크립트를 절대로 사용하지 않는다면 그렇게까지 큰 문제가 되지는 않는다. 하지만, 절대 다수의 온라인 광고나 통계들이 자바스크립트를 통해 이루어지는 현재의 상황에서는 이야기가 다르다 – 당신은 언제나 다른 사람이 만든 스크립트를 사용하고 있다.

또한, 스크립트는 쿠키를 읽고, 함수의 prototype 을 이용해서 자바스크립트 기본 함수를 덮어 쓸 수 있다. 최근의 브라우저에서는 자바스크립트를 쉽게 꺼버릴 수 있으므로 적어도 보안에 대해서는 자바스크립트를 아예 잊어버리는 것이 현명한 일이다.

다른 개발자들이 자바스크립트를 쉽게 읽어보고 분석할 수 있다. 물론 당신은 자바스크립트를 압축(필요없는 공백문자를 모두 없애버린다)하고 암호화obfuscate(랜덤한 변수와 함수명을 사용한다)할 수 있지만, 이것 또한 되돌릴 수 있다. 이 경우 당신의 코드를 쉽게 읽을 수 없는 유일한 사람은 바로 당신이 될 것이다. 소스 코드를 쉽게 읽을 수 있고 그것을 쉽게 분석할 수 있다는 것이 자바스크립트가 성공한 언어가 될 수 있었던 주된 이유이다. 수년간, 우리는 다른 이들의 코드를 보고 배워왔다. 최근에는 좋은 책과 참고서들이 많이 있긴 하지만 말이다.

압축과 암호화를 이용하는 것이 보안 문제에서는 아무짝에도 쓸모 없지만, 중간 규모나 큰 규모의 스크립트를 웹에 게제하여 실제로 사용할 때는 종종 사용되곤 한다. 이렇게 함으로서 대역폭에 더 적은 부담을 주고, 사용자가 조금 더 빠른 속도를 느낄 수 있기 때문이다. 생활 주변의 소소한 이야기를 다루는 블로그 등에 쓰이는 자바스크립트의 여기저기에서 몇 바이트씩 줄이는 것은 별 의미가 없어 보이겠지만, google.com 같은 거대한 사이트의 규모가 되면 이렇게 몇 바이트씩 줄이는 것이 모여서 엄청난 절약 효과를 가져온다.

피해야 할 테크닉

자바스크립트를 배우는 데 있어 가장 큰 문제는, 이 곳 저 곳에 오래된데다가 위험할 수도 있는 정보들이 산재해 있다는 것이다. 특히 더 좌절스러운 것은 이러한 오래되고, 심지어 위험할 수도 있는 정보들이 보기좋게 꾸며져서는 많은 수의 자바스크립트 초보자들에게 전달된다는 것이다. 초보자들은 이렇게 이미 만들어져 있는 코드들을 복사해다 붙여 넣고서는, 자바스크립트에 대해 “뭐야, 별거 아니잖아” 하는 기분을 갖게 되곤 한다.

자바스크립트가 적용되는 환경 자체가 실로 불가사의(사용자들은 어떤 설정이라도 할 수 있다)한데다가, 웹에서 찾아낸 스크립트를 그렇게 만들게 된 결정에 대해서도 알 수 없으므로, 해결책으로 지목하기는 어렵다. 하지만, 다음에 나열하는 것들은 오래된 것들이고, 정말로 오래된, 좋지 않은 브라우저를 꼭 지원해야 할 경우가 아니라면 사용하지 않아야 할 것들이다.

  • document.write() – 이것을 통해 문서에 내용을 써 넣을 수 있지만, 많은 문제들이 있다: HTML과 스크립트를 뒤섞게 되고, 표현이 나타나야 할 정확한 그 자리에 스크립트 블럭을 위치시켜야 하므로, 페이지의 속도가 느려진다. 코드의 결과를 간단하게 보여주기에는 아주 좋은 방법이지만(연습용으로 사용하거나, 테스트/디버그하기엔 좋다), 사용자들에게 보일만 한 것은 아니므로 실제로 웹에 게제하는 코드에는 사용하지 말아야 한다
  • >noscript<>/noscript< — 그 이름이 의미하듯이, 이 요소는 script 요소의 반대이다. 내부의 내용은 자바스크립트를 꺼 둔 사용자에게 보여지게 된다. noscript 를 사용하는 주된 이유는 자바스크립트를 사용할 수 없는 사람들에게 대체할만한 내용을 제공하고자 하는 데 있다. 자바스크립트를 사용하지 않는 사람들이, 당신의 작업을 힘들게 하기 위해서 그렇게 하는 것은 아니다 – 보안상의 이유로 그렇게 하고 있을수도 있고, 자바스크립트를 지원하지 않는 브라우저일수도 있다. 그러나 noscript 의 내용으로서 제공할 수 있는 것에는 한계가 있다. 그리고, 스크립트를 켜라는 주문을 하기 위해 이 요소를 사용해서는 안된다 – 일부 사용자에게는 그것이 불가능하기 때문이다.
  • >a href=“javascript:doStuff)”<…>/a< — 버튼을 사용하기가 어려웠던 시절(오래된 브라우저에서는 버튼에 스타일을 입힐 수 없다), 이것은 자바스크립트 기능을 실행시키기 위해서 아주 폭넓게 사용되던 방법이다. 여기서의 문제는 이것이 올바른 링크가 아니라는 것이다. javascript는 정규화된 인터넷 프로토콜(‘ftp:‘나 ‘http:‘ 같은)이 아니기 때문이다. 자바스크립트가 꺼져 있어도 여전히 링크가 보이며, 사용자들에게 뭔가가 일어날 것이라는 잘못된 기대를 갖게 한다.
  • document.layers and document.all — 두가지 모두 구형 브라우저(Netscape 4.x 와 Internet Explorer 4)에서 DOM 대신 쓰이던 것이고, 그런 브라우저들을 지원해야만 하는 상황이 아니라면 필요없는 코드이다.

요약

여기까지 해서, 자바스크립트에 대한 개괄적인 것들을 다루었다. 상세한 내용들을 많이 다루는 대신, 자바스크립트를 페이지에 적용하는 가장 좋은 방법과, 피해야 할 것들에 대한 개요를 제공하는것이 내 목적이었다. 다음의 글에서 실제 코드를 사용하는 최선의 연습들을 다룰 것이다.

연습문제

  • 다음 링크는 무엇을 하며, 발생할 수 있는 문제는 무엇인가?
<a href="javascript: open('tac.pdf')">Read our Terms and Conditions</a>
  • 스크립트에 매개변수를 제공하는 것은 재사용성을 높이는 가장 좋은 방법이다. 간결하고 사용하기 쉬운 매개변수를 쓸 수 있는 옵션을 제공하는 것이 아주 중요하다. 다음과 같이 할 경우 어떠한 단점들이 있겠는가(어느쪽이 간결하고 쉬운 매개변수를 제공하는가)?
<script src="badge.js">
var color = 'blue';
var background = 'yellow';
var width = 400;
</script>
  • “전역 변수”의 문제점은 어떤것이고, 어떻게 피할 수 있는가?
  • 있으면 좋지만, 사이트의 기능에 절대적으로 필요하지는 않은 방대한 양의 스크립트를 어디에 넣어야 하는가? 이유는 무엇인가?
  • 다음과 같은 스크립트를 실행할 때:
<body onload="init()">

저자에 대해

Chris Heilmann은 지난 10년간 웹 개발자로서 활동해 왔으며 취미삼아 라디오 저널리즘에 관한 일도 한다. 그는 영국에 있는 야후에서 트레이너와 리더 개발자로 근무하고 있으며 유럽과 아시아의 front end 코드의 품질을 관리한다.

그의 블로그는 Wait till I come 에 있으며 많은 소셜 네트워크에서 “codepo8”로 알려져 있다.

이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.