본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
  1. 튜토리얼
  2. 코어 자바스크립트
  3. 자바스크립트 기본
2021년 1월 5일

Hello, world!

여러분이 읽고 있는 이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룹니다.

코어 자바스크립트를 다루고 있긴 하지만, 학습을 위해선 스크립트를 실행할 수 있는 환경이 필요합니다. 본 튜토리얼은 온라인으로 제공되기 때문에 실행환경으로 브라우저를 사용하도록 하겠습니다. Node.js와 같이 브라우저 이외의 환경에 주력하는 학습자를 위해, 브라우저 한정 명령어(alert 등)는 최소한으로 사용하도록 하겠습니다. 이런 명령어를 학습하는 데 시간을 보내지 않도록 말이죠. 브라우저 환경에서의 자바스크립트는 다음 파트에서 다루도록 하겠습니다.

먼저, 웹 페이지에 스크립트를 삽입하는 방법에 대해 알아봅시다. 참고로 Node.js와 같은 서버 사이드 환경에서 스크립트를 실행하고 싶다면 'node my.js'와 같은 명령어를 사용하면 됩니다.

‘script’ 태그

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있습니다.

예시:

<!DOCTYPE HTML>
<html>

<body>

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

</body>

</html>

오른쪽 위에 있는 ‘재생’ 버튼을 누르면 예제가 실행됩니다.

<script> 태그엔 자바스크립트 코드가 들어갑니다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리합니다.

모던 마크업

<script> 태그엔 몇 가지 속성(attribute)이 있습니다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있습니다.

type 속성: <script type=…>

HTML4에선 스크립트에 type을 명시하는 것이 필수였습니다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있습니다. 모듈은 심화 내용이기 때문에 다른 파트에서 다시 이야기하도록 하겠습니다.

language 속성: <script language=…>

이 속성은 현재 사용하고 있는 스크립트 언어를 나타냅니다. 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색된 상황입니다. 더는 사용할 필요가 없어졌죠.

스크립트 전후에 위치한 주석

아주 오래된 책과 가이드에서는 다음과 같이 <script> 태그 안에 주석이 존재하는 걸 볼 수 있습니다.

<script type="text/javascript"><!--
    ...
//--></script>

모던 자바스크립트에선 이런 트릭을 사용하지 않습니다. 태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었죠. 지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 코드라는 사실을 알 수 있습니다.

외부 스크립트

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다.

이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입합니다.

<script src="/path/to/script.js"></script>

여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타냅니다. 현재 페이지에서의 상대 경로를 사용하는 것도 가능합니다. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼 말이죠.

물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됩니다.

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
주의:

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.

스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.

여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다. 스크립트 파일을 한 번만 다운받으면 되죠.

이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.

src 속성이 있으면 태그 내부의 코드는 무시됩니다.

<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못합니다.

다음 코드는 실행되지 않습니다.

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

따라서 <script src="…">로 외부 파일을 연결할지 아니면 <script> 태그 내에 코드를 작성할지를 선택해야 합니다.

위의 예시는 스크립트 두 개로 분리하면 정상적으로 실행됩니다.

<script src="file.js"></script>
<script>
  alert(1);
</script>

요약

  • 웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용합니다.
  • type ê³¼ language 속성은 필수가 아닙니다.
  • 외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입합니다.

브라우저 환경에서의 스크립트, 스크립트와 웹 페이지의 상호작용에 대해서는 배울 것이 훨씬 더 많습니다. 하지만 본 튜토리얼의 이 파트는 자바스크립트라는 언어 자체에 초점을 맞추고 있기 때문에, 브라우저에서만 사용하는 코드에 주의를 뺏기지 않도록 하겠습니다. 브라우저는 온라인상에서 편리하게 자바스크립트를 실행할 수 있게 해주는 수단으로만 사용하도록 하겠습니다.

과제

alert 창 띄우기

"자바스크립트!"라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어 보세요.

Sandbox나 본인의 로컬환경 등 원하는 환경에서 제대로 동작하는지만 확인하시면 됩니다.

새 창에서 데모 보기

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

샌드박스를 열어 정답을 확인해보세요.

외부 스크립트를 이용해 alert 창 띄우기

중요도: 5

이전 과제 alert 창 띄우기의 해답에 있는 스크립트를 alert.js라는 외부 파일로 옮겨보세요.

해당 파일을 문서와 동일한 경로로 옮긴 후, 스크립트가 기존처럼 alert 창을 잘 띄워주는지 확인해보세요.

HTML 코드:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

동일한 폴더에 있는 alert.js 파일의 경우

alert("I'm JavaScript!");
이전 주제다음 주제
튜토리얼 지도

댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
  • 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 í•  것이 있다면 댓글 대신 이슈를 만들어주세요.
  • 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
  • 댓글에 í•œ 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.

챕터

주제 탐색

공유
GitHub에서 수정하기