#learnjsproperly

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 <<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

객체지향(Object-oriented: OO) 언어는 일반적으로 클래스를 통해 같은 프로퍼티와 메서드를 가지는 객체를 여러 개 만든다는 특징이 있음, ECMAScript에는 클래스라는 개념이 없으며 객체는 다른 클래스 기반 언어와 다름

ECMA-262는 객체를 "프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시 값이나 객체, 함수를 포함한다"라고 정의하며, 특별한 순서가 없는 값의 배열이란 의미

ECMAScript 객체를 해시 테이블이며, 이름-값 쌍의 그룹이며 각 값은 데이터나 함수가 될 수 있다고 생각하면 이해하기 쉬움

모든 객체는 참조 타입을 바탕으로 생성됨

객체에 대한 이해

객체를 만드는 가장 단순한 방법은 Object의 인스턴스를 만들고 여기에 프로퍼티와 메서드를 추가

var person = new Object(); person.name = "Kleini"; person.age = 30; person.job = "Newbie"; person.sayName = function(){ alert(this.name); };

객체 리터럴 패턴이 더 많이 쓰임

var person = { name: "Kleini", age: 30, job: "Newbie", sayName: function(){ alert(this.name); } };

프로퍼티 타입

ECMA-262 5판에서는 프로퍼티의 특징을 내부적으로만 유효한 속성에 따라 설명함, 자바스크립트에서 직접적으로 접근할 수 있는 방법은 없음

프로퍼티에는 데이터 프로퍼티와 접근자 프로퍼티 두 가지 타입이 있음

데이터 프로퍼티

데이터 프로퍼티는 데이터 값에 대한 단 하나의 위치를 포함하여 이 위치에서 값을 읽고 씀 * [[Configurable]] - delete를 통해 삭제하거나, 프로퍼티의 속성을 바꾸거나나, 접근자 프로퍼티로 변환될 수 있음 (기본값: true) * [[Enumerable]] - for-in 루프에서 해당 프로퍼티를 반환 (기본값: true) * [[Writable]] - 값을 바꿀 수 있음 (기본값: true) * [[Value]] - 실제 데이터 값을 포함 (기본값: undefined)

접근자 프로퍼티

접근자 프로퍼티에는 데이터 값이 들어 있지 않고 대신 getter 함수와 setter 함수로 구성됨 * [[Configurable]] * [[Enumerable]] * [[Get]] - 프로퍼티를 읽을 때 호출할 함수 (기본값: undefined) * [[Set]] - 프로퍼티를 바꿀 때 호출할 함수 (기본값: undefined)

접근자 프로퍼티를 명시적으로 정의할 수는 없으며 반드시 Object.defineProperty()를 써야 함

getter와 setter는 꼭 지정해야 하는 것은 아님, getter 함수만 지정하면 해당 프로퍼티는 읽기 전용이 되고 이 프로퍼티를 수정하려는 시도는 모두 무시됨 (스트릭트 모드에서는 에러가 발생), setter 함수만 지정된 프로퍼티를 읽으려 하면 스트릭트 모드가 아닐 때는 undefined를 반환 (스트릭트 모드에서는 에러가 발생)

다중 프로퍼티 정의

객체에서 프로퍼티 여러 개를 동시에 수정해야 할 가능성이 높으므로 ECMAScript 5판에서는 Object.defineProperty() 메서드를 제공, 서술자를 이용해 여러 프로퍼티를 한 번에 정의

프로퍼티 속성 읽기

ECMAScript 5의 Object.getOwnPropertyDescriptor() 메서드를 이용해 원하는 프로퍼티의 서술자 프로퍼티를 읽을 수 있음

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 <<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

변수와 스코프, 메모리

자바스크립트에서 변수는 느슨한 타입을 취하므로 변수는 특정 시간에서 특정 값을 가리키는, 문자 그대로 이름일 뿐, 변수가 가져야 할 데이터 타입에 대한 규칙이 없으므로 변수의 값과 데이터 타입은 스크립트 실행 중에 바뀔 수 있음

원시 값과 참조 값

'원시 값'은 단순한 데이터이며 '참조 값'은 여러 값으로 구성되는 객체를 가르킴 변수에 값을 할당하면 자바스크립트 엔진은 해당 값이 원시 데이터인지 참조인지 판단 원시 타입은 Undefined와 Null, 불리언, 숫자, 문자열 / '값으로' 접근한다고 하며 변수에 저장된 실제 값을 조작함 참조 값은 메모리에 저장된 객체 / 객체를 조작할 때는 사실 객체 자체가 아니라 해당 객체에 대한 '참조'를 조작함, '참조로 접근한다'라고 함

