Javascript 개발 노트

Javascript로 개발하면서 자주 사용하는 내용을 정리했다.

이벤트

마우스 관련 :

이벤트 핸들러 설명
onmouseenter 포인터가 한 요소로 이동될 때 발생
onmouseleave 포인터가 요소의 바깥으로 나갈 때 발생
onmousemove 요소 위에서 포인터가 움직일 때
onmousedown 요소에서 마우스 버튼을 눌렀을 때 발생
onmouseup 요소위에서 마우스 버튼을 눌렀을 때 발생(release)

자주 사용하는 이벤트 메소드 :

이벤트 핸들러 설명
e.preventDefault() 기본 기능이 동작하는 걸 막는다.
e.stopPropagation() 부모 노드 방향으로 이벤트가 전파되지 않도록 한다.

배열

map

template (ES6)

유용한 객체

ES6 Generator 예제

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수다.

파일 업로드 처리 하는데, 동시에 처리하는 파일의 갯수를 제한할 필요가 있었다. while과 setInterval 조합으로 처리하려다가 좀 더 세련되고, 최근 기술을 사용하고 싶어서 Generator를 사용했다.

1번 예제는 써도 괜찮지만 2번 예제는 보완이 필요해 보인다.

비동기 함수를 순차적으로 실행하는 예제

다음은 Generator를 사용해서 비동기 함수를 순차적으로 실행하는 간단한 코드다.

동시에 10개씩 처리하는 예제

이번에는 10개씩 동시 처리하는 예제다.

서브라임텍스트에서 자바스크립트 파일 ES6 Syntax Highlight 설정하기

프로젝트를 진행할 때 자바스크립트를 사용하는데, 오래된 프로젝트는 ES3, ES5를 사용하고, webpack을 사용한 이후에는 ES6만 사용한다. 프로젝트에 따라 문법을 다르게 써야할 필요가 있는데, 서브라임에서는 기본적으로 한 확장자에 하나의 언어만 지원한다. 물론 변경할 수도 있지만 파일마다 변경해야해서 귀찮다. 그래서 찾은 플러그인이 sublime-project-specific-syntax이다.

이 플러그인을 사용하면, 프로젝트마다 syntax를 설정할 수 있다.

방법은 플러그인 설치 후 프로젝트에서 다음과 같이 설정하면 된다.

Project – Edit Project

자바스크립트 DOM

Dom 이란?

Document Object Model의 약자로 HTML을 제어 할 수 있는 API의 역할을 한다.

DOM의 처리 순서

  • 제어 대상 탐색
  • 제어 대상 메소드 실행 및 이벤트 핸들러 등록

Dom Method

  • createElement : HTML 요소를 생성
  • appendChild : 자식에 요소를 추가
  • getAttribute : 속성을 가져옴
  • setAttribute : 속성을 넣음
  • getElementById : ID속성으로 요소를 가져옴
  • getElementsByName : NAME속성으로 요소를 가져옴(배열)
  • getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)

이러한 Dom 메소드를 어떻게 사용하는지 알아볼 것이다.

HTML

Javascript

jQuery 에서는?

Manipulation – 조작

  • append : 자식요소를 가장 뒤에 추가한다.
  • prepend : 자식요소를 가장 앞에 추가한다.
  • after : 형제요소를 뒤에 추가한다.
  • before : 형제 요소를 앞에 추가한다.
  • attr : 속성을 가져오거나 지정할 수 있다.(get/set)
  • html : 선택된 요소 안에 HTML을 가져오거나 지정할 수 있다.(get/set)
  • text : 선택된 요소 안에 텍스트만 가져오거나 지정할 수 있다.(get/set)
  • val : 선택된 요소의 value 값을 가져오거나 지정할 수 있다.(get/set)
  • css: 선택된 요소의 css 값을 가져오거나 지정할 수 있다.(get/set)
  • remove : 선택된 요소를 삭제한다.

