Skip to content

Latest commit

 

History

History
212 lines (147 loc) · 16.1 KB

Chapter_13.md

File metadata and controls

212 lines (147 loc) · 16.1 KB

Chapter 13.

13-1 자바스크립트로 무엇을 할까?

자바스크립트는 웹 시절 초기부터 지금까지 웹 브라우저에서 꾸준히 사용해온 언어이다. 자바스크립트는 웹에서 어떤 일을 할 수 있는지 알아보자.

웹의 요소를 제어한다.

HTML이 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정했다면, 자바스크립트는 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다. 자바스크립트는 HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓는 것처럼 웹 사이트 UI 부분에 많이 활용한다.

웹 애플리케이션을 만든다.

과거 웹은 단순히 정보를 나열하고 검색했다면, 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작한다. 웹 브라우저에서 문서도 작성할 수 있고 그림을 그릴 수도 있으며 게임을 할 수도 있다. 이런 사이트들 모두 자바스크립트로 만든다. 이러한 사이트를 만들려면 지도 API나 데이터 시각화 라이브러리를 사용해야 하는데 모두 공개되어 있으므로 누구나 사용할 수 있다.

다양한 라이브러리를 사용할 수 있다.

웹 플랫폼을 중심으로 하는 서비스가 점점 늘어나면서 그만큼 웹 브라우저를 통한 상호작용이 더욱 중요해지고 있다. 과거에는 서버에서 했던 일을 이제는 클라이언트에서도 할 수 있다. 클라이언트에서 처리해야 할 기능이 많아지면서 자바스크립트 기능은 더욱 강력해지고 있다. 웹 애플리케이션을 개발할 때 사용하는 리엑트, 앵귤러, 뷰 같은 프레임워크도 있고, 그래픽 활용을 위한 D3.js나 DOM을 쉽게 조작할 수 있게 해주는 제이쿼리 같은 라이브러리도 있다. 이 밖에도 다양한 자바스크립트 라이브러리가 계속 등장하고 있어서 웹 개발을 도와준다.

서버 개발을 할 수 있다.

예를 들어 Node.js는 그동안 프론트엔드 개발에서 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있도록 만든 프레임워크이다. 흔히 백엔드 개발 언어라고 하면 PHP, 자바, 닷넷을 생각하지만 이제는 자바스크립트만 알아도 서버 개발까지 영역을 확대할 수 있다.

13-2 웹 브라우저가 자바스크립트를 만났을 때

웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기가 있다. 따라서 자바스크립트 소스는 웹 문서에서 <script> 태그를 이용해 작성할 수 있다. 또는 자바스크립트 소스만 별도 스크립트 파일로 작성한 후 웹 문서와 연결해서 사용할 수도 있다.

웹 문서 안에 <script> 태그로 자바스크립트 작성하기

자바스크립트 소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성할 수 있다. 웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바스크립트 소스를 작성하는 것이다. <script> 태그는 웸 문서 안의 어디든 위치할 수 있고, 삽입된 위치 그 자리에서 바로 스크립트가 실행된다. 또한 <script> 태그는 하나의 문서에서 여러 개 사용할 수도 있다. 자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다.그래서 </body> 태그 직전에 자바스크립트 소스를 삽입힌다. HTML, CSS와 달리 자바스크립트는 영어 대소문자를 구별하므로 소스를 작성할 때 주의해야 한다.

HTML 문서 안에 자바스크립트 소스를 작성하면 웹 문서에서 바로 확인할 수 있는 장점도 있지만 단점이 더 많다. 우선 HTML 태그와 자바스크립트 소스가 함께 섞여 있어 웹 문서가 복잡해보인다. 특히 소스를 수정할 때 필요한 코드를 찾아보기가 쉽지 않다. 그리고 여러 웹 문서에서 같은 자바스크립트 소스를 사용하는 경우에 똑같은 소스를 반복해서 삽입해야 한다. 이때 자바스크립트 소스를 수정해야 한다면 이 소스가 포함된 모든 웹 문서를 찾아다니며 수정해야 한다. 그래서 자바스크립트 소스를 작성할 때 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용한다.

외부 스크립트 파일로 연결해서 자바스크립트 작성하기

CSS와 마찬가지로 자바스크립트 소스도 따로 저장한 후 웹 문서에 연결해서 사용할 수 있다. 이렇게 하면 웹 문서 안에는 직접 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS만 유지할 수 있어서 소스가 한결 깔끔하다. 외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 *.js 파일로 저장한다. 그리고 HTML 문서에 <script> 태그와 src속성을 이용해서 자바스크립트 파일을 연결하면 된다. 이때 연결한 자바스크립트 파일은 마치 웹 문서에서 직접 작성한 자바스크립트 소스처럼 사용할 수 있다. 이 방법을 이용하면 간단히 JS 파일만 수정해도 연결된 HTML 문서에 바로 적용된다.