동적 프로퍼티

참조 값을 다룰 때는 언제든 프로퍼티와 메서드를 추가하거나 바꾸고 삭제할 수 있음

var person = new Object(); person.name = "Steve"; alert(person.name); // "Steve"

값 복사

원시 값은 다른 변수로 복사할 때는 현재 저장된 값을 새로 생성한 다음 새로운 변수에 복사함 참조 값은 객체 자체가 아닌 힙에 저장된 객체를 가리키는 포인터를 복사함

var obj1 = new Object(); var obj2 = obj1; obj1.name = "Steve"; alert(obj2.name); // "Steve"

매개변수 전달

ECMAScript의 함수 매개변수는 모두 값으로 전달됨, 매개변수를 값 형태로 넘기면 해당 값은 지역 변수에 복사됨

ECMAScript의 함수 매개변수는 지역 변수와 다를 것이 없음

타입 판별

typeof 연산자는 변수가 원시 타입인지 파악하기에 최상, 특정 변수가 문자열이나 숫자, 불리언, undefined라면 정확한 타입을 알 수 있음 instanceof 연산자는 변수가 주어진 참조 타입의 인스턴스일 때 true를 반환

'result' = 'variable' instanceof 'constructor'

실행 컨텍스트와 스코프 (매우 중요함!)

실행 컨텍스트는 짧게 '컨텍스트'라고 부르며 자바스크립트에서는 매우 중요한 개념 변수나 함수의 실행 컨텍스트는 다른 데이터에 접근할 수 있는지, 어떻게 행동하는지를 규정 각 실행 컨텍스트에는 변수 객체가 연결되어 있으며 해당 컨텍스트에서 정의된 모든 변수와 함수는 이 객체에 존재

함수를 호출하면 독자적인 실행 컨텍스트가 생성되고, 코드 실행이 함수로 들어갈 때마다 함수의 컨텍스트가 컨텍스트 스택에 쌓이고, 함수 실행이 끝나면 해당 컨텍스트를 스택에서 꺼내고 컨트롤을 이전 컨텍스트에 반환

컨텍스트에서 코드를 실행하면 변수 객체에 '스코프 체인'이 만들어짐, 스코프 체인의 목적은 실행 컨텍스트가 접근할 수 있는 모든 변수와 함수에 순서를 정의하는 것, 스코프 체인의 앞쪽은 항상 코드가 실행되는 컨텍스트의 변수 객체, 컨텍스트가 함수라면 '활성화 객체'를 변수 객체로 사용, 활성화 객체는 항상 arguments 변수 단 하나로 시작, 변수 객체의 다음 순서는 해당 컨텍스트를 포함하는 컨텍스트(부모 컨텍스트)이며 그 다음에는 다시 부모의 부모 컨텍스트, 전역 컨텍스트의 변수 객체는 항상 스코프 체인의 마지막에 존재, 식별자를 찾을 때는 스코프 체인 순서를 따라가면서 해당 식별자 이름을 검색 (식별자를 찾을 수 없다면 일반적으로 에러가 발생)

내부 컨텍스트는 스코프 체인을 통해 외부 컨텍스트 전체에 접근할 수 있지만 외부 컨텍스트는 내부 컨텍스트에 대해 전혀 알 수 없음, 컨텍스트 사이의 연결은 선형이며 순서가 중요함

스코프 체인 확장

실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트 두 가지 타입만 있지만(eval()을 호출할 때 생성되는 세 번째 타입이 있음) 스코프 체인을 확장할 수 있는 방법도 있음, 특정 문장은 스코프 체인 앞 부분에 임시로 변수 객체를 만들며 해당 변수 객체는 코드 실행이 끝나면 사라짐 - try-catch 문의 catch 블록, with 문

자바스크립트에는 블록 레벨 스코프가 없음

C와 비슷한 다른 언어에서는 중괄호로 감싼 코드 블록마다 스코프(ECMAScript에서는 실행 컨텍스트라고 부르는)가 생성되므로 조건에 따라 변수를 정의할 수 있음, 하지만 자바스크립트에서는 변수를 선언할 때 해당 변수를 현재 실행 컨텍스트에 추가함

블록 레벨 스코프를 지원하는 언어에서는 for 문의 초기화 부분에서 선언한 변수가 오직 for 문의 컨텍스트 안에서만 존재하지만, 자바스크립트에서는 for 문에서 생성한 변수가 루프 실행이 끝난 후에도 존재