Traversing – 탐색

  • find : 선택된 요소 아래에 있는 요소를 검색해서 선택한다.
  • next : 선택된 요소 다음 요소를 선택한다.
  • prev : 선택된 요소 이전 요소를 선택한다.
  • parent : 선택된 요소의 부모 요소를 선택한다.
  • children : 선택된 요소의 자식 요소를 선택한다.

 

자바스크립트 개발환경 구축과 디버깅

준비물

  • 텍스트 에디터 – 이클립스, 에디트 플러스, 메모장 등 자신에게 가장 편한 텍스트 에디터
  • 파이어폭스, 파이어버그 플러그인 이 문서의 내용을 따라가기 위해서는 반드시 파이어폭스와 파이어버그 플러그인을 설치해야 한다.

파이어폭스, 파이어버그 설치하기

  • 모질라 파이어폭스 사이트에서 다운로드 받는다.
  • 다운로드 받은 파일을 실행해서 설치한다.
  • 파이어폭스 프로그램을 실행한다.
  • 메뉴에서 [도구] – [부가기능]을 선택한다.
  • [전체검색] 탭을 선택하고, Firebug 를 검색해서 설치한다.
  • 파이어폭스를 닫고 다시 시작한다.

Hello World!

이제 텍스트 에디터를 이용해서 helloworld.html 파일을 생성하고, 아래 코드를 입력하고 저장한다.

helloworld.html 파일을 파이어폭스에서 불러온다.(탐색기에서 파이어폭스로 드래그)

  • 파이어폭스 우측 하단에 벌레 아이콘을 클릭해서 파이어버그를 실행한다.
  • 콘솔 탭의 화살표를 눌러 Enable 상태로 바꾼다.
  • 새로고침을 하게 되면 콘솔창에 Hello World!라고 출력된다.

지금까지 파이어버그의 콘솔창을 이용해서 Hello World를 출력했다. 여기서 중요한 것은 console.log를 이용한 디버깅인데, 위의 예제는 String 값을 출력하는 것이지만 Object나 Array를 넣게 되면 안에 들어가는 내용이 무엇인지 보기 좋게 나오게 된다.

이러한 디버깅 방법은 Opera의 기본 디버거인 잠자리나 크롬의 개발자도구에서 별도의 플러그인 없이 지원하며, IE8 개발자도구에서도 String까지는 지원한다. 게다가 모바일 사파리에서도 디버그 설정을 활성화 시키면 console.log를 사용해서 디버깅할 수 있다.

자바스크립트로 모달창 만들기

자바스크립트로 모달창을 만들려고 한다.

모달창은 보통 배경은 어둡게 되고, 팝업 레이어가 뜨는 형태로 많이 사용있는데, 모달창을 만들기 위해서 모달창에 어떤 기능을 넣을지 기능정의를 해야한다.

  • 보여주기
  • 감추기
  • 배경 어둡게 하는 레이어 생성
  • 가운데 보여주기

간단하게 기능정의를 해봤는데, 이정도 기능을 가진 모달창을 어떻게 만드는지 알아보겠다.

먼저 HTML과 CSS를 정의한다.

HTML

CSS

버튼이 하나가 있고, 감춰진 레이어(모달창)가 있다. 버튼을 누르면 감춰진 레이어가 모달창으로 나타나고, 확인 버튼이나 닫기 버튼을 누른다는 것이 예상되는 HTML이다.

Javascript

자바스크립트를 살펴보면, 3가지 액션을 한다.

  • 모달창 인스턴트 생성
  • 모달 창 여는 버튼에 이벤트 걸기
  • 모달 창 안에 있는 확인 버튼에 이벤트 걸기

Example.Modal.js

이 메소드들이 어떤 일을 하는지 알아봐야겠다.

Initialize

인스턴트를 생성했을 때 초기화를 시켜주는 생성자다. 인스턴트 생성되었을 때 하는 모든일은 여기서 정의한다. getLayerSize(), getBodySize(), addElement(), addEvent() 메소드를 실행한다.

getHashData

