프론트엔드 데브코스 5기 TIL 7 - HTML/CSS/DOM/IIFE/this

김영현·2023년 10월 2일

TIL

목록 보기

8/129

HTML/CSS

예전에는 하이퍼텍스트를 눌러 페이지 이동을 했었음.
그때 생긴것이 html. 그때는 레이아웃, 폰트크기 등 스타일을 html이 모두 도맡아 함.
이후 css생김.
현대의 html은 문서의 구조, 의미다.
각 태그마다 기본스타일이 있다. 다 외우는건 멍청한 짓! 사례들로 파악해보자.

숙제를 내주셨따.

css에서 id와 class의 차이, id가 여러개있으면 어떻게 처리하는지
id는 유일 class는 중복가능.
여러개있으면 어떻게 처리되는지? => 제일 처음 만난 값만 id를 가진다.
Css의 선택자 종류

DOM(Document Object Model)

html문서를 모델링해 조작 가능한 객체로 뽑아낸 것.
JS와 같이 등장함. 초창기엔 접근 가능한 태그가 적었지만, 점점 늘어났다.

DOM은 트리구조다.

document 노드 : root
element 노드 : 태그 그 자체
attribute 노드 : 엘리먼트의 어트리뷰트
text 노드 : 엘리먼트의 텍스트를 표현 (말단노드)

DOM의 각 요소는 prototype으로 정의되어있다.
예를들어 <body>는 HTMLBodyElement에서 위임받아 만들어지는 것이다...

여기서 문제! li태그를 가져올때, 엔진은 어떤 식으로 순회할까?

<html>
	<body>
      <div>Div</div>
      <strong>우하하</strong>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
  	</body>
</html>

정답은 preorder(전위순회)다.
=> 사람이 인식하는 순서와 동일하다. html > body > div > strong > ul > li...

DOMtree의 렌더링

여기서자세히 설명했다.

DOM 메소드

몰랐던 것들만 적겠음

firstElementNode : 첫번째 자식
nextElementSibling : 다음 형제
previousElementSibling : 이전 형제

Virtual DOM

DOM을수정하면 렌더링과정이 다시 일어난다. 자세한 설명은 위에 링크.
그렇기에 상호작용이 많아져 DOM조작이 자주 일어날때 쯤 Virtual DOM이 개발되었다.
원리 자체는 간단하다. DOM조작을 1대1로 업데이트하지 않고
Virtual DOM이라는 복제본에 수정사항을 반영해서 한번에 업데이트한다.
=> 사실 그냥 DOM보다는 느리다. But. 충분히 빠르고 개발자가 일일히 최적화 할 필요가 없어서 사용함.
브라우저 렌더링만 줄여줄 뿐.

숙제를 내주셨다

document.createDocumentFragment 가 하는 일은?

DocumentFragment

일종의 임시 document다. 여기에 저장된 노드들이 변경되어도 렌더링과정에 영향을 끼치지 않는다.
예를들어 appendChild()를 반복문으로 사용할 경우, 최악의 경우 매번 리플로우가 일어나게 된다.
하지만 DocumentFragment에 일시적으로 노드를 저장 후, 한번에 추가하면 한 번의 리플로우만 일어난다.
Virtual DOM과 유사하구나!

그런데 또 의문이 들었다. 웹 컴포넌트라는 기술에서도 비슷한 <template>이라는 기능이 있다.

둘의 차이는 뭘까?
=> <template>은 반복적으로 사용할 노드를 저장해두고 쓰는 것. documentFragment는 동적으로 생성하거나, 리플로우를 방지할 목적으로 사용한다.

비슷한 기능인데, 목적이 다르다.
실제로 <template>의 content는 읽기 전용 DocumentFragment라고 나와있다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content

IIFE(즉시실행 함수)

//1번
(function(name){
    console.log(`hello ${name}`);
}('tomato'))

//2번
(function(name){
    console.log(`hello ${name}`);
})('tomato')

내가 알고있던 즉시실행 함수는 1번.
2번도 즉시실행함수다...주의하자.

this

새로 문서를 팔까 싶다가도, 나중에 한번 정리할테니 짚고 넘어가자

그냥 함수에서의 this는 무조건 전역객체를 가리킨다. 객체 내부 어쩌고어쩌고...쭈욱 들어간 뒤 콜백함수에서 this를 사용해도 무조건 window객체다. (브라우저 한정)
메서드에서의 this는 .마침표 연산자 앞에 기술된 객체에 바인딩(소유가 아닌 호출객체)
생성자 함수는 생성될 인스턴스에 바인딩
apply,call, bind는 this를 바인딩할 객체를 명시한다. 고 녀석에게 바인딩.
화살표함수는 this가 없다. => 상위 스코프의 this의 참조.(선언된 위치의 상위스코프 참조).

조금만 더 자세히 알아보자

const myObject = {
  name: "example",
  outerFunction: () => {
    setTimeout(() => {
      setTimeout(() => {
        console.log(this); // this는 전역 객체를 가리킴
      }, 1000);
    }, 1000);
  }
};

myObject.outerFunction();

이때는 전역객체를 가리킨다. 왜냐면, outerFunction의 상위 스코프는 전역객체니까.

...
 outerFunction: function() {
    setTimeout(() => {
      setTimeout(() => {
        console.log(this); // this === myObject
      }, 1000);
    }, 1000);
  }