변수 선언

var를 사용해 선언한 변수는 자동으로 가장 가까운 컨텍스트에 추가, 함수 내부에서는 함수의 로컬 컨텍스트가 가장 가까운 컨텍스트이며 with 문 내부에서는 함수 컨텍스트가 가장 가까운 컨텍스트, 변수를 선언하지 않은 채 초기화하면 해당 변수는 자동으로 전역 컨텍스트에 추가

변수를 선언한 다음 초기화를 반드시 할 것! 스트릭트 모드에서는 변수를 선언하지 않고 초기화하려 하면 에러를 냄

식별자 검색

컨텍스트 안에서 식별자를 참조하려 하면 먼저 검색부터 해야 하며, 스코프 체인 앞에서 시작하여 스코프 체인을 따라 전역 컨텍스트에 도달할 때까지 검색 / 전역 컨텍스트에서도 식별자를 찾지 못하면 정의되지 않은 것으로 판단

변수 검색에도 비용이 들어가며 지역 변수는 스코프 체인을 검색할 필요가 없으므로 전역 변수보다 빨리 검색됨, 자바스크립트 엔진에서 식별자 검색을 최적화하고 있으므로 이런 차이가 무시할 정도로 좁혀질 수 있음

가비지 콜렉션

자바스크립트는 실행 환경에서 코드 실행 중에 메모리를 관리하는데 이런 의미에서 가비지 컬렉션 언어라고 불러도 됨, 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하므로 개발자가 직접 메모리를 관리하지 않아도 됨 더 이상 사용하지 않을 변수를 찾아 해당 변수가 차지하고 있는 메모리를 회수, 사용하지 않는 변수를 식별하는 기준은 보통 두 가지 방법을 사용

표시하고 지우기

자바스크립트에서 가장 널리 쓰이는 방법으로, 가비지 컬렉터가 작동하면 메모리에 저장된 변수 전체에 표시를 남기고 컨텍스트에 있는 변수와 컨텍스트에 있는 변수가 참조하는 변수에 표시를 지움, 이 과정을 거치고 표시가 남아있는 변수는 삭제하고 메모리를 회수

참조 카운팅

각 값이 얼마나 많이 참조되었는지 추적, 변수에 참조 카운트를 두고 참조할 때마다 카운트를 늘리고 참조하는 변수가 다른 값을 할당하면 카운트를 줄임, 가비지 컬렉터가 실행할 때 참조 카운트가 0인 값에서 사용하던 메모리를 회수

IE8과 그 이전 버전에서는 객체 중 일부가 네이티브 자바스크립트 객체가 아님, BOM과 DOM의 객체들은 C++의 COM으로 구현되었는데 COM 객체는 가비지 컬렉션에 참조 카운팅 방식을 사용 (순환 참조 문제가 생길 수 있으므로 주의할 것)

성능

가비지 컬렉터는 주기적으로 실행되며 메모리 내에 할당된 변수가 많다면 상당한 비용이 드는 작업이므로 가비지 컬렉션을 실행하는 타이밍이 중요함

메모리 관리

일반적으로 가비지 컬렉션을 지원하는 프로그래밍 환경에서는 개발자가 메모리 관리를 신경쓰지 않아도 되지만, 자바스크립트라는 환경에서는 웹 브라우저에서 사용하기 때문에 가용 메모리가 매우 적음 가능한 한 최소한의 메모리만 사용해야 페이지 성능을 올릴 수 있음, 메모리 사용을 최적화하는 가장 좋은 방법은 코드 실행에 필요한 데이터만 유지하는 것, 필요없어진 데이터에는 null을 할당하여 참조를 제거하는 편이 좋음 변수에서 참조를 제거한다 해서 할당된 메모리가 자동으로 반환되는 것은 아니며 참조 제거의 요점은 값의 컨텍스트를 없애서 다음에 가비지 컬렉션을 실행할 때 해당 메모리를 회수

요약 (이것만 읽어도 됨 ^^)

원시 값과 참조 값

원시 값은 고정된 크기를 가지며 스택 메모리에 저장

원시 값을 한 변수에서 다른 변수로 복사하면 값 자체가 복사

참조 값은 객체이며 힙 메모리에 저장

변수에 참조 값을 저장하면 해당 변수는 객체에 대한 참조만 저장할 뿐 객체 자체를 저장하지는 않음