다음과 같은 부분이 있는데, getHashData 메소드를 실행시키고 그 반환값을 멤버변수인 this.hash에 집어넣는다는 의미다. 이 메소드는 자바스크립트 인스턴트의 기본(default)값을 정의하는 역할을 한다.

addElement

추가 엘리먼트를 생성한다. 모달창 div 나 버튼 같은 요소들은 Javascript로 처리되기 전에 있어도 상관 없지만, 백그라운드 레이어 같은 경우는 모달창이 뜰때만 필요한 부분일 수도 있기 때문에 동적으로 생성되는게 더 효율적이라고 생각한다.

addEvent

모듈에 관련된 요소들에 이벤트를 걸어준다. 여기서는 모달창 모듈의 닫기 버튼에 클릭이벤트를 걸었다.

show

가장 중요한 보여주기 기능이다. 콘텐츠 레이어를 가운데로 옮기고, 배경레이어 사이즈 조정 후 콘텐츠와 배경레이어를 보여준다.

hide

감추는 기능이다. 모달창과 배경레이어를 감추는 내용이다.

getLayerSize

콘텐츠 레이어의 너비와 높이를 구하는 메소드다. 가운데 정렬하기 위해서 필요한 수치이기 때문에 이 메소드를 따로 두게 되었다.

getBodySize

body의 너비와 높이를 구하는 메소드다. 이 메소드 역시 가운데 정렬을 하기 위해 필요하다.

addOverlay

단순히 배경 레이어를 생성하고, css를 in-line으로 정의되어서 독립적으로 쓸 수 있다.

moveCenter

위 메소드를 실행시켜 구한 수치들을 이용해서 계산을 하는 메소드다. 마지막에는 css의 top, left 의 수치를 변화시켜서 가운데 정렬을 하게된다.

applyOverlay

배경 레이어의 사이즈를 body의 사이즈에 따라서 변화한다. 이 메소드는 resize를 할 때 body의 사이즈가 달라졌을 경우 실행하도록 하면 항상 body를 덮는 배경레이어를 만들 수 있다.

Javascript 이벤트

이벤트란?

웹페이지에서 사용자가 클릭을 하거나 키보드 입력과 같은 상호작용을 하게 되는데, 클릭이나 키 입력과 같이 발생하는 것을 이벤트라고 한다. 창 사이즈를 조절하거나 스크롤을 내리거나 올릴 때에도 이벤트는 발생하고, 이벤트가 발생했을 때 실행되는 메소드를 이벤트 핸들러라고 한다.

IE에서 이벤트 추가하기

표준 브라우저에서 이벤트 추가하기

이벤트 추가하는 함수

IE와 표준브라우저에서 사용할 수 있는 함수를 만들겠다.

IE와 표준 브라우저의 이벤트에 대한 차이점

  • 이벤트를 등록, 해제하는 메소드가 다르다.
    • IE : attachEvent, detachEvent
    • 표준 브라우저 : addEventListener, removeEventListener
  • 이벤트 지정 문자열이 다르다. IE의 경우는 앞에 on이 붙음.
  • 이벤트 객체를 받는 방법이 다르다.
    • IE : window.event 객체로 전달 받음.
    • 표준 브라우저 : callback 함수에서 인자로 전달 받음.
  • 기본 이벤트의 실행 방지 방법이 다르다.
    • IE : return 값에 의해서 결정된다.
    • 표준 브라우저 : preventDefault 메소드를 사용해서 결정한다.

자주 사용하는 이벤트 리스트

  • click : 마우스 클릭
  • mouseover : 마우스 오버
  • mouseout : 마우스 아웃
  • change : 셀렉트박스의 값이 달라졌을 때
  • scroll : 스크롤 되었을 때
  • resize : 사이즈가 변경 되었을 때
  • keyup : 키가 눌린 후 뗄 때
  • focus : 포커스
  • blur : 포커스 해제 되었을 때

캡쳐와 버블링

이벤트는 최상위 엘리먼트로부터 이벤트가 발생한 엘리먼트까지 찾아 들어간 후 다시 최상위 요소까지 올라가며 이벤트를 발생한다. 여기서 이벤트가 발생한 엘리먼트까지 들어가는 과정을 이벤트 캡쳐라 하고, 최상위 요소까지 다시 올라가는 과정을 이벤트 버블링이라고 한다.

