글: 정영태 | rookieangel77@gmail.com |/ 2013-04-22
안드로이드는 스마트폰을 넘어 다양한 기기로 적용 범위가 확대되고 있다. 애플의 iOS가 새로운 모바일 세상을 열었지만 안드로이드의 등장으로 말미암아 이제 비즈니스에서도 모바일은 필수적으로 고려해야 할 분야가 됐다. 한때 애플은 무소불위의 영향력을 행사했지만 이제 오픈소스란 거대한 흐름과 구글의 전폭적인 지원으로 안드로이드가 시장을 장악하고 있는 실정이다. 애플에게 반기를 든 글로벌 제조사들이 안드로이드 진영에 합류하고 수많은 안드로이드 기기가 출시됨에 따라 이제 안드로이드가 모바일 OS의 2인자에서 1인자로 도약할 날도 멀지 않았다.
이번 시간부터 진행하게 될 자바스크립트 강좌를 통해 프론트 엔드의 기본인 자바스크립트를 배우고, 나아가 수학에 해당하는 제이쿼리와 Node.js 등을 익히는 데 큰 도움이 됐으면 하는 바람을 전하며 본격적인 강좌를 시작한다.
자바스크립트란?
자바스크립트는 객체 기반의 스크립트 프로그래밍 언어다. 이 언어는 웹사이트에서 많이 사용하며, 다른 응용프로그램의 내장 객체에 접근할 수 있는 기능도 가지고 있다. 기본 문법은 C나 자바 언어와 비슷하며 if 문, for 루프, 비교 연산자 등을 제공한다. 기존 언어와는 달리 변수 타입을 명시할 필요가 없다는 점이 가장 큰 특징이다. 여기까지가 기존의 책에서 많이 봐오던 자바스크립트의 설명이다.
필자는 이 설명들이 쉽게 와 닿지 않았다. 그래서 떠올린 것이 건물을 지을 때 필요한 망치, 곡괭이, 톱과 같은 도구다. 건물을 지을 때 필요한 도구처럼 웹을 만들기 위해 필요한 도구 중 하나가 자바스크립트라 생각해 두자. 지금부터 배울 자바스크립트는 주로 클라이언트(브라우저)에서 사용되는 자바스크립트라는 점도 참고하길 바란다.
HTML - 기본구조/태그
도구만으론 건물을 지을 수 없다. 기둥도 세워야 하고 벽도 필요하며 집 내부를 꾸밀 벽지나 가구 등도 필요하다. 이런 역할을 하는 것이 HTML과 CSS다.
그 중 기둥, 벽 등과 같이 건물의 구조 역할을 하는 것이 HTML이다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 작성법은 웹페이지 콘텐츠 안의 꺾쇠괄호에 둘러싸인 ‘태그’로 작성한다.
<html> 태그는 웹페이지를 시작할 때 doctype 바로 뒤에 한 번 나타나고, 문서 가장 마지막에 슬러시와 함께 또 한 번 나타난다. <html> ~ </html>은 지금 작성하고 있는 문서가 HTML 언어로 만들어진 것을 알려주며, 또한 HTML 문서의 시작과 끝을 알려준다.
<head> 태그에는 페이지의 제목을 넣을 수 있다. 이 밖에도 CSS 혹은 자바스크립트 코드를 포함시키거나 자바스크립트와 CSS의 파일을 링크하기도 한다.
<body> 태그는 이미지, 텍스트 등 브라우저 창 안에 있어야 할 모든 정보들이 기술돼 있는 곳이다. <p>, <a> 그리고 <img /> 태그 등과 같은 수많은 태그들을 <body> 안에 기술해 브라우저 창 안을 꾸미게 된다.
<리스트 1>의 코드를 메모장에 작성하고 test.html로 저장해 보자(파일 형식은 모든 파일).
<그림 1> 기본 태그 작성 예제 결과
CSS
HTML만으로 웹 문서를 다양하게 설계하고 변경하는 데는 많은 제약이 따른다. 이를 보완하기 위해 만들어진 것이 스타일 시트고, 스타일 시트의 표준안이 CSS다.
HTML을 이용해 웹페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해줘야 하지만, 웹페이지의 스타일을 미리 저장해 두면 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경된다. 이로 인해 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축시킬 수 있다. 글자의 크기, 글자체, 줄 간격 등을 자유롭게 선택하거나 변경할 수 있으며 유지보수도 간편하게 할 수 있다.
<그림 2> CSS 적용 결과
지금까지 간단한 HTML 태그와 CSS를 이용해 웹페이지를 만들어 봤다. 건물로 비유하면 기둥을 몇 개 세우고 색이 들어간 벽지 정도를 붙인 것이라 생각하면 이해가 쉬울 것이다.
앞으로 자바스크립트란 도구를 통해 벽지 색도 바꾸고 다양한 기둥과 벽도 세우며 건물의 구조를 바꿔보자.
자바스크립트 프로그래밍을 위한 SW
기본 텍스트 편집기인 윈도우 ‘메모장’으로 예제를 실습해 봤다. 예제처럼 간단한 코드면 메모장과 같은 편집기로도 충분히 개발할 수 있지만 코드가 수백 줄일 땐 상당히 어려워진다. 좀더 쉽고 편리한 개발을 위해 소프트웨어 몇 개를 소개한다.
● Notepad++
자바스크립트와 HTML 코드의 문법을 구분하고, 매크로를 저장하거나 저장된 매크로에 키보드 단축키를 지정할 수 있다(http://notepad-plus-plus.org/).
● Ultraedit
깔끔한 배치, 강력한 프로젝트, 워크스페이스 기능이 있어 복잡하고 정교한 소프트웨어 개발 프로젝트를 처리할 수 있다. 다중 계정 설정과 자동 로그온 및 저장으로 FTP 서버에 FTP 클라이언트 접근 구성(32비트만 지원), SFTP(SSH2) 등을 지원한다(http://www.ultraedit.com/).
● Adobe Edge Animate
HTML5, CSS3, 자바스크립트를 기반으로 인터렉티브 콘텐츠 및 애니메이션을 제작하는 툴이다. 텍스트 에디터에서 HTML, CSS, 자바스크립트를 일일이 손으로 코딩해야 하는 지루한 작업을 대부분 위지윅으로 구현했다(http://html.adobe.com/ edge/).
● JSFIDDLE
웹의 프론트 엔드 기술인 HTML, CSS, 자바스크립트를 웹에서 작성해 바로 테스트해볼 수 있고 그 소스를 저장·공유할 수 있는 서비스다. 제이쿼리, Mootool 등 다수의 라이브러리를 버전별로 적용해 테스트할 수 있다(http://jsfiddle.net/).
HTML에 스크립트 내장하기, 외부 자바스크립트 파일 추가하기
자바스크립트를 브라우저에서 실행하는 데는 두 가지 방법이 있다. 첫 번째 방법은 HTML 내부에 스크립트 요소를 포함시키는 것이고, 두 번째 방법은 src 속성을 이용해 외부 자바스크립트 파일(.js )을 참조하는 것이다. 이번 시간에 두 가지 방법을 모두 살펴본다.
기술적으로 스크립트는 문서 어디에 포함시키든 문제가 없다. 보편적으로 <head> 태그 사이나 <body> 태그의 마지막에 포함시키는데 두 방법엔 큰 차이점이 있다.
브라우저는 HTML 태그를 위에서부터 순서대로 읽어가며 렌더링하는데, 도중에 <script>를 만나면 렌더링을 일단 중지하고 <script> 파일을 읽은 뒤 다시 렌더링을 시작한다. 그래서 <head> 태그 사이에 <script>를 포함시키면 화면 표시 지연 현상이 발생할 수도 있다. <body> 태그의 마지막에 <script>를 포함시킨다면 화면을 다 표시한 후 스크립트를 로딩하기 때문에 지연 현상을 예방할 수 있다. 이 밖에도 DOM 접근 문제가 있지만 <script>를 반드시 <body> 태그의 마지막에 놓아야 하는 것은 아니다. 페이지 로드 시 동적으로 웹페이지의 콘텐츠를 생성하는 경우에는 <body> 태그 안에 위치시키는 것이 좋고, 함수 안에서 정의하고 페이지 이벤트에 사용되는 자바스크립트 코드는 <head> 태그 안에 위치시키는 것이 좋다.
자바스크립트 디버깅
‘삽질’에 대해 이야기해보자. 여기서 말하는 삽질은 공사장의 삽질이 아니다. 수많은 시행착오를 겪는 일련의 활동들을 프로그래머들 사이에서 삽질이라 부른다. 프로그래머라면 가장 많이 듣는 단어 중 하나가 아닐까 한다. 수많은 에러와 버그를 해결하며 다양한 솔루션들을 얻을 수 있기에 삽질이 마냥 나쁘다곤 볼 수 없다. 이런 삽질의 시간을 단축시킬 수 있다면 얼마나 좋을까? 그 삽질의 시간을 획기적으로 줄일 수 있는 일종의 마법 같은 ‘삽’을 소개한다. 지금부터 소개할 디버깅 기술은 반드시 숙지하고 프로그래밍을 시작하자.
IE8 버전 이후 나온 익스플로러 개발자 도구
자바스크립트의 에러를 표시해주며 DOM 셀렉터, CSS 선택 수정, 중단 점 등을 삽입할 수 있는 디버깅 도구다. 익스플로러 개발자 도구는 디버깅과 콘솔창 추가로 개발환경이 무척 편리해졌다.
실행 방법은 간단하다. 개발 완료한 페이지를 실행시킨 후 F12 키를 누르면 개발자 도구 창이 뜬다. 스크립트 항목 탭으로 이동해 디버깅 시작 버튼을 클릭한다.
<그림 3> 익스플로러 개발자 도구 디버깅
페이지 새로고침을 하면 자바스크립트 에러가 발생한 부분에서 실행이 일시 정지되고 어느 부분에서 오류가 발생했는지 정보가 출력된다.
<그림 4>에는 오타(Alert → alet)로 발생한 자바스크립트 에러가 표시돼 있다. 그 외에 추가적으로 보고 싶은 변수 값도 볼 수 있는데 디버깅 중에 해당 변수를 드래그하고 오른쪽 버튼을 클릭한 후 조사식 추가를 해주면, 우측 조사식 탭에 해당 변수가 들어가 값의 변화를 볼 수 있다.
<그림 4> 자바스크립트 에러 표시
크롬 개발자 도구
크롬 개발자 도구 역시 F12 키를 통해 활성화한다. 콘솔 버튼을 클릭하면 해당 에러 내역이 표시되며, 표시된 곳을 클릭하면 에러 위치와 함께 간략한 설명을 보여준다.
<그림 5> 자바스크립트 에러 표시
<그림 6> 에러 위치의 간단한 설명
크롬 개발자 도구의 각 메뉴를 간단하게 소개하면 다음과 같다.
- Elements : HTML, CSS에 대한 정보를 확인할 수 있다.
- Resources : 프레임 내부의 리소스(스크립트, 이미지)를 확인할 수 있고, 브라우저 캐시에 대한 정보를 얻을 수 있다.
- Network : 통신, 스트리밍에 대한 정보를 볼 수 있다.
- Sources : 자바스크립트 디버깅을 할 수 있다.
- Timeline : 메모리에 대한 정보를 확인할 수 있다.
- Profiles : 자바스크립트 프로파일 정보를 확인할 수 있다.
- Audits : 웹페이지 퍼포먼스를 측정할 수 있다.
- Console : 자바스크립트 콘솔창이다
자바스크립트 어휘구조
자바스크립트는 대소문자를 구분하는 언어다. 하지만 HTML은 대소문자를 구별하지 않는다.
- alert(“경고”)와 Alert(“경고”) : Alert는 대문자로 인해 동작하지 않는다.
- var name = “정영태”; var Name = “정영태” : 전혀 다른 변수다.
- HTML의 onclick 이벤트 처리기 어트리뷰트 : 자바스크립트에서는 onclick으로 써야 하지만 HTML로는 때때로 onClick으로 써도 무방하다.
공백과 줄 나눔에서 자바스크립트는 프로그램 내 토큰 사이에 존재하는 스페이스나 탭, 줄 바꿈 등을 무시한다. 또한 스페이스나 탭, 줄 바꿈 프로그램 어디에서도 자유롭게 사용할 수 있다.
세미콜론(;)은 각 문장을 구분하는 역할을 한다. 문장들이 서로 다른 줄에 나타나는 경우 세미콜론을 생략할 수 있지만 좋은 프로그래밍 습관은 아니니 반드시 세미콜론을 붙이는 습관을 들이자.
주석끼리는 서로 중첩되지 못한다. /* */의 주석은 정규 표현식 리터럴에서도 나타날 수 있다. 가능하면 /* */를 사용하는 대신 //를 사용할 것을 권장한다.
식별자는 간단히 말해서 이름이다. 자바스크립트에서 식별자는 변수나 함수에 이름을 붙이거나 자바스크립트 코드 내 루프 문에 레이블을 붙이는 데 사용된다. 첫 문자는 알파벳(letter), 밑줄(_) 혹은 달러($) 표시여야 한다.
C나 자바와 같이 int, string, if 등을 변수로 사용하지 못하는데 그 이유는 자바스크립트에서도 예약어들이 존재하기 때문이다.
자바스크립트의 변수
자바스크립트의 변수(Variable)는 var라는 키워드를 사용해 선언한다. 간단하게 숫자나 문자 배열 등을 담을 수 있는 상자라 생각하면 된다. 이 변수라는 것은 메모리상에 저장돼 있어 프로그래머가 필요할 때 불러내 컨트롤할 수 있다. 변수에 담긴 값들은 특별히 정수와 실수를 구별하지 않고 단지 숫자라는 타입을 가질 뿐이며 숫자는 실수로 처리된다. 웹브라우저가 닫힐 때 변수는 소멸된다.
참고로 자바스크립트의 숫자에는 특수한 값들이 있다. 사용 가능한 최대의 숫자를 넘는 값으로 무한을 의미하는 Infinity, 수학 연산의 결과가 숫자가 아닌 특수한 값을 의미하는 NaN이 그것이다.
자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다. null은 다른 모든 값들과 구분되는 고유한 값이다. 어떤 변수가 null 값을 가지면 그 변수가 유효한 객체나 배열, 숫자, 문자열, 또는 불리언 값을 담고 있지 않다는 것을 알 수 있다. null은 불리언 문맥에서 사용되면 false, 숫자 문맥에서는 0, 문자열 문맥에서는 “null”로 변환된다.
undefined는 선언은 됐지만 값이 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값이다. null과 undefined 값은 서로 구별되는 값이지만 동등 연산자(==)는 같은 것으로 간주한다. undefined는 불리언 문맥에서 상용되면 false, 숫자 문맥에서는 NaN, 문자열 문맥에서는 “undefined”로 변환된다.
배열은 여러 데이터들을 저장할 수 있는 데이터 타입이다.
단순한 데이터 타입인 숫자, 문자열, 불리언(true/false), null, undefined를 제외한 다른 값들은 모두 객체(Object)라 보면 된다. 숫자와 문자열, 불리언은 메소드가 있기 때문에 유사 객체라 할 수 있지만, 값이 정해지면 변경할 수 없다. 자바스크립트에서 객체를 생성할 때는 <리스트 9>와 같은 방법을 이용한다.
객체에서 프로퍼티(혹은 멤버 함수, 필드)들에 대한 접근은 일반적인 멤버 호출 연산자인 마침표(.) 외에도 연관 배열인 associative array와 같이 호출할 수 있다.
이벤트와 이벤트 처리
100일 이벤트, 크리스마스 이벤트 등 남자들이면 이벤트란 단어를 무척이나 싫어하지 않을까. 필자는 그랬다. 하지만 자바스크립트에서의 이벤트는 반가운 존재다. 이벤트를 통해 HTML 엘리먼트들을 컨트롤해 좀더 역동적인 웹페이지를 만들 수 있기 때문이다. 자바스크립트에서 이벤트는 사용자가 무언가를 클릭하거나 특정 요소 위로 마우스를 가져가거나 하는 일련의 행동 등을 말한다. 또한 이벤트는 브라우저에 의해서도 일어날 수 있는데 웹페이지의 로딩이 끝났다거나, 사용자가 페이지를 스크롤하거나, 브라우저 창의 크기를 조절하는 것 등도 여기에 포함된다. 자바스크립트를 통해 다양한 HTML 엘리먼트들을 컨트롤할 수 있기 때문에 앞서 웹을 만들기 위해 필요한 도구 중 하나가 자바스크립트라 했던 것이다. 이제 이 이벤트를 통해 어떻게 HTML 엘리먼트들을 컨트롤하는지 알아보자.
이벤트와 관련된 다양한 예제들은 홈페이지(http://w3 schools.com/js/default.asp)를 참고해 코딩해 보길 바란다(<표 3> 참조).
이벤트 사용 방법
HTML을 속성 형태로 사용하는 방식은 onclick과 같이 태그의 속성 형태로 정의해 사용하는 것이다. goHomepage()는 프로그래머가 직접 구현해 놓은 함수며, 버튼이 클릭되면 해당 함수를 실행하겠다는 의미다. 일반적으로 이벤트 핸들러는 이벤트 명 앞에 단순히 on을 붙이면 된다. 즉, Click 이벤트를 잡아내고 싶을 때 onClick이라고 하면 Click 이벤트 핸들러가 되는 것이다. 이 방법은 마크업 코드와 스크립팅 코드가 여러 곳에 섞여 있어 유지보수 측면에서 효율성이 떨어지며, 외부 자바스크립트 파일을 사용할 때 웹브라우저의 캐시 기능을 전혀 사용할 수 없다. 되도록이면 다음에 나오는 방법을 이용해 코딩하는 습관을 들이자.
이벤트 리스너 방식의 이벤트 핸들링은 <리스트 11>의 예제와 같은 의미며, 마크업 코드와 스크립팅 코드 부분을 분리해 유지보수를 좀더 간편하게 할 수 있다. 더불어 자바스크립트가 활성화되지 않았더라도 링크는 완벽하게 동작하므로 접근성을 높일 수 있다.
<그림 7>을 참고해 예제를 테스트해보자. 빠른 테스트를 위해 jsfiddle을 이용하고 에러 발생 시 개발자 도구를 통해 디버깅해 본다.
<그림 7> 이벤트 페이지 예제 테스트 결과(http://jsfiddle.net/39cDH/)
form과 form elements
브라우저에서 사용자로부터 데이터를 입력받고 서버로 전달해 처리하기 위한 객체다. 이 객체는 HTML 문서 안에서 <form> </form> 태그로 사용되며 name은 form의 이름을 의미해 주로 자바스크립트 안에서 사용된다. action은 사용자가 입력한 데이터를 어디에 전송하고 처리할지 나타내는 URL이고 enctype는 데이터 전송 시 암호화 방식을, 그리고 method는 데이터 전송 방법을 의미한다. 자바스크립트에서 form 객체는 문서 안에 있는 모든 form의 정보를 갖고 있으며, 이들 정보를 배열 형태로 저장하고 있다. 또한 form 객체에서 elements 속성을 사용하면 HTML의 <form> 태그 안에 있는 각각의 입력 요소에도 접근할 수 있다.
이 글을 통해 자바스크립트에 대해 간략히 공부해 봤다. 여기까지 산수에 해당하는 부분을 이해했다고 보면 된다. 아직 방정식, 삼각함수 등에 해당하는 조금은 어려운(?) 부분들이 남아 있지만 벌써부터 걱정할 필요는 없다. 앞으로의 연재를 통해 자연스럽게 이해해 나가도록 하자. 이번 시간에는 딱딱한 내용이 많아 좀 지루했을 수도 있다. 그러나 제목에서도 느껴지듯이 다음 시간부터는 영화 ‘어벤져스’보다 더 재밌어질 것이다. 어벤져스에 나온 캐릭터들을 이해하고 영화를 보면 재미가 배가 되는 것처럼 말이다. 이와 마찬가지로 이번 시간의 내용을 완벽히 이해하면 다음 시간에 진행될 이야기들이 훨씬 재미있을 테니 복습을 통해 완벽히 이해하고 다음 시간에 진행될 강좌를 이어나가도록 하자.
/필/자/소/개/
정영태 ｜ rookieangel77@gmail.com
자바카페 운영진으로서 프론트 엔드 기술에 관심이 많다. 현재 팍스넷에서 근무하고 있으며 ‘프로그래밍을 애인처럼’이란 신념으로 열심히 공부 중이다.
※ 본 내용은 (주)마소인터렉티브(http://www.imaso.co.kr/)의 저작권 동의에 의해 공유되고 있습니다.
Copyright ⓒ Maso Interactive Corp. 무단전재 및 재배포 금지
| 번호 | 제목 | 작성 | 조회수 |
|---|---|---|---|
| 9 | [IT열쇳말] 노드JS | 2016-06-23 | 2049 |
| 8 | [CMS] 기업에서 워드프레스를 이용하려면 | 2016-06-23 | 2118 |
| 7 | [IT열쇳말] 아파치소프트웨어재단 | 2016-06-10 | 2191 |
| 6 | [IT열쇳말] MOOC | 2015-08-28 | 1638 |
| 5 | [CMS] 3대 공개SW CMS 비교 | 2015-06-19 | 1758 |
| 4 | [IT열쇳말] 시빅해킹 | 2015-06-16 | 1927 |
| 3 | [자바스크립트] 덧셈 뺄셈보다 쉬운 자바스크립트 1 | 2013-05-07 | 1808 |
| 2 | [정보통신단체표준] 공개소프트웨어 분류체계 및 프로파일 file | 2012-01-03 | 1476 |
| 1 | 솔루션발굴(Pengrix-Standard-Edition) file | 2011-06-24 | 1295 |
0개 댓글