참조 값을 한 변수에서 다른 변수로 복사하면 해당 객체에 대한 참조만 복사하므로 두 변수는 같은 객체를 참조

typeof 연산자는 값의 원시 타입을 판별하며 instanceof 연산자는 값의 참조 타입을 판별

실행 컨텍스트

실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트가 있음

실행 컨텍스트에 진입할 때마다 스코프 체인이 만들어지며, 스코피 체인은 변수와 함수를 검색할 때 쓰임

함수 컨텍스트는 해당 스코프에 있는 변수, 해당 스코프를 포함하는 컨텍스트에 있는 변수, 전역 컨텍스트에 있는 변수에 모두 접근할 수 있음

전역 컨텍스트는 전역 컨텍스트에 있는 변수와 함수에만 접근할 수 있으며 로컬(함수) 컨텍스트에 있는 데이터에 직접적으로 접근할 수 없음

실행 컨텍스트는 변수에 할당된 메모리를 언제 해제할 수 있는지 판단하는데 도움이 됨

가비지 컬렉션

값이 스코프를 벗어나면 자동으로 표시되고 다음에 가비지 컬렉션을 실행할 때 삭제

주로 쓰이는 가비지 컬렉션 알고리즘은 '표시하고 지우기'라 불리는데, 이 방법은 현재 사용하지 않는 값에 표시를 남겨서 메모리를 회수하는 방법

다른 알고리즘은 참조 카운팅이라 불리는데, 이 방법은 값이 얼마나 많이 참조되었는지 추적하는 방법 / 거의 쓰이지 않지만 IE에서 DOM 요소처럼 네이티브 자바스크립트 객체가 아닌 객체를 접근해야 하기 때문에 쓰임

참조 카운팅 알고리즘에는 순환 참조 문제가 있음

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 <<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

언어의 기초

ECMA-262에서 자바스크립트의 핵심을 ECMAScript라는 가상 언어로 정의

웹 브라우저에서 가장 널리 구현된 ECMAScript 버전은 3판이며, 주요 브라우저(Firefox, Chrome, IE, Opera)는 5판까지 구현

문법

대소문자 구분 (HTML과 다름)

식별자 : 첫 번째 문자는 글자나 밑줄(_), 달러($), 유니코드 문자를 쓸 수 있으나 권장하지 않음, 카멜 케이스(관습)

