2022. 3. 2. 18:01ㆍ네트워크
1. DOM (Document Object Model)
HTML로 작성된 웹 요소에 자바스크립트가 접근할 수 있도록 브라우저가 변환시킨 객체
- 문서 객체 : <html>, <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 함
- 모델 : 문서 객체를 '인식하는 방식'
2. 어떻게 생겼을까?
하나의 root node (html 루트요소)에서 시작됩니다.
그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는
흔히 위의 root node에서 아래로 퍼져나가는 형태로 그립니다.
tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 합니다.
① Document Node
트리 최상위 노드로 DOM Tree의 시작점이다.
② Element Node
HTML 요소를 표현하며, 부자 관계를 가진다.
③ Attribute Node
HTML 요소의 속성을 표현하며, 자식이 아닌 해당 요소의 일부로 표현된다.
④ Text Node
말 그대로 HTML 요소의 텍스트를 표현하며, 요소의 자식이지만 자신의 자식 노드를 가질 순 없다.
3. node란 무엇인가?
tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 합니다.
head, body, title, script, h1, HEADER-1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속합니다.
4. JavaScript로 문서객체를 생성한다는 것은 어떤 의미인가?
문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다.
우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 겁니다.
이런 과정을 정적으로 문서 객체를 생성한다고 말합니다.
단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것
반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다.
이런 과정을 동적으로 문서객체를 생성한다고 말한다.
따라서 JavaScript로 문서객체를 생성한다는 것은
처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것
5.웹 페이지가 그려지기 까지
1. 첫번째로는 HTML을 HTML Parser를 이용하여 DOM Tree화 시키는 작업을 합니다.
2. 두번째로는 CSS를 파싱하여 스타일 규칙을 생성합니다.
이 스타일 규칙은 향후에 DOM과 합쳐지게 됩니다.
3. 세번째로 DOM Tree와 스타일 규칙을 합쳐 Render Tree라는 것을 만들게 되는데,
이는 웹이 어떻게 생겼는지 설명하는 규칙을 담고있는 형상을 나타냅니다.
이 Render Tree를 이용하여 이제 실제로 화면을 그리게 됩니다.
4. 네 번째로 Layout이라는 작업을 수행하는데요
이 작업은 화면 내에서 요소들의 위치를 결정하는 작업을 합니다.
5. 마지막으로 요소의 위치까지 결정되었다면 Painting 작업을 거칩니다.
이 Painting작업은 Layout 작업에서 결정된 요소들의 위치값을 이용하여 실제로 화면에 UI요소를 그립니다.
우리 웹은 이런 과정을 거쳐 화면에 표시됩니다.
그럼 만약, 이렇게 화면에 나타난 웹에 클릭이나 드래그로 인해서 변화가 일어나면 어떻게 될까요?
레이아웃에 변화가 일어났다면, 4번 Layout 과정이 다시 일어나게 되며 이를 Reflow라고 부릅니다.
만약 CSS Style에 변화가 일어났다면 5번 Painting 과정이 다시 일어나게 되며 이를 Repaint라고 부릅니다.
이 두개의 작업은 브라우저에게 많은 연산량을 요구하는 작업이기 때문에 많이 발생해서 좋을 일은 없습니다.
6. Virtual DOM : 실제 DOM의 복사본
virtual DOM은 실제 DOM을 너무 많이 업데이트하는 비효율적인 연산을 줄이고자 만들어진 가상의 DOM입니다.
장점
실제 DOM을 조작하는 것은 느리지만, virtual DOM을 조작하는 건 꽤 빠르다.
그 이유는 virtual DOM은 노드의 변경사항만을 DOM에서 변경하지, 화면을 그리지 않기 때문이다.
virtual DOM을 사용하면 데이터 변경이나 DOM 구조 변경에 대한 브라우저에서의 비효율적인 재렌더링 작업이 줄어든다.
7. react 높은 자유도
라이브러리
소프트웨어 개발 시 사용되는 프로그램의 구성 요소를 일컫는 말 입니다.
심플하게 이야기 하자면, 특정 기능을 하는 함수들을 모아놓고 불러다가
사용할 수 있도록 만들어 놓은 것 이라고 할 수 있습니다.
여기서 가장 중요한 건 라이브러리는 도구에 비유할 수 있다는 점 인데요.
도구는 우리를 통제하지 않습니다.
예를들어 망치나 톱 삽같은 도구를 든다고 해서 우리가 그 도구에 걸맞는 움직임만 해야하는 건 아니잖아요?
망치는 못을 박는 일에, 톱은 무언가를 잘라내는 일에, 삽은 무언가를 파는일에 특화되어있을 뿐이지
그것을 꼭 해야한다는 규칙은 없습니다.
라이브러리는 도구와 같아서 무언가에 특화 되어있을 뿐, 우리가 어떻게 사용하던 우리의 자유대로 사용하면 됩니다.
따라서 코드의 흐름을 사용자가 직접 통제한다는 특징이 있습니다.
프레임워크
표준 구조 라는 걸 구현하는 라이브러리들의 모임 이라고 할 수 있습니다.
프레임워크라는 것 자체가 어플리케이션의 "표준 구조"를 구현하는 것에 목적을 두기 때문에
우리는 이 표준 구조에서 벗어난 코드를 작성 할 수 없습니다.
마치 자동차나 비행기 배와 같다고 볼 수 있는데요
우리가 자동차를 타고 하늘을 날 수 없구요
비행기를 타고 고속도로를 달릴 수 없고 배를타고 산을 올라갈 수 없듯이
이 프레임워크는 정해진 규칙에 따라야만 한다는 제약이 있습니다.
가장 차이가 큰 부분은 React는 라이브러리이고, Vue나 Angular는 프레임워크라는 점 입니다.
따라서 React는 프레임워크인 Vue, Angular보다 더 높은 자유도를 가지고 있습니다.
사용자가 직접 코드의 흐름을 통제할 수 있기 때문입니다.
높은 자유도를 가지면 여러가지 이점이 있습니다.
내가 원하는대로 입맛대로 커스텀하여 모든 상황에 대처하기에 더 유연할 수 있습니다.
반면 프레임워크는 대비하지 못한 상황을 해결하는데에 복잡하고 어려운 해결책을 만나게 될 수 있습니다.
물론 자유도가 높은것은 장점만 있는 것은 아닙니다.
Vue의 경우 프레임워크에서 제안하는 방식으로 코드를 작성해야 하기 때문에,
개발자들 간의 코딩 스타일에 통일성이 생깁니다.
반면 리액트는 자유도가 높아 개발자마다 코딩 스타일이 각각 달라
이것을 통일하기 위한 별도의 써드파티를 필요로 합니다.
또한 Vue의 경우 Vue에서 제공해주는 문법만 알아도 어느정도 잘 동작하는 걸 볼 수 있기 때문에
자바스크립트를 잘 몰라도 대충은 배워서 써먹을 수 있습니다. 즉 러닝커브가 낮아 입문이 쉽고 빠릅니다.
반면 React는 모든것이 자바스크립트이기 때문에 자바스크립트를 잘 다루지 못하면 입문 자체도 어려울 수 있습니다.
'네트워크' 카테고리의 다른 글
| DNS - Domain Name System (0) | 2022.05.04 |
|---|