[JavaScript] 자바스크립트 for 웹 2.0 - 2부 핵심 (4장 ~ 8장)

개요

"자바스크립트 for 웹 2.0"을 학습하며 기억해 둘 만한 항목을 정리해 보았다. 이 책은 자바스크립트에 대하여 기본적인 기술을 소개하고 있고 이 책은 EMCA-262와 JavaScript 1.5/1.6을 기초로 하고 있다.​

저자

셸리 파워즈(Shelley Powers)

소프트웨어 개발자, 사진작가이면서 오라일리에서 여러 권의 책(『Developing ASP Components』,『Unix Power Tools, Third Edition』, 『Essential Blogging』, 『Practical RDF』)을 집필한 작가이다. 1996년 자바스크립트에 관한 첫 저서를 썼고 이듬해인 1997년에 Dynamic HTML(DHTML)에 관한 책을 집필하였다. 또한 크로스 브라우저 개발, 자바스크립트, CSS, XML에 관한 수많은 기사들을 기고하였다. 

 

그녀의 웹사이트 주소는 http://burningbird.net

Burningbird – Burningbird: All human all of the time

 

4장. 자바스크립트 객체 

자바스크립트에 내장된 객체인 Number, String, Boolean, Data, Math와 같은 객체를 소개한다. 그리고 정규표현식으로 패턴을 검사할 수 있는 RegExp 객체도 소개한다. 정규표현식은 폼 필드 값을 검사할 때 반드시 필요하다.

 

01. 객체의 개요

    자바스크립트 내장 객체

    BOM(브라우저 객체 모델) 객체

    DOM(문서 객체 모델) 객체

    사용자 정의 객체

    Math, Date, RegExp 특수용도 객체

    배열: 내장 집합 객체

    자바스크립트의 모든 객체는 배열을 상속하고 있다. 

 

02. 객체 생성자

    자바스크립트 객체는 Object 객체에 기초한다.

    고유 프로퍼티나 메서드를 갖고 있지 않은 유일한 객체는 Boolean 객체다. 

 

03. Number 객체

    Number 객체만의 고유메서드는 변환과 관련된 것들이다.

    toExponential: 소수점 이하의 숫자 개수로 지수표현식

    toPrecision: 유효 숫자

    toFixed: 소수점 이하 자릿수만 남기고 반올림하여 표시 

 

    value.toExponential(3)

    value.toPrecision(3)

    value.toFixed(6) 

 

04. String 객체

    concat  메서드  주로 + 로 사용

    charAt

    indexOf

    lastIndexOf

    split

    slice

    substring, substr

    match, replace, search     

 

05. 정규표현식과 RegExp

    패턴을 형성하는 문자들의 집합으로 문자열 내에서 검색, 대체, 추출 등을 할 때 사용.

    var regExp = /\s\*/g;

    특수문자 +, *

    replace, match, search를 주로 사용.     

 

06. Date와 Math 객체

    Date.now는 현재 날짜와 시각을 반환

    Date.parse는 현재까지 경과된 시간을 밀리 초 단위로 반환 (1970년 1월 1일 12시 이후)

    Date.UTC는 현재까지 경과된 시간을 밀리 초 단위로 반환 (1970년 1월 1일 자정 이후) 

    

    Math.ceil  올림값

    Math.floor 내림값

    Math.round 반올림값

    Math.pow 멱승

    Math.random 난수 

 

07. 배열

    자바스크립트에서 배열이란 String이나 Math와 같이 하나의 객체다.

    자바스크립트 엔진이 리터럴을 Array 타입 객체로 변환한다.

    var newArray = ['one', 'two'];

 

    배열의 원소 개수를 미리 지정해 놓을 필요는 없다. 

    push: 배열 끝에 원소를 추가.

    pop: 배열의 마지막 원소를 제거.

    shift: 첫 번째 원소를 제거.

    unshift: 시작 위치에 원소를 추가.

 

    큐-FIFO(선입선출)

    스택-LIFO(후입선출) 

 

08. 연관 배열 

    var assoArray = new Object();
    assoArray["one"] = 1;
    assoArray["two"] = 2;

 

5장. 함수 