주석 : 한 줄(//), 여러 줄(/* */)

스트릭트 모드 : ECMAScript 5, "use strict";

문장 : 각 문장은 세미콜론으로 종료, 코드 블럭({ })

키워드와 예약어

키워드와 예약어는 식별자나 프로퍼티 이름에 쓸 수 없음

5판이나 스트릭트 모드에서 다르거나 추가됨 (많으니 명세를 참고)

변수

느슨한 변수 타입 : 변수에 어떤 타입의 데이터라도 저장할 수 있음

var 연산자 다음에 변수 이름을 씀 : var message;

초기화 하지 않으면 undefined가 할당

var 연산자는 변수를 로컬 스코프에서 정의

var 연산자를 생략하면 변수를 전역으로 정의

데이터 타입

Undefined, Null, 불리언, 숫자, 문자열(원시 데이터 타입) + 객체

ECMAScript의 데이터 타입은 동적이므로 한 가지 데이터 타입이 여러 특성을 가질 수 있음

typeof 연산자

데이터 타입을 알아내야 할 때 사용 undefined, boolean, string, number, object, function 중에 하나를 반환

typeof는 연산자이므로 괄호를 쓰지 않아도 됨, typeof null은 "object"를 반환(null이 빈 객체를 참조하는 특별한 값이므로 올바른 결과)

undefined 타입

var를 써서 변수를 정의했지만 초기화하지 않았다면 해당 변수에는 undefined가 할당 초기화되지 않은 변수에 typeof 연산자를 호출하면 "undefined"를 반환, 정의되지 않은 변수에 typeof 연산자를 호출해도 "undefined" 반환. (논리적으로 둘 다 '조작'할 수 없는 상태)

Null 타입

Null 타입의 값은 빈 객체를 가리키는 포인터 null typeof를 호출하면 "object"를 반환 undefined는 null에서 파생했으므로 null == undefined는 true

불리언 타입

ECMAScript에서 가장 많이 쓰이는 데이터 타입, true와 false 두 가지 리터럴 값만 가짐 ECMAScript에서는 모든 타입을 불리언 값으로 표현할 수 있음, Boolean() 함수 - true : true, 비어 있지 않은 문자열, 0이 아닌 숫자, 모든 객체 - false : false, 빈 문자열, 0, NaN, null, undefined

숫자 타입

정수와 부동소수점 숫자를 나타냄 10진법/8진법/16진법 리터럴과 부동소수점/지수표기법 MIN_VALUE ~ MAX_VALUE 숫자를 나타냄 NaN - 의도한 조작이 실패했을 때 반환값 NaN을 포함한 조작은 모두 NaN, NaN은 어떤 값(NaN 포함)과도 일치하지 않음 Number(), parseInt(), parseFloat() 함수로 숫자 변환

문자열 타입

16비트 유니코드 문자의 연속, 큰따옴표(")나 작은따옴표(')로 감싸서 표현 \n, \t, \b, \r, \f ... 등 문자 리터럴 있음 ECMAScript에서 문자열은 불변, 만들어지면 값을 바꿀 수 없음 toString(), String() 함수로 문자열 변환

객체 타입

ECMAScript에서 객체는 데이터와 기능의 집합 new 연산자로 '인스턴스'를 만들고 프로퍼티나 메서드를 추가 ECMAScript의 Object 타입은 모든 객체의 원형 Object 타입의 인스턴스는 Object 타입의 프로퍼티와 메소드를 전부 상속 (5, 6장에서 자세히)

연산자

계산 연산자, 비트 연산자, 관계 연산자, 일치 연산자

책에 상세하게 나와있으며 undefined, NaN, 타입 때문에 훑어볼 필요가 있음

문장

if, do-while, while, for, for-in, label:, break, continue, with, switch (대부분 C, Java에 있는 제어문과 같음)

함수

문장을 캡슐화하여 어디서든, 언제든 실행할 수 있게 하므로 모든 언어의 핵심 ECMAScript에서 함수는 function 키워드로 정의하며 그 뒤에 매개변수와 함수 본문을 순서대로 씀

function functionName(arg0, arg1, ..., argN) { statements }

ECMAScript의 함수는 꼭 값을 반환하지 않아도 됨 모든 함수는 언제든 return 문 뒤에 반환할 값을 써서 값을 반환할 수 있음 함수는 return 문을 만나는 즉시 실행을 멈추고 빠져나옴 return 문 뒤에 반환 값을 쓰지 않으면 undefined 값을 반환

매개변수의 이해

ECMAScript 함수는 매개변수 숫자를 따지지 않고 데이터 타입도 체크하지 않음 지정한 매개변수 이하, 이상 또는 없어도 에러가 나지 않음 ECMAScript의 매개변수는 내부적으로 배열로 표현 매개변수에 이름을 붙여도 함수 시그니처를 검사하지 않고, 유효성 검사도 안함 함수를 정의할 때 함께 정의한 매개변수를 넘기지 않으면 해당 매개변수는 undefined가 할당

오버로딩 없음

ECMAScript 함수에는 다른 언어에서 사용하는 오버로딩이 없음

함수 시그니처가 없고 매개변수는 배열로 표현되기 때문

ECMAScript에서는 같은 이름으로 함수를 여러 번 정의하면 마지막 함수가 해당 이름을 소유함

요약

자바스크립트의 핵심 기능은 ECMA-262에서 ECMAScript라는 이름의 가상 언어로 정의했음 - 기본 데이터 타입은 Undefined와 Null, 불리언, 숫자, 문자열 - 정수와 부동소수점을 구분하지 않고 숫자 데이터 타입 하나만 존재 - 복잡한 데이터 타입은 Object 타입은 자바스크립트의 모든 객체의 기반 - 스트릭트 모드는 자바스크립트에서 에러가 자주 생기는 부분에 몇 가지 제약을 가함 - 산술 연산자, 불리언 연산자, 관계 연산자, 동일(일치) 연산자, 할당 연산자 제공 - 제어문은 다른 언어들과 거의 비슷함 (몇 가지 빼고...)

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 <<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

HTML 속의 자바스크립트

초기 자바스크립트는 HTML에 포함, 현재는 HTML 명세에서 공식적으로 문서화

<script> 요소

<script>의 여섯 가지 속성 - async (옵션) : 스크립트를 즉시 내려받지만 자원을 받거나 다른 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안된다고 지시 (외부 스크립트 파일을 불러올 때만 유효) - charset (옵션) : src 속성으로 명시한 코드의 문자셋을 지정 (브라우저에서 대게 이 속성을 무시하기 때문에 잘 안씀) - defer (옵션) : 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타냄 (외부 스크립트 파일을 불러올 때만 유효함) - language (폐기) : 스크립트 언어를 나타낼 목적이었으나 대부분의 브라우저에서 무시하기 때문에 안씀 - src (옵션) : 실행할 코드를 포함한 외부 파일의 위치를 지정 - type (옵션) : 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정 ("text/javascript"는 구식이지만 호환성을 위해서나 생략했을 때 기본 값이기 때문에 많이 쓰임 / "application/javascript"와 "application/ecmascript"는 IE를 제외한 브라우저에서 인식)

<script> 요소 안에 직접 작성한 자바스크립트는 인라인 자바스크립트 코드라 부르며 위에서부터 차례로 해석되며 </script>는 닫는 태그로 인식되기 때문에 사용할 수 없음

자바스크립트를 외부 파일에서 불러오려면 src 속성을 사용해야 함, src 속성 값에는 다음과 같이 자바스크립트 코드를 포함한 파일의 URL을 지정

<script type="text/javascript" src="example.js"></script>

외부 파일(.js)는 오직 자바스크립트 코드만 들어가며 <script>, </script> 태그를 쓰면 안됨

중요 : <script>와 </script> 태그 사이에 스크립트 코드가 있고 src 속성도 사용했다면 스크립트 파일을 내려받아 실행하며 인라인 코드는 무시

src 속성으로 도메인 외부에 있는 스크립트도 사용할 수 있으나 직접 제어할 수 없기 때문에 직접 관리하는 도메인이나 신뢰할 수 있는 곳에서 관리하는 도메인의 파일만 이용해야 함

태그 위치

전통적으로 <script> 요소는 페이지의 <head> 요소 안에 쓰는 것이 일반적이었으나 페이지 렌더링 문제 때문에 최신 웹 애플리케이션에서는 일반적으로 <body> 요소 안에, 페이지 콘텐츠 마지막에 씀

스크립트 처리 지연 (defer)

defer 속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것으로 페이지 전체를 파싱한 후에 스크립트를 실행해도 상관없다는 의미, 브라우저는 해당 요소를 만나는 즉시 코드를 내려받지만 실행은 지연

비동기 스크립트 (async)

defer 속성과 비슷하나 외부 스크립트에만 적용되며 브라우저에게 파일을 즉시 내려받으라고 지시함, async 속성과 defer 속성의 다른 점은 스크립트가 마크업 순서대로 실행된다는 보장이 없다는 점

XHTML에서 바뀐 점

< 기호를 태그의 시작으로 간주하기 때문에 < 기호 다음에 공백이 올 수 없음 1) < 기호를 <로 바꾸거나, 2) CDATA 섹션으로 코드를 감싸서 해결