예제

지금까지 얘기한 이벤트를 실제 사용한 예제를 만들겠다.

HTML

CSS

Javascript

 

 

자바스크립트로 OOP 구현하기

자바스크립트로 OOP 스타일의 개발을 위해 필요한 개념에 관해 알아보려고 한다.

데이터 타입

  • 객체(Object) : 예) {name: “정기철”, age: 30}
  • 배열(Array) : 예) [1,2,3]
  • 문자열(String) : 예) “abc123”
  • 숫자(int,float) : 예) 1
  • Boolean : 예) true , false

JSON

경량의 데이터 교환방식으로 자바스크립트에서는 객체에 속한다.

JSON에 대한 자세한 내용은 다음 링크를 참고한다. JSON의 개요

객체지향 프로그래밍(OOP)

OOP는 대상을 객체로 정하고 이를 다루는 개념이다. 자바스크립트가 OOP를 기본적으로 지원하지 않지만 OOP처럼 개발할 수 있다.

주요 용어

  • Class : 다루고자 하는 대상으로 객체라고도 한다. 객체는 Method와 Attribute로 정의된다.
  • Instance : Class에 정의되어 있는 것을 바탕으로 만들어진 활성체를 말하며 개체라고 한다.
  • Method : 메소드, 멤버함수라고도 하면 객체에서 행동을 담당하는 부분이다. 보통 동사+목적어 카멜표기법을 사용한다.
  • Attribute : 속성, 멤버변수라고도 하며 객체의 속성이다.

객체의 특징

  • 추상화 : 객체는 속성과 메소드로 정의한다.
  • 캡슐화(은닉) : 객체는 블랙박스와 같을 수 있다. 안에서 어떻게 처리되는 것은 중요하지 않고, 해당 객체의 인터페이스만을 알면 다룰 수 있다.
  • 상속 : 슈퍼클래스나 부모클래스에 정의되어 있는 내용을 상속 받을 수 있다. 상속도 자바스크립트로 구현 가능하다.

기타 OOP와 관련된 자세한 내용은 관련 서적이나 참고자료가 많이 있으니 그것을 참고하면 될 것 같다.

모듈 개발을 위한 기본 OOP 패턴

이제부터 자바스크립트에서 객체지향 프로그래밍의 형태로 개발할 것이다. 아래 패턴은 모듈이나 페이지를 개발하기 위해 만들었는데, 다른 형태로도 OOP를 구현할 수 있다.

  • Line 1 : Module이라는 네임스페이스를 전역으로 정의한다.
  • Line 3 ~ Line 31 : Template라는 클래스를 정의한다.

Module.Template 클래스에는 3개의 메소드로 구성되어 있다.

  1. initialize : 생성자의 역할을 하고, 실행과 동시에 getHashData와 addEvent 메소드를 실행한다.
  2. getHashData : 생성자를 통해 넘어온 데이터를 처리하고, 변경된 결과를 리턴한다.
  3. addEvent : HTML 개체에 이벤트를 일괄적으로 추가하는 역할을 한다.

실습 예제

이제 위의 패턴을 이용해서 간단한 예제를 만들고, 실행할 것이다.

index.html

data.js

Module.Example.js

 

getElementsByClassName 메소드에 대해서

getElementsByClassName 메소드의 용도

클래스명을 가지고 요소를 선택할 때 사용하는 메소드로 웹킷 전용 메소드다. getElementsByTagName과 같이 선택된 요소의 배열을 리턴해 주는데, 이 메소드를 쓰는 것이 따로 JS 라이브러리로 구현하거나 XPATH를 사용하는 것보다 엄청나게 빠르다.

지원되지 않는 브라우저에서 대체하는 방법

IE9에서는 지원하는 반면에 IE 6,7,8은 지원하지 않기 때문에 getElementsByTagName 함수를 직접 만들어한다.