자바스크립트에 내장된 객체 중 하나인 함수를 집중적으로 다룬다. 함수는 자바스크립트 코드를 묶어 놓은 것으로, 재사용이 가능하며, 사용자 정의 객체를 생성하는 데 있어 중요한 역할을 한다. 자바스크립트 함수는 다른 언어의 함수에 비해 상대적으로 간단하지만, 어떤 면에서는 복잡할 수 있다. 이 장에서는 재귀 함수와 함수 클로저를 소개하고, 상세한 사항은 11장에서 다룬다.

 

    실제는 객체다.

    함수를 만들 때는 가급적 크기를 줄이고 (모듈화),

    한 가지 일을 전문적으로 수행하며 (응집도),

    일반적인 형태로 만드는 것이 좋다 (표준화). 

 

01. 함수정의

    선언적 함수는 로드할 때 단 한 번만 파싱 한다. 많은 개발자가 익숙한 방법

    function test() {}

 

    call by value 원형 데이터

    call by reference 객체

 

    익명함수는 매번 호출 시 동적으로 생성 

    var sayHi = new Function("toWhom", "alert('Hi' + toWhom);");

    sayHi("World!);

 

    함수 리터럴: 함수를 생성해 변수에 할당하기 위해서 생성자를 사용할 필요가 없다.

    함수 리터럴은 한 번만 파싱 한다.

    var func = function () {} 

 

02. 콜백 함수

    filter, forEach, every, map, some 이 있다.

    filter 메서드는 특정조건을 만족하지 못하는 원소가 추가되지 않게 한다.

    forEach 메서드는 함수를 인자로 취하고, 이 함수가 각 원소를 처리한다.

    every 메서드는 배열의 모든 원소에 대해 false 값이 반환될 때까지 실행한다.

    map 메소드는 배열의 모든 원소에 대해 콜백함수를 실행하고, 그 결과를 새 배열로 생성한다.

    some 메소드는 every 메서드와 반대로 동작, 배열의 모든 원소에 대해 true 값이 반환될 때까지 

 

03. 재귀 함수

    대부분의 자바스크립트 프로그램에서 재귀 함수를 사용할 일은 거의 없다. 

 

04. 중첩 함수, 클로저, 메모리 누수

    함수를 중첩해서 사용할 때, 안쪽 함수는 바깥쪽 함수의 영역 내에서만 동작

    새로운 영역을 생성할 때마다 이를 둘러싸기 위해 연관 영역 버블이 생성된다.

    함수가 동작하는데 필요한 데이터 영역이 확장되는 것이다.

    // 바깥쪽 함수
    function outerFunc(base) {
        var punc = "!";
        // 안쪽 함수
        function returnString(ext) {
            return base + ext + punc;
        }
        return returnString;
    }

  

05. 객체 함수

    arguments 함수 내에서 인자 개수에 대한 정보

    함수이름.length 

 

6장. 이벤트 처리 

이벤트 핸들링에 중점적으로 다룬다. 예전의 이벤트 핸들링 방법(아직까지 많은 프로그램에서 쓰이고 있다)과 새로운 DOM기반 이벤트 핸들링 방법을 모두 다룬다.

 

01. 이벤트의 개요

    자바스크립트에서의 이벤트는 언어가 아니라 객체와 관련이 있다.

 

02. DOM 레벨 0의 이벤트 핸들러

    최초의 이벤트 시스템은 Events 또는 DOM 레벨 0이라고 불린다.

    이벤트 핸들러의 이름은 'on'으로 시작하며 그 뒤에 이벤트명이 붙는다.

 

    인라인 모델: <body onload="">

    전통적 모델: window.onload = 함수명

    window.onload=helloTwice;

    <body onload="helloMsg( );">

 

    함수를 제거하려면 이벤트 핸들러에 null을 배정한다.

    false를 반환하면 해당 이벤트를 종료시킨다.

    

    IE에서는 Event가 window 객체의 프로퍼티이다.

    fucntion keyDown(e) {

        var theEvent = e ? e : window.event; // 객체 탐지 기법

    }

    

    이벤트 버블링: 하위 --> 상위

    이벤트 캡처: 상위 --> 하위

 

    DOM 레벨 2 이벤트 모델은 특정 이벤트 핸들러 프로퍼티에 의존적이지 않다.

    addEventListener: 리스너 추가 (IE attachEvent)

    removeEventListener: 리스너 제거 (IE detachEvent)

    dispatchEvent: 새로운 이벤트를 신속히 처리

 

    IE에서는 이벤트나 그 이벤트를 받는 객체와 무관하게 this는 window 객체를 참조한다. 

 

7장. 폼과 JiT(Just-in-Time) 검사 

폼과 폼 필드에서 자바스크립트를 사용하는 법을 소개한다. 여기에는 각 필드 타입(텍스트 입력 필드와 드롭다운 리스트와 같은 것들)에 접근하는 방법과 넘겨받은 데이터를 검사하는 것이 포함된다. 웹서버로 폼 데이터가 전송되기 전에 미리 유효성검사를 거치면, 데이터 전송에 따른 부하를 줄여 시간과 자원을 절약할 수 있다.

 

01. 폼과 JiT의 개요

    사용자가 폼 필드에 데이터를 입력하자마자 검사를 하는 '폼 검사'의 의미로 사용

 

02. 폼 접근

    폼은 페이지 엘리먼트 중의 하나로 배열 구조로 저장된다.

    폼은 웹페이지에 나타나는 순서대로 배열에 저장된다.

    document.forms[0]

 

03. 폼에 이벤트를 추가하는 방법

    onsubmit: false를 반환하면 폼 전송이 취소

 

04. select 엘리먼트

    selected, value, text

    opts[i].selected, opts[i].value, opts[i].text

    옵션을 제거할 때에는 해당 옵션의 항목에 null 값을 배정한다. opts[2] = null;

    모든 옵션을 제거하려면 length 프로퍼티를 0으로 설정한다.

 

05. 라디오 버튼과 체크박스

    checked, disable

    라디오 버튼이나 체크박스의 경우엔 옵션을 동적으로 추가/삭제하지 못한다.

 

06. textarea, text, hidden, password

    잘못된 데이터를 입력하기 쉽다.

    change, focus, blur

 

07. input 필드와 JiT 정규표현식

    JiT RegEx Machine이라는 간단한 예제

    정규표현식 파이브러리 (http://regexlib.com/) 

 

8장. 샌드박스, 쿠기, 정보보호 

스크립트 기반 쿠키에 대해 다룬다. 쿠키란 클라이언트 측에 저장되는 조그마한 데이터 조각이다. 쿠키를 사용하면 사용자이름, 암호 등의 정보를 저장할 수 있고, 따라서 매번 정보를 입력해야 하는 수고를 덜어준다. 쿠키에 대해 이야기하다 보면 보안 문제를 짚고 넘어가지 않을 수 없다. 그래서 이 장에서는 자바스크립트 관련 보안 이슈에 대해서도 다룬다.

 

01. 자바스크립트와 안전성

    파일을 열거나 생성하기 위한 메커니즘은 존재하지 않으며, 임시 환경에서 동작한다.

    임시환경: 브라우저 종료, 페이지 나감

    쿠키 미워할 수도 좋아할 수도 없는 애물단지

    크로스 사이트 스크립트 공격 

 

02. 샌드박스

    서명 스크립트는 샌드박스 보안 정책을 무시할 수 있다.

    파일 열기, 생성, 삭제 등의 기능은 지원하지 않는다.

    동일 근원 정책(Same-origin policy):

    한 도메인에서 열린 페이지가 다른 도메인에서 열린 페이지가 접근하는 것을 방지하다.

    document.domain의 사용 

 

03. 쿠키

    '매직 쿠키'에서 이름이 유래, 프로그램끼리 주고받는 토큰.

 

    쿠키 생성: 쿠키명=쿠키값; 파기날짜; 경로

    쿠키명으로 사용한 객체는 모두 문자열로 변환된다.

    쿠키에서 경로가 일치하지 않으면 접근하거나 설정하는 것이 불가능하다. 

    쿠키 삭제: 값을 제거하고 파기 날짜를 과거로 설정. 

 

04. 쿠키의 대안

    플래시 공유 객체(FSO)는 HTTP 쿠키와 유사하게 동작한다.

    Dojo 스토리지 라이브러리. 

 

05. 크로스 사이트 스크립트 (XSS; Cross-Site Script)

    악의적인 코드의 삽입

    SQL 인젝션

    태그 인젝션

 

    사용이 허락되지 않은 HTML 태그는 모두 인코딩 되도록 해야 한다.