구식 문법

자바스크립트를 지원하지 않는 브라우저를 위해 스크립트 코드를 HTML 주석으로 감싸는 방법을 사용 (자바스크립트를 지원하는 브라우저는 패턴을 인식해서 정상적으로 파싱하여 동작)

<script><!-- fuction sayHi(){ alert("Hi!"); } //--></script>

인라인 코드와 외부 파일

자바스크립트를 외부 파일로 분리했을 때 이점 - 관리하기 쉽다 (마크업과 무관하게 수정가능) - 캐싱 (스크립트 파일을 한 번만 내려받음) - 안전하다 (CDATA 섹션이나 주석 편법 필요없음)

문서 모드

쿽스 모드, 표준 모드, 거의 표준 모드로 구분

'쿽스 모드'와 '표준 모드'의 주요 차이는 콘텐츠 렌더링과 관련이 있지만 자바스크립트에도 영향이 있음

'표준 모드'와 '거의 표준 모드'의 주요 차이는 이미지 주변의 공백을 어떻게 처리하느냐인데 테이블에서 사용한 이미지에서 가장 잘 드러남

문서의 시작 부분에 독타입을 쓰지 않으면 쿽스 모드로 동작, 하지만 브라우저 사이의 일관성을 위해 표준 모드나 거의 표준 모드의 독타입 사용

<noscript> 태그

<noscript> 요소의 콘텐츠가 표시되는 상황은 - 브라우저가 스크립트를 지원하지 않거나 - 브라우저의 스크립트 지원이 꺼져 있을 때

요약

자바스크립트는 <script> 요소를 통해 HTML에 삽입

인라인 또는 외부 파일로 분리

defer 속성으로 실행을 미루거나 async 속성으로 비동기 가능

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 <<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

자바스크립트란 무엇인가