<!-- 기본형 -->
<script src="외부 스크립트 파일 경로"></script>

웹 브라우저에서 스크립트를 해셕하는 과정

웹 문서에 자바스크립트 소스가 포함되어 있으면 웹 브라우저는 어떤 과정으로 해석하고 결과를 보여줄까? 다음 예제교재의 13\script-1.html를 통해 알아보자.

<!DOCTYPE html>
<html lang="ko">		<!--  <- HTML 분석기 -->
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>
	<style>
		/* <style> 태그 내 CSS 분석기 */
		body { text-align:center; }
		#heading { color:blue; }
		#text { 
			color:gray;
			font-size:15px;
		}
	</style>	
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>

	<script>
	  /* <script> 태그 내 자바스크립트 해석기 */
	  var heading = document.querySelector('#heading');
	  heading.onclick = function() {
	  heading.style.color = "red";
	  }
	</script>
</body>
</html>
  1. 웹 브라우저는 1행에 있는 <!DOCTYPE html>을 보고 이 문서가 웹 문서라는 것을 알게 된다. 그리고 <html>과 </html> 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작한다.
  2. 웹 문서에서 HTML 태그의 순서와 포함 관계를 확인한다. <head>와 </head> 태그, <body>와 </body> 태그 사이에 각각 어떤 태그가 있는지 확인한다. 그리고 태그 간의 관계는 어떻게 되어 있는지 등을 분석한다.
  3. 태그 분석이 끝나면 7~14행의 스타일 정보를 분석한다.
  4. 20행에 있는 <script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘긴다. 자바스크립트 해석기는 소스를 찾아 해석한다.
  5. 2에서 분석한 HTML과 3에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시한다.
  6. 이제 웹 브라우저에서 '자바스크립트' 텍스트를 클릭하면 분석해 놓은 자바스크립트를 실행해서 그 결과를 화면에 표시한다.

13-3 자바스크립트 용어와 기본 입출력 방법

식과 문

자바스크립트 언어의 큰 줄기는 식expression과 문statement이다. 자바스크립트에서 식은 표현식이라고도 하는데, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다. 즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장된다. 다음은 자바스크립트의 여러 가지 식을 나타내는 예제이다.

inch * 2.54		// 연산식은 식이다.
"안녕하세요?";		// 문자열도 식이다.
5			// 숫자도 식이다.

이에 비해 문은 명령이라고 생각할 수 있다. 문의 끝에는 세미콜론(;)을 붙여서 구분한다. 앞으로 배울 '조건문'이나 '제어문' 등을 예로 들 수 있다.

간단한 입출력 방법

소스를 입력하다 보면 사용자에게 입력받아야 하거나 자바스크립트 실행 결과를 웹 브라우저에 표시해야 할 때가 있다. 여기에서는 앞으로 이 책의 예제 소스를 따라하려면 알아야 할 자바스크립트의 기본 입출력 방법을 살펴보자.

알림 창 출력하기

알림 창alert은 가장 많이 사용하는 간단한 대화 상자이다. 웹 브라우저에서는 작은 알림 창을 열어 메시지를 표시할 수 있으므로 이 책의 예제에서도 간단한 실행 결과를 표시할 때 사용한다.

/* 기본형 */
alert(메시지)

확인 창 출력하기

알림 창은 단순히 메시지를 보여 주는 기능만 하지만, 확인 창confirm은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있다. 그러면 선택한 결과에 맞춰 프로그램이 동작한다.

/* 기본형 */
confirm(메시지)

확인 창은 버튼이 두 개 있다. 사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램에서 처리한다.

프롬프트 창에서 입력받기

프롬프트 창prompt은 텍스트 필드가 있는 작은 창이다. 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다.

/* 기본형 */
prompt(메시지) 또는 prompt(메시지, 기본값)

프롬프트 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있다. 기본값을 지정하면 텍스트 필드 안에 기본값이 표시된다. 기본값을 지정하지 않으면 빈 텍스트 필드로 표시된다.

웹 브라우저 화면에 출력을 담당하는 document.write()문

이 책의 예제 소스를 따라 하다 보면 document.write()라는 명령문을 자주 만날 것이다. 자바스크립트의 실행 결과는 텍스트나 이미지로 출력하거나, 따로 지정한 영역에 내용을 표시하는 경우가 많다. 하지만 단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 document.write()를 많이 사용한다. document.write()를 완전히 이해려면 document 객체를 알아야하지만 아직 이 객체를 배우지 않았으므로 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문이라는 정도로만 알아두자. document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결괏값이 저장된 변수를 넣을 수도 있다. 괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ')사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시된다. 물론 따옴표 안에는 HTML 태그도 함께 사용할 수 있다.

웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수도 있다. 이때 + 연선자를 사용해서 연결해 준다. 여기서 + 연산자는 더하기 기호가 아니라 연결 연산자이다. 내용과 변수를 연결해 주는 역할을 한다.

콘솔 창에 출력하는 console.log()문

consol.log 문은 괄호 안의 내용을 콘솔 창에 표시한다. 콘솔 창은 웹 브라우저 개발자 도구 창에 포함되어 있는 공간이다. 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다. console.log 문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있다. 이때 따옴표 안에 HTML 태그는 사용할 수 없다.

13-4 자바스크립트 스타일 가이드

코딩 규칙이 왜 필요할까?

자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준 스타일이라고도 한다. 앞으로는 '스타일 가이드'라고 칭할 것이다. 자바스크립트는 웹 문서에 동적인 효과를 주지 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생할 수 있다. 게다가 오픈소스에 기여하거나 누군가와 공유할 소스라면 코드를 더욱 깔끔하게 작성해야 한다. 이때 스타일 가이드를 따라서 작성하면 소스 코드의 오류도 줄이고 일관성이 생겨 읽기가 쉬워진다. 회사에서 자바스크립트를 사용하여 웹 개발 프로젝트를 진행한다면 통일된 코딩 스타일이 꼭 필요하다. 그래야 여러 사람이 작성한 프로그램도 마치 한 사람이 작성한 것처럼 보일 것이다. 또한 스타일 가이드에 따라 작성된 웹 사이트나 애플리케이션은 유지/보수할 때도 수월하고 비용도 훨씬 줄어든다.

자바스크립트 스타일 가이드

자바스크립트 스타일 가이드는 회사 프로젝트를 맡은 팀에서 따로 만들어서 사용할 수도 있다. 하지만 보통은 구글이나 에어비앤비에서 배포한 것을 기준으로 작성한다.

자바스크립트 소스를 작성할 때 지켜야 할 규칙

  1. 코드를 보기 좋게 들여쓰기한다.

    HTML 태그와 CSS를 작성했던 것처럼 자바스크립트 소스를 작성할 때에도 들여쓰기를 해야 한다. 들여쓰기를 해서 작성하면 소스 간의 포함 관계를 알아보기 쉽다.

  2. 세미콜론으로 문장을 구분한다.

    자바스크립트에서 세미콜론은 문장의 끝을 나타내며 문장과 문장의 끝을 구분하는 역할도 한다. 사실 자바스크립트에서는 문장이 끝날 때 세미콜론을 붙이지 않아도 실행된다. 그러나 자바스크립트 스타일 가이드에서는 문장을 끝낼 때 반드시 세미콜론을 붙이도록 권장한다. 이렇게 문장을 명확하게 표시해주면 소스를 디버깅하기 쉽기 때문이다. 참고로 자바스크립트에서는 문장을 한 줄에 두 개 이상 세미콜론으로 구분하여 쓸 수도 있지만, 소스 가독성이 떨어지고 디버깅하기도 어렵다. 그러므로 소스는 한 줄에 한 문장만 작성하는 것이 좋다. 

// 권장 x
var n = 10
// 권장 o
var n = 10;
// 권장 x
var n = 10; var sum = 0;

  1. 공백을 넣어 읽기 쉽게 작성한다.

    예약어나 연산자, 값 사이에는 공백을 넣어서 소스 코드를 읽기 쉽게 작성한다. 공백이 없어도 자바스크립트는 잘 실행되지만, 실제로 개발자가 소스 코드를 읽거나 디버깅을 할 때는 공백이 있어야 가독성이 좋다. 

// 권장 x
var num=2
var sum=num+10

// 권장 o
var num = 2;
var sum = num + 10;

  1. 소스 코드를 잘 설명하는 주석을 작성한다.

    프로그래밍의 주석은 소스 코드를 살펴보기 위해 꼭 필요한 요소이다. 자바스크립트의 주석은 다음과 같이 2가지 형태로 사용할 수 있다.

    1. 한 줄 주석: 주석 기호로 슬래시 2개(//)를 붙이고 내용을 작성한다.
    2. 여러 줄 주석: 주석 내용이 여러 줄이면 여는 주석 기호(/*)와 닫는 주석 기호(*/)를 맨 뒤에 넣는다.
    3. JSDoc 기능 활용하기 - 코딩애플

  1. 식별자는 정해진 규칙을 지켜 작성한다.

    식별자는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이릅 붙인 특정 단어를 의미한다. 식별자의 첫 글자는 반드시 영문자나 언더스코어, 달러 기호로 시작해야 한다. 그 다음에는 영문자나 언더스코어, 달러기호, 숫자를 작성할 수 있다.

  2. 예약어는 식별자로 사용할 수 없다.