1. DocType (Document Type Definition, DTD),
DocType은 html문서에서 SGML이나 XML기반 문서 내에 그 문서가 특정 문서 형식 정의를 따름을 지정하는 것입니다.
HTML의 버전이 무엇인지 알려주는 역할이라고 생각 하면 됩니다.
HTML, XHTML, HTML5 유형 중에 정의를 해주어야 합니다.
문서형 정의를 생략하는 경우, 웹브라우져가 표준모드가 아닌 비표준 모드로 렌더링 되어 크로스 브라우징에 어려움을 겪을 수 있습니다. 정의는 HTML 문서의 최상위에 위치합니다.
DocType 선언하기
<!DOCTYPE html>
//html 문서 최상위에 위치이전 HTML문서
HTML4 or XHTML 에서는 선언이 DTD를 참조해야하므로 복잡할 수 있습니다.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">2. meta태그
메타태그는 웹서버와 웹 브라우져간에 상호교환이 되는 정보를 정의 하는데 사용합니다.
HTML 문서의 head 태그 사이에 입력하는 특수 태그이며 사이트 디자인에는 전혀 영향을 미치지 않습니다.
페이지의 설명 요약, 핵심키워드, 제작자, 크롤링 정책 등 정보를 제공합니다.
(Description, Keywords, author, title)
이외에 반응형웹을 위한 viewport 설정과
호환성 보기를 위해 렌더링 모드를 X-UA-Compatible로 설정 할 수 있습니다. (IE=Edge 권장)
http-equiv
/*
웹 브라우져가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML문서가 응답 헤더와 함께 웹 서버로부터 브라우져에 전송 되었을 때에만 의미를 갖습니다.
*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
// 검색 엔진에 의해 검색되는 단어 지정
<meta name="keywords" content="web, html, meta" />
// 검색 결과에 표시되는 문자를 지정
<meta name="Description" content="web, html, meta" />
// 검색 로봇 제어
<meta name="Robots" content="noindex, nofollow" />
/*
All(기본값) : 'index, follow' 를 지정한 것과 같습니다.
None : 'noindex, nofollow' 를 지정한 것과 같습니다.
Index : 그 페이지를 수집 대상으로 합니다.
Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 합니다.
Noindex : 그 페이지를 수집대상에서 제외합니다.
Nofollow : 그페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않습니다.
*/3. script 태그의 위치
Script 태그는 html에서 아무 위치에 있어도 됩니다.
하지만 Javascript 문에서 DOM이 다 렌더링 되지 않은 상태에서의 이벤트 실행 및 함수 호출로 에러가 날 수 있습니다. 그렇기 때문에 렌더링의 흐름을 파악하고 사용하길 권합니다.
보통 Document.onload 를 사용하여 DOM 렌더링이 완료 된 후 script문을 실행하여 해결합니다.
4. 캡쳐링, 버블링
캡쳐링과 버블링에 대해 이야기 하기 전에 알고 있어야 할 내용은 이벤트 등록입니다.
이벤트 등록은 사용자의 입력을 받기 위해 필요한 기능입니다.
아래는 이벤트 등록 코드입니다.
<button>click button</button>
let button = document.querySelector("button");
button.addEventListener("click", buttonClick);
function buttonClick(event){
console.log(event);
}버튼을 클릭 했을 때 buttonClick 함수를 실행시킵니다. 그리고 buttonClick 함수에 event인자가 넘어 옵니다. 콘솔에는 event 관련 정보가 출력됩니다.
이처럼 addEventListener() 웹 API는 웹개발자들이 화면에 동적인 기능을 추가하기 위해 자연스럽게 접하는 기능입니다. 이제 버블링과 캡쳐링을 알아보겠습니다.
버블링
버블링은 한 요소에 이벤트가 발생하면, 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상위에 요소를 만날 때 까지 과정이 반복되고 요소 각각에 할당된 핸들러가 동작합니다.
<form onClick="alert('form')">Form
<div onClick="alert('div')">Div
<p onClick="alert('p')">P</p>
</div>
</form>안쪽에 P 태그를 클릭하면 P 요소에 클릭 핸들러가 동작합니다. 이어서 Div 핸들러가 동작하고 form 핸들러도 동작합니다. document 객체를 만날 때까지 각 요소에 할당 된 onClick 핸들러가 동작합니다
이러한 흐름을 버블링이라고 합니다. 이벤트가 제일 안쪽 부터 최상위 요소까지 거품처럼 퍼져 나가기 때문에 붙혀진 이름입니다.
버블링 중단
버블링은 타깃 이벤트에서 시작해서 html 태그 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생 합니다. 하지만 상황에 따라 버블링을 중단해야 하는 경우가 있습니다. 버블링을 중단 하는 방법은 아래와 같습니다.
<body onclick="alert('bubble')">
<button onclick="event.stopPropagation()">click</button>
</body>주의 할 점은 위쪽으로 일어나는 버블링은 막아주지만 다른 핸들러 동작은 막지 못합니다.
다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용 해야 합니다.
캡쳐링
캡쳐링 단계를 이용해야 하는 경우는 흔치 않습니다.
<table>
<tr>
<td onclick="alert('td')"></td>
</tr>
</table>td 태그를 클릭하면 이벤트가 최상위 요소에서 시작해 아래로 전파되고, 이벤트 타깃 요소에 도착해 실행 된 후 다시 위로 버블링 단계가 진행 됩니다.
on<event> 프로퍼티나 html속성, addEventListener(event,handler) 를 이용한 핸들러는 캡쳐링에 대해 알수 없습니다. 이 핸들러는 두 번째 혹은 세 번째 단계의 이벤트 흐름(타깃,버블링 단계) 에서만 동작합니다.
캡쳐링 단계에서 이벤트를 잡아 내려면 addEventListener의 capture옵션을 true 로 설정해야 합니다.
elem.addEventListener(... {capture: true})
elem.addEventListener(..., true)호이스팅
호이스팅이란 코드에 선언 된 변수, 함수를 코드 상단으로 끌어 올리는 것을 말하며 이는 변수 범위가 전역범위인지 함수 범위인지에 따라 다르게 수행 될 수 있습니다.
if(true){
var name = 'test'
}
console.log(name);위 코드는 호이스팅에 의해서 아래와 같은 모양으로 바뀌게 됩니다.
var name; // 선언
if(true){
name = "test"; // 할당
}
console.log(name);var name = "test" 라고 정의한 변수가 실제로는 선언과 할당이 분리되는 것입니다.
var의 유효범위
호이스팅시 선언문은 유효범위 최상단으로 올라갑니다.
함수내부에서 선언시 해당 함수에 유효범위(scope)안에서 동작하고, 전역범위 또한 하나의 함수 스코프처럼 동작합니다.
function test1(){
if(true){
var name = 'test'
}
console.log(name);
}
function test2(){
for(var i=0; i<5; i++){
//.....
}
console.log(i);
}
if(true){
var num = 10;
}
console.log(num);위 코드는 호이스팅에 의해 아래와 같은 모양으로 바뀌게 됩니다.
var num; //선언
function test1(){
var name; //선언
if(true){
name = 'test' //할당
}
console.log(name);
}
function test2(){
var i; // 선언
for(i=0; i<5; i++){//할당
//...
}
console.log(i);
}
if(true){
num = 10; // 할당
}
console.log(num);함수 호이스팅
함수 선언식 역시 호이스팅 대상입니다.
스코프 내에서 어떤 위치에서 함수 선언을 하든지 호출이 가능합니다.
function testFunc(){
console.log('test');
}위 코드는 아래와 같이 호이스팅 됩니다.
function testFunc(){
console.log('test');
}
testFunc();하지만 아래의 함수 표현식은 호이스팅의 영향을 받지 않습니다.
testFunc();
var testFunc = function(){
console.log('test');
}그 이유는 testFunc 는 변수이기 때문입니다.
var testFunc;
testFunc();
testFunc = function(){
console.log('test');
}함수, 변수 우선순위
var 변수, 함수 선언식의 유효범위가 최상단으로 호이스팅 된다는 것을 알아봤습니다.
이제 호이스팅과 변수의 우선순위를 알아보겠습니다.
var testFunc = 'test';
funciton testFunc(){
console.log('testFunc');
}
function tester(){
console.log('tester')
}
var tester = 'hello';
console.log(typeof testFunc);
console.log(typeof tester);위 코드는 아래와 같이 호이스팅 됩니다.
var testFunc;
var tester;
function testFunc(){
console.log('testFunc');
}
function tester(){
console.log('tester');
}
testFunc = 'test';
tester = 'hello';
console.log(typeof testFunc);
console.log(typeof tester);변수가 선언되고 함수가 할당 되어졌지만 다시 string으로 할당 값을 받아서
console에는 string 을 출력합니다.
실행 컨텍스트
ECMAScript 스펙에 따르면 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의합니다.
자바스크립트 엔진에서 코드를 실행하기 위해서 실행에 필요한 정보를 알고 있어야 합니다.
전역변수,지역변수, 매개변수, 객체의 프로퍼티
함수선언,
변수의 유효범위,
this실행 컨텍스트의 종류는 전역 컨텍스트, 함수 컨텍스트 두가지가 있습니다.
함수 내부에서 실행되는 코드를 제외하고는 모두 전역 컨텍스트로 볼수 있습니다.
함수 컨텍스트는 함수가 호출이 될 때 생성되고 동작이 완료되면 소멸됩니다.
자바스크립트 동작 원리
자바스크립트의 특징 중 하나는 단일 스레드 언어라는 점입니다.
즉 동시에 하나의 작업만을 처리할 수 있다는 말입니다.
자바스크립트 엔진은 Memory Heap 과 Call Stack으로 구성되어 있습니다.
Memory Heap은 메모리 할당이 일어나는 곳입니다.
선언한 변수 함수 등이 담겨져 있습니다.
Call Stack은 함수 호출 시 쌓이는 곳입니다. 선입후출의 특징을 갖고 있습니다.
브라우져는 Web APIs, Event Table, Callback Queue, Event Loop등으로 구성되어 있습니다.
web APIs 는 DOM, AJAX, setTimeout 등 브라우져가 제공하는 API 입니다.
Web APIs 는 setTimeout이 Call Stack에 들어와 실행 되면 Browser API인 timer를 호출합니다.
setTimeout(function exec() {
console.log('second');
}, 1000)Event Table 은 특정 이벤트(mouse move, click 등)가 발생 했을 때 어떤 Callback 함수가 호출 되야 하는지 알고 있는 자료구조 입니다. 위 코드에서 호출 된 timer가 종료 되면 이벤트가 발생 하는데 exec Callbacak 함수가 실행 되어야 한다는 것을 Event Table이 알고 있습니다.
Callback Queue는 이벤트 발생 시 실행해야 할 Callback 함수가 Callback Queue에 추가 됩니다.
Event Loop는 Call stack과 Callback Queue를 감시합니다.
Call stack이 비어있을 경우, Callback Queue에서 함수를 꺼내 Call stack에 추가합니다.
console.log('first');
setTimeout(function cb(){
console.log('second');
}, 1000); // 0ms 뒤 실행
console.log('third');위 코드가 실행 될 때 각 구성요소들이 어떻게 동작하는지 알아보겠습니다.
1. console.log('first')가 Call stack에 추가 됩니다.
2. console.log('first')가 실행 되어 화면에 출력 한 뒤, Call Stack에서 제거 됩니다.
3. setTimeout 함수가 Call stack에 추가 됩니다.
4. setTimeout 함수가 실행 되면서 browser가 제공하는 timer WebAPI를 호출하고 CallStack에서 제거합니다.
5. console.log('third') 가 Call stack에 추가됩니다.
6. console.log('third') 가 실행되어 화면에 출력 되고 Call stack에서 제거 됩니다.
7. setTimeout 함수에 전달한 0ms 시간이 지난뒤 Callback으로 전달한 cb함수가 Callback Queue에 추가됩니다.
8. Event Loop는 Call Stack이 비어있는것을 확인 하고 Callback Queue를 살펴봅니다.
cb함수를 발견한 Event Loop는 CallStack에 cb를 추가합니다.
Event Loop는 Call stack이 비어 있을 경우에 Callback Queue에서 대기중이던 함수를 Call Stack에 추가합니다.
9. cb함수가 실행 되고 내부의 console.log('second') 가 call stack에 추가 됩니다.
10. console.log('second') 가 화면에 출력되고 Call stack에서 제거됩니다.
11. cb함수가 Call stack에서 제거됩니다.