1995년 입력 유효성 검사를 목적으로 등장 (서버 대신 브라우저에서), 지금은 단순한 유효성 검사에 국한되지 않고 브라우저 창과 그 콘텐츠의 거의 모든 부분과 상호작용하며, 이제 클로저나 익명(람다) 함수, 심지어 메타프로그래밍까지 처리하며 복잡한 계산과 상호작용을 수행하는 완전한 프로그래밍 언어가 됨

역사

넷스케이프에서 처음 만들었으나 마이크로소프트에서 독자적으로 JScript를 구현, 그래서 표준을 위해 ECMAScript("에크마스크립트")를 정의

구현

코어 (ECMAScript) + 문서 객체 모델 (DOM) + 브라우저 객체 모델 (BOM)

ECMAScript

- 기반 언어 / 웹 브라우저는 ECMAScript를 구현하는 '호스팅 환경(인터페이스 구실 / 확장 제공)' - 문법, 타입, 선언문, 키워드, 예약어, 연산자, 객체를 정의 - 버전을 '판'이라고 부르며 최근판은 2009년에 만들어진 5판 (JSON 데이터를 파싱/직렬화하는 네이티브 JSON 객체, 상속과 고급 프로퍼티 정의에 쓰이는 메서드, 일부 확장된 스트릭트 모드)

문서 객체 모델

- XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스 - 전체 페이지를 노드의 계층 구조로 변환 / 문서를 표현하는 트리를 만들고 각 노드를 쉽게 제거하고, 추가하고, 고체하고, 수정할 수 있게 API 제공 - 다양한 DOM 레벨(1, 2, 3)이 있고 브라우저마다 지원하는 정도가 다름

브라우저 객체 모델

- 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스 - 브라우저에 표시된 페이지와 별개의 컨텍스트에서 브라우저와 상호작용을 할 수 있음 - HTML5에서 BOM을 공식 명세의 일부로 표준화 - 새창 띄우기 / 창 크기 조절 / navigator 객체 / location 객체 / screen 객체 / 쿠키 지원 / XMLHttpRequest, ActiveXObject와 같은 커스텀 객체

버전

최신 버전은 1.8.6이며 현재로서는 자바스크립트 2.0이라 부를 만한 구현이 존재하지 않음

요약

- 자바스크립트가 처음 나왔을 때 HTML에 종속되었다.

- HTML과 분리되면서 공존하는 길을 찾아보게 되었고 이를 통해 HTML명세서가 만들어 졌다.

1. <script>

- 속성 1. async : [옵션] 자원을 받거나 다른 스크립트 불러오기 등 페이지 작업 방해하는 것을 막음. (외부 자원을 받을 때)

- 속성 2. charset : [옵션] 코드의 문자셋 지정. 잘 안 씀.

- 속성 3. defer : [옵션]  콘텐츠 완벽 파싱 후 스크립트 실행해도 안전함을 나타냄.(외부 자원 받을 때) ; IE7이하에서는 인라인 스크립트에서도 이 속성 O

- 속성 4. language : [폐기] 'JavaScript', 'JavaScript1.2', 'VBScript' 등등 하려 했으나 브라우저에서 무시함.

- 속성 5. src : [옵션] 실행할 외부 파일의 위치

- 속성 6. type : [옵션] 'text/javascript'이 기본값. 

- 인라인 자바스크립트 코드 : <script> 요소 안에 직접 작성된 코드

- 인라인 자바스크립트 코드 내에서는 </script>를 쓸 수 없다. >> 에러

- '/' 때문인데 '\\'를 이용해 이스케이프 해서 해결 할 수 있다.

- 외부js는 <script type="text/javascript" src="example.js"></script> 요롷게

- example.js 안에는 오직 자바스크립트만 있어야 한다.

- example.js 안에는 <script> </script>는 생략

- <script ~~~~~ /> 도 가능하다. 하지만 HTML 문법에 맞지않고 IE에서는 제대로 처리 되지 않으므로 이렇게 쓰지 않는게 좋다.

- 다른 도메인에 있는 자바스크립트도 불러올 수 있다.

- <script type="text/javascript" src="http://www.somewhere.com/afile.js"></scrpit>

1.1 태그 위치

- <haed> : 자바스크립트 코드 내려받고 > 파싱 > 해석 > 페이지 렌더링 시작                : 스크립트 불러오는 동안 렌더링이 안되 빈 페이지 노출.. GG..

- <body> 마지막 : 페이지 렌더링 > 자바스크립트 시작                            : 우선 페이지가 뜨므로 사용자에게 편리

