DOM
DOM은 사용자와 상호작용하는 것이다. 우리 프론트엔드 개발자는 DOM으로 어떻게 사용자에게 콘텐츠를 제공할 것인지를 늘 염두하며 작성해야한다.
DOM은 다양한 기술과 연동이 되며, JS로 통합하고 융합해야 시나리오가 있는 콘텐츠를 사용자에게 동적으로 제공할 수 있다.
DOM은 인터페이스 단위로 프로퍼티와 메소드를 정의한다. 인터페이스를 다루는 것은 DOM을 다루는 것과 같다.
코드를 작성할 때 항상 염두해야할 것
코드가 흐름을 가진 하나의 시나리오가 되도록 시맨틱(변수명, 함수명 잘 짓기)을 부여한다.
그래야 하나의 덩어리 개념이 되기 때문이다!
목적을 하나만 가지도록해야 시나리오가 단순해지며 목적에 맞는 시나리오를 만들 수 있다. (getter와 setter처럼)
JS의 Object, Property
Object
JS 개발자라면 기본적인 내용이라 모두 알겠지만, JS는 Object를 기반으로 한다.
JS 개발자는 Object와 인스턴스를 굳이 구분하지 않는다. 다른 개발자들은 이를 의아하게 생각하겠지만, 이를 구분하지 않는 이유를 아래 예시를 통해서 설명해보도록 하겠다.
Js에서는 배열을 선언할 때 보통 다음과 같이 선언한다.
const fruits = ['딸기', '바나나', '키위']여기서 ['딸기', '바나나', '키위']는 fruits 변수에 설정된 Object로, Array Object로 생성한 인스턴스다.
원래 new 연산자로 생성한 것을 인스턴스라 칭하지만, JS에서는 new 연산자를 사용하지 않아도 인스턴스가 생성되기 때문에 Object로 통칭하기 때문이다.
Property
프로퍼티는 단순하게 말하면 그냥 {key: value} 형태를 말하는 것이다.
ES3에서는 원래 Property name이라고 표현을 했었다.
즉, {} 내에서 중복된 이름이 허용되었었다는 말이다.
하지만, ES6에서는 Symbol이라는 개념이 등장하면서 Property key로 변경이 되었고
{} 내에서 중복된 key를 선언할 수 없게 되었다.
Property는 속성을 설정할 수도 있다.
Property에는 다음처럼 Object, Function Value도 작성할 수 있다.
const sports = { swim: '수영' }
defineProperty(sports, 'baseball', {
value: "야구",
writable: true, enumerable: false
})정리하면, JS는 Object를 기반으로 하며, Object는 Property로 구성이 되어있기 때문에
JS의 형태 및 구조는 Object와 Property라고 할 수 있다!
함수와 메소드
함수와 메소드를 구분해야하는 이유는 function이 작성된 위치(구조)가 다르기 때문이다.
함수
함수는 인스턴스에 포함되지 않는다!
Array.isArray()메소드
Array.prototype.concat()함수
JS는 function 키워드를 만나게되면, built-in Function Object로 function Object를 만들게 된다.
function getName() {}라는 함수가 선언되면, 이때 property key는 getName, value는 Function Object가 된다.
그래서 함수는 호출할 수 있는 객체가 되는 것이다.
Object.function() 형태일 때 function을 함수라고 할 수 있는 것이다!!
메소드
메소드는 prototype에 연결이 되어있다.
const instance = new Point(100)
Point.prototype.getPoint = function() {
return this.point
}- new 연산자로 인스턴스를 생성했다.
- getPoint()는 prototype에 연결이 되어있으며 메소드다.
instance.proto에 getPoint()가 연결된다.
instance.proto에 연결된 메소드를 호출할 때 proto는 생략한다. (instance.getPoint())
class Sport {
static getItem() {
return 'class Sport'
}
}
console.log(Sprot.getItem())- class에 작성한 function은 메소드다.
- static 메소드 덕분에 Sport.getItem() 형태로 호출할 수 있다.
이러면 함수라고 부를 수 있다. (Object.function()) - static 메소드를 작성해주지 않으면 메소드로 인식한다.
Sport.prototype.getItem() = function() {} 형태이며, getItem()은 메소드다.
instance.function() -> 이건 우리가 알고 있는 그런 함수라고 부를 수 없다~!
실행 Context, Closure, Scope Chain
Context 개념
Software에서 context는 하나의 덩어리 형태를 나타낸다.
함수가 호출되면 엔진이 실행 context를 만들고, 함수 하나를 덩어리 개념으로 실행한다.
Closure
함수 바깥의 변수 또는 함수를 참조할 수 있는 환경이 클로저다.
함수를 기준으로 함수 밖을 클로저라한다.
function book() {
var point = 123;
function getPoint() {
return point;
}
function show(param) {
var title = 'DOM';
log(getPoint());
}
show();
}
book();Scope / Scope Chain
스코프는 쉽게 말해서, 식별자 해결을 위한 범위다.
프로퍼티 이름을 식별하는 순서, 방법
- 실행 context를 기준으로, 함수 안에서 먼저 식별자를 찾는다.
- 존재하지 않으면 함수 밖에서 식별자를 찾는다.
- 없으면 Global Object까지 올라가면서 찾는다.
이렇게 올라가는 단계 하나하나를 스코프라 한다!!(Scope Chain)
ES5에서는 Scope Chain이라는 개념은 없고, Lexical Environment로 통칭하는 듯하다.
HTML 정리: Element tag, HTML, HTML5
HTML5 이전은 Markup 중심이였다면,
HTML5 이후부터는 Application을 중심으로 한다.
이는 콘텐츠르르 표현하는 하나의 매체가 되어버렸다는 것인데, 그래서 Audio, Video, Canvas, SVG, WebGL 등이 등장한 것이다.
HTML의 구조, 구성
콘텐츠를 구분하기 위해 별 뜻이 없는 div에 의미를 부여하는 것은 표준을 무시하는 것이다.
h1 ~ h6 의 랭크로 아웃라인을 만들어 구분해주어야한다.
section tag 아웃라인 알고리즘
section tag는 콘텐츠 흐름의 연결이지만, 콘텐츠 아웃라인이 엉키는 모습이고 다단계로 깊게 작성하면 아웃라인의 취지에 어긋날 수도 있다.
그래서 MDN 문서에서는 h1 ~ h6로 사용하는 것을 권장한다.
<h1>The Tax Book</h1>
<section>
<h2>Earning money</h2>
<section>
<h2>Getting a job</h2>
</section>
</section>
<section>
<h2>Spending money</h2>
<section>
<h2>Cheap things</h2>
</section>
<section>
<h2>Expensive things</h2>
</section>
</section>[아웃라인 알고리즘 해석]
- The Tax Book
- Earning money
- Getting a job
- Spending money
- Cheap things
- Expensive things
- Earning money
