멘토링 5번째

🌕 F-lab 멘토링 기록

멘토링 이후 부족한 부분을 채우기 위한 기록

DOM이란?

• Document Object Model의 약자로 HTML 문서의 계층 구조와 정보를 표현하고 이를 제어할 수 있는 API(프로퍼티, 메서드)를 제공하는 트리 자료구조

SPA란?

• Single Page Application의 약자로 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것
• 과거 웹 사이트의 규모가 작을 때, 어떤 요소를 클릭 시 서버에서 매번 전체 html 파일을 전송해주었다.
• 그러나 점점 웹 사이트의 규모가 커지면서 요소 하나를 변경하기 위해 전체를 보내는 것이 너무 비효율적
• 그래서 등장한 것이 SPA

SPA에서 SEO가 동작하기 어려운 이유?

• 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현(Client Side Rendering; CSR)하기 때문에 자바스크립트를 읽지 못하는 검색 엔진에 대해서는 크롤링이 되지 않아 문제가 발생한다.

SEO란?

• Search Engine Opimization의 약자로 말 그대로 검색 엔진에 최적화하는 것을 의미한다.
• 위의 SPA의 경우 검색 엔진에 노출되기 어렵기에 검색 엔진에 최적화하는 방법들이 존재한다.
  • (1) SSR(Server Side Rendering)으로 구축하기
    • SPA이면서 SSR 방식으로 사이트를 구축하는 것이 가능
      • React의 Next.js
      • Vue의 Nuxt
      • Angular의 Angular Universal
  • (2) 동적 렌더링(Dynamic Rendering)
    • 이미 CSR 방식으로 SPA를 구현한 경우 사용
    • 서버에서 요청하는 주체가 사람인지, 크롤러인지 구분
      • 사람: HTML과 JS를 제공
      • 크롤러: 렌더링된 HTML 버전의 페이지를 제공
    • react-helmet, prerender-spa-plugin, prerender.io, puppeteer, rendertron 등이 있다.
  • (3) History API
    • SPA는 웹 사이트 주소가 바뀌지 않기에, SPA이지만 주소를 부여하는 기능

inline, block, inline-block 차이

inline

• 전후 줄바꿈 없이 한 줄에 배치
• width와 height 속성을 지정해도 무시됨(해당 태그의 컨텐츠 크기 만큼 공간을 차지하기 때문)
• margin과 padding 시 좌우 간격만 반영(상하 간격은 반영되지 않음)
• span, a, em 등

block

• 전후 줄바꿈이 있어 마치 상자를 쌓듯이 본인이 한 줄을 차지함
• width, height, margin, padding 모두 반영됨
• div, p, , h1~6 등

inline-block

• 기본적으로 inline과 같이 전후 줄바꿈 없이 한줄에 배치
• block처럼 width, height, margin, padding 모두 반영됨
• 즉, 내부적으로는 block이지만 외부적으로는 inline
• button, input, select 등

이벤트 버블링, 이벤트 캡처링

이벤트 버블링

• 자식 태그(노드)에 이벤트가 발생 시, 그 이벤트가 부모 태그로 올라가며 이벤트가 전달되는 현상
• 단, focus와 같이 버블링되지 않는 이벤트도 존재. 그러나 거의 모든 이벤트는 버블링이 일어난다.
• body 태그 뿐 아니라, html 태그 심지어 document 객체를 만날 때 까지 모든 노드에서 발생하며 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다.

이벤트 캡처링

• 이벤트가 하위 요소로 전파되는 것
• 실제로 이벤트가 일어나는 단계는
  • (1) 캡처링 단계(부모에서 자식노드로 이벤트가 전달됨)
  • (2) 타겟 단계(이벤트 타겟에서 이벤트 발생)
  • (3) 버블링 단계(자식에서 부모노드로 이벤트 전달됨)
• 일반적으로 이벤트 핸들러에서 캡처링 단계는 기본적으로 비활성화({capture: false})되어 있기 때문에 캡처링은 정말 웬만하면 사용하지 않는다.

event.stopPropagation()과 event.preventDefault()

event.stopPropagation()

• 특정 노드에서 이벤트 버블링을 중단시킬 때 사용
• event.stopImmediatePropagation(): 특정 이벤트뿐 아니라, 해당 요소에 할당된 모든 이벤트 핸들러의 동작도 막을 때 사용한다.
• ⭐ 정말 특수한 상황이 아니라면 버블링을 막는 행위는 지양할 것! 버블링을 막았다가 추후에 상위 노드에서 이벤트를 추가할 일이 생길 때 문제가 발생한다.

event.preventDefault()

• 브라우저의 기본 동작을 취소할 수 있게 해주는 메서드

이 둘의 차이에 대해서는 참고에서 더 자세히 보는 것을 추천!

가상 DOM

• DOM은 웹 페이지를 이루는 HTML태그를 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델
• 웹의 규모가 커지면서 그 때 그 때 DOM에 직접 접근하여 변화를 주게 되면 성능 이슈가 발생
• DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM의 변화에 따라 랜더링하는 과정에서 시간이 더 소모되는 것

이를 해결하기 위해 등장한 것이 가상 DOM!!!

예시) 리액트에서 가상 DOM을 반영하는 절차

• 데이터 업데이트 시, 전체 UI를 가상 DOM에 리랜더링
• 이전 가상 DOM과 현재의 가상 DOM을 비교(객체의 비교 -> 불변 객체가 중요한 이유)
• 변화한 부분만 실제 DOM에 일괄 업데이트 -> 레이아웃 계산이 한번에 한번만 이뤄짐
• 즉, 작은 규모의 DOM 변화가 여러번 일어나는 것보다 큰 규모의 레이아웃 변화를 한 번 발생시킴으로써 성능 향상을 기대할 수 있다.

JSON

• JavaScript Object Notation의 약자로 자바스크립트의 객체 형태를 의미
• 사람과 컴퓨터가 이해하기 쉽고 용량이 작아 데이터를 전송할 때, XML이 아닌 JSON 형태를 주로 사용한다.
• 특정 언어에 종속되지 않고, 모든 언어에서 JSON 데이터를 핸들링할 수 있는 라이브러리를 제공한다.

(추가)CSS link 태그를 head 태그에 두어야하는 이유?

최적화된 웹사이트를 만드는데 적절하기 때문이다. 웹사이트가 로드될 때, HTML과 CSS는 동시에 파싱되어 각각 DOM과 CSSOM을 만들게 되는데, 웹사이트의 시각적 요소를 만들기 위해서는 두 가지 모두 필요하다. HTML과 CSS가 파싱되며 first meanigful paint를 하게 된다.
(first meaningful paint는 사이트의 성능 지표 중 하나이다.)
즉, 문서 최하단에 stylesheet link를 두는 것은 이런 성능을 떨어뜨리는 요인이 된다.

(추가) 반응형 vs 적응형

반응형

• 하나의 템플릿에서 미디어 쿼리를 사용하여 크기 변경 시 그 크기에 반응해서 작동하도록 하는 웹사이트
• 어떤 기기든 모든 컨텐츠를 다운로드 후 미디어 쿼리에 따라 조절하므로 속도가 느리다.

적응형

• 일정 화면 크기에 맞게 각각 다른 템플릿을 적용함으로써 각각의 화면 크기에 대응할 수 있는 웹사이트
• 여러 템플릿을 준비해두고 애초에 해당 기기의 정보를 서버 혹은 브라우저에서 감지하여 기기에 맞는 템플릿, 컨텐츠만 다운로드하므로 속도가 빠르다.