- defer 설정  : 해당 요소를 만나면 코드를 즉시 받지만 실행은 </html> 이후.

<!DOCTYPE html> <html>     <head>         <title>Example HTML Page</title>         <script type="text/javascript" defer src="example1.js">         </script>         <script type="text/javascript" defer src="example2.js">        </script>     </head> <body> <!-- 페이지 콘텐츠 --> </body> </html>

- defer로 지연시킨 스크립트가 순서대로 실행 된다는 보장 없음.

- 외부 스크립트 파일 불러올때만 유효.

- defer 속성은 IE4, firefox 3.5, safari 5, chrome 7 부터 지원

- 그러므로....... 여전히 </body>직전에 놓는게 좋다.

- async 설정 : defer와 비슷, 스크립트가 마크업 순서대로 실행 ㄴㄴ

<!DOCTYPE html> <html>     <head>         <title>Example HTML Page</title>         <script type="text/javascript" async src="example1.js">         </script>         <script type="text/javascript" async src="example2.js">        </script>     </head> <body> <!-- 페이지 콘텐츠 --> </body> </html>

-  example1.js와 example2.js가 서로 의존성이 있으면 망가질수 있음.

- 스크립트 실행이 DOMContentLoaded 이 전일수도, 이 후일수도 있음.

- firefox 3.6, safari 5, chrome 7 부터 지원.

1.2 XHTML : HTML에 XML을 적용한 것. 코드 규칙이 매우 엄격.

- ex. 비교연산자 '<'를 태그로 인식 >> CDATA로 감싸줘야 함.

 <![CDATA[ ~~ ]]>

- XHTML비호환 브러우저의 경우 

//<![CDATA[ ~~ ]]>

- type = "application/xhtml+xml" 도 가능 but 브라우저를 탄다.

2. 인라인 코드와 외부 파일

외부파일로 쓰면 좋은점!

1. 관리하기가 쉽다.

2. 캐싱 : 한번 파일을 사용하면 페이지 불러오는 시간이 짧아진다.

3. 안전 : 앞 서 본 CDATA 같은거 안써도 됨. HTML, XHTML 모두 똑같이 불러옴

3. 문서 모드

- doctype을 설정하지 않으면 쿽스 모드( :비표준 기능을 사용, 브라우저마다 다름) 

- 표준모드 

<!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 --> <!DOCTYPE html>

4. <noscript>

- 브라우저가 자바스크립트를 지원 하지 않을 때

- 브라우저의 스프립트 지원이 꺼져 있을 때

<noscript> <p>This page requires a JavaScript-enabled browser.</p> </noscript>

- 위 두 상황이 아니라면 <noscript> 내 컨텐츠는 노출되지 않는다.

요약

- 외부 자바스크립트 파일은 <script src="~~"> </script>

역사 

- 1995년 입력 유효성 검사를 위해 처음 등장. ( 모뎀시절 서버 왕복 비용때문)

- 네스케이프와 선 마이크로시스템즈가 함께 1.0을 만듬.

- 마이크로소프트도 IE3와 함께 JScript라는걸 만듬.

- 표준을 위해 ECMAScript라는 이름의 스크립트 언어를 정의.

- 지금은 클로저, 익명함수, 메타프로그래밍 까지 가능한 프로그래밍 언어로 자리잡음.

Javascript = ECMAScript + DOM + BOM

ECMAScript 

- 기반언어, 호스트 환경

- 인터페이스 구실용. 확장 제공

- 문법/타입/선언문/키워드/예약어/연산자/객체 정의

- 버전은 '판' 이라 불리우며 최근판은 2009년 12월 3일에 발표된 '5판'

- 5판의 새로운 기능 : JSON데이터 파싱, 네이티브 JSON  객체, 상속/프로퍼티 정의를 위한 메서드 등

DOM

- 문서 객체 모델  : XML을 html에서 사용할수 있도록 확장한 API

- 페이지를 노드의 계층 구조로 변환

- 문서를 노트의 계층 구조인 트리로 생성.

BOM

- 브라우저 객체 모델 : 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스

- HTML5가 BOM을 일부로 표준화 하여 많이 개선됨.

- 새창띄우기, 창 크기 조절, 닫기, 네비게이션 객체, 로케이션 객체, 스크린 객체, 쿠키 지원, ActiveX와 같은 커스텀 객체

요약

자바스크립트는 웹 페이지와 상호작용하도록 만들어진 스크립트 언어이다.