1.4 시작하기

먼저 HTML 파일과 CSS 파일, 자바스크립트 소스 파일 세 가지를 만들면서 시작하겠습니다.
자바스크립트와 CSS는 HTML에 포함될 수 있으므로 HTML 파일 하나에서 모든 일을 다 할 수도 있지만,
이들을 분리하면 뚜렷한 장점이 있습니다.
프로그래밍이 처음이라면 여기서 설명하는 대로 한 단계씩 따라 하길 강력히 권합니다.
이 장에서는 단계적으로 하나씩 알아보는 접근법을 택할 것이고 따라 하다 보면 기초가 확고해질 겁니다.

언떳 보면 정말 간단한 목적인데도, 그런 간단함에 비해 지나치게 많은 일을 하는 듯 보일 수도 있습니다.
그리고 어느 정도는 실제로 그렇기도 합니다.
물론, 똑같은 일을 훨씬 간단히 하는 예제를 만들 수도 있습니다.
하지만 그렇게 한다면 독자 여러분에게 나쁜 습관이 생길 수도 있습니다.
여기서 볼 가외의 단계들은 앞으로 몇 번이고 반복해서 보게 될 겁니다.
그리고 지금 지나치게 복잡하다고 느껴질 그 단계들을 반복함으로써, 일을 올바른 방법으로 하고 있다고 확신하게 될 겁니다.

이 장에 대해 짚고 넘어갈 중요한 점이 하나 있습니다.
이 장은 코드 예제에서 ES6 문법이 아니라 ES5 문법을 쓰는 유일한 장입니다.
ES5 문법을 쓰는 이유는 ES6를 지원하지 않는 브라우저를 사용하더라도 코드 샘플이 동작하게 하기 위해서입니다.
다음 2장부터는 ES6 코드를 어떻게 작성하는지, 그리고 구식 브라우저에서도 동작하도록 트랜스컴파일(transcompile)하는 방법을 배웁니다.
그런 기초를 익히고 나면, 그 다음부터는 ES6 문법을 사용합니다.
이 장의 코드샘플은 아주 단순하므로 ES5 문법을 사용해도 큰 차이는 없습니다.

NOTE_ 이 예제를 연습할 때는 모든 파일을 같은 디렉터리에 보관하는 게 좋습니다.
다른 파일과 섞여서 찾기 힘들어지는 일이 없도록, 이 예제의 파일을 담을 디렉터리를 새로 만들길 권합니다.

먼저 자바스크립트 파일로 시작합시다.
텍스트 에디터를 열고 main.js 파일을 만드십시오.
지금은 이 파일에 행 하나만 추가합니다.

console.log('main.js loaded');

다음에는 CSS 파일 main.css를 만드십시오.
아직 이 파일에 쓸 내용이 없으므로, 주석만 한 줄 써서 빈 파일이 되지 않게 만듭니다.

/* 여기 스타일을 씁니다. */

그리고 index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<h1>My first application!</h1>
<p>Welcome to <i>Learning JavaScript, 3rd Edition</i>.</p>
<script src="main.js"></script>
</body>
</html>

이 책은 HTML이나 웹 애플리케이션 개발에 관한 책은 아니지만,
자바스크립트를 공부하는 독자들은 대개 그런 목적으로 공부하는 것일 테니
HTML에서 자바스크립트 개발에 관련된 부분을 조금 짚고 넘어갑시다.

HTML 문서는 크게 헤드(head)와 바디(body)로 나뉩니다.
헤드에는 브라우저에 표시되는 내용과 관련이 있긴 하지만, 브라우저에 직접 표시되지는 않는 정보가 들어있습니다.
바디에는 브라우저에 렌더링될 페이지 콘텐츠가 들어 있습니다.
헤드에는 브라우저에 절대 나타나지 않는 요소가 들어 있고,
바디의 요소는 보통 브라우저에 나타난다는 것을 이해하는 것이 중요합니다.
물론 <script> 같은 특정 요소는 바디에 있더라도 브라우저에 나타나지 않고, CSS 스타일로 바디의 요소가 보이지 않게 감출 수 있긴 합니다.

헤드에 있는 <link rel="stylesheet" href="main.css">는 현재 비어 있는 CSS파일을 문서로 불러오는 링크입니다.
바디 마지막에 있는 <script src="main.js"></script>는 자바스크립트 파일을 문서로 불러오는 링크입니다.
하나는 헤드에 있고 다른 하나는 바디 마지막에 있다는 사실이 조금 이상해 보일 수도 있습니다.
<script> 태그를 헤드에 넣을 수도 있지만, 그렇게 하면 성능이 다소 떨어지고 헤드가 지나치게 복잡해지므로 바디 마지막에 놓습니다.

바디에는 <h1>My first application!</h1>가 있습니다.
이 태그는 최상위 헤더 텍스트, 즉 페이지에서 가장 크고 중요한 텍스트입니다.
그 다음에 있는 <p> (문단) 태그에는 텍스트가 들어있는데 그중 일부는 이탤릭체입니다.(<i> 태그로 둘러싸여 있습니다.)

브라우저에서 index.html을 불러 보십시오.
대부분의 시스템에서 가장 쉬운 방법은 파일 브라우저에서 파일을 더블클릭하는 겁니다.
파일을 브라우저 창에 드래그해도 됩니다.
HTML 파일의 바디 콘텐츠가 보일 겁니다.

NOTE_ 이 책에는 코드 샘플이 많습니다.
HTML과 자바스크립트 파일은 매우 커질 수 있으므로 책에 매번 파일 전체를 싣지는 않겠습니다.
코드 샘플을 파일의 어디에 넣어야 할지 본문에서 설명할 겁니다.
이렇게 하면 초보 프로그래머에게는 조금 골치가 아플 수 있겠지만, 결국에는 코드가 어떻게 서로 어울리는지 이해해야 합니다.
이걸 이해하지 않고 지나가기란 불가능합니다.

LHJ

1.4 시작하기

Related Posts