고정 헤더 영역
상세 컨텐츠
본문
문서 객체 모델(DOM - Document Object Model)이란?
문서 객체 모델은 우리가 HTML 문서에 접근하기 위한 일종의 인터페이스(interface)입니다.
쉽게 설명해서 <html>이나 <body>와 같은 html문서의 태그들을 Javascript로 사용하거나 수정할 수 있도록
객체(object)로 만든 것을 문서 객체라고 합니다.
즉, DOM은 인터넷 브라우저가 html을 인식할 수 있는 모습으로 보여주는 것입니다.
DOM Tree
HTML도 태그와의 관계에서 부모와 자식의 관계가 있듯이, DOM도 자식과 부모의 관계가 있습니다. 이를 나무에 비유해서
DOM Tree라고 부릅니다.
우리가 HTML에서 태그를 요소라고 부르듯이 DOM에서는 이를 node라고 부르고 각 node와의 관계를 마찬가지로
부모 node와 자식 node 그리고 같은 위치의 node는 형제 node라고 부르며 최상단의 html태그는 root(node)라고 부릅니다.
나중에 각 node에 접근하여 속성을 가져오거나 변화시키시 위해서는 각 node와의 관계를 잘 이해하는 것이 중요합니다.
HTML 요소와는 다르게 DOM의 node는 2가지의 타입을 가지고 있는데요.
하나는 요소노드(Element Node)와 다른 하나는 텍스트노드 (Text Node)라고 합니다.
(위 그림에서 <a>,<title>과 같은 태그들은 요소노드, "my link" , "my title"이라고 텍스가 적혀있는 것을 텍스트 노드라고 합니다.
또한 텍스트노드 또한 요소 노드의 자식이기도 합니다. 텍스트 노드는 다른 자식노드를 가질 수 없어 잎사귀에 비유해 leaf node 라고도 합니다.)
DOM의 사용방법
우리는 어떻게 하면 DOM을 활용할 수 있을까? HTML은 정적인 문서입니다. 한번 작성하면 스스로 변화지 않고
저희가 필요할 때 마다 수정을 해야하죠.
이때, 저희는 Javascript를 활용하죠. Javascript를 활용해서 HTML에 접근할 때 DOM을 사용하게 됩니다.
DOM에 접근하여 HTML 요소들을 건드리기 위해 <h1>과 <p>를 만들고, 스크립트를 통해 DOM의 document 객체에
title이라는 클래스를 가지고 있는 요소노드를 찾았습니다. 이것을 우리는 title이라는 이름을 붙여줍시다.
title이 어떤 내용을 가지고 있는지 한번 살펴봅시다.
콘솔을 찍어보니 여러 내용들이 나오네요.
그중에서 childNodes를 보면 1개의 자식 노드를 가지고 있고, 그것은 텍스트라고 알려주기도 합니다.
그러면 이제 저희 이걸 수정해보도록 합시다.
이런식으로 우리는 DOM의 각각의 노드에 접근하여 HTML을 원하는대로 수정하거나 추가 또는 제거할 수도 있습니다.
서버리스(SERVERLESS)란?
서버리스라는 이름만 들어보면 누구나 "아! 서버가 없는거구나?" 혹은 "백엔드가 없구나?" 라고 오해 할 수 있습니다. (저두요...)
사실 그런 의미에 서버리스는 아닙니다. 서버없이 동적 앱이나 웹이 돌아갈 순 없으니깐요!
여기서 말하는 서버리스는 우리가 직접 서버를 만들고 관리하지 않아도 된다는 것을 의미합니다.
개발공부를 시작하기전에 컴퓨터관련 이미지를 상상해보면 서버는 거대한 컴퓨터들이 모여있는 어둡고 차가운 방안을 상상하게 됩니다.
그런 모습을 봐와서 그런지 서버관리하는 물리적인 컴퓨터와 공간이 무조건 필요하다고 생각했습니다.
근데 이것을 언제부터인지 대신해주는 것들이 등장하기 시작했습니다. 아마존의 EC2를 시작으로 말이죠. 우리가 직접 서버를 유지할
컴퓨터와 공간을 가지고 있지 않아도 돈만 내면 아마존의 서버를 우리가 사용할 수 있게 된 것이죠 ! 그러면 우리는 하루 종일 컴퓨터를
켜고 있지 않아도 되고, 중간에 우리의 서비스를 꺼버리는 실수를 범하지도 않게 되는 겁니다. 뿐만 아니라 갑자기 우리 서비스의
사용자가 많아져서 트래픽이 몰릴 때 추가적으로 서버의 메모리를 늘릴 필요 없이 그것마저 알아서 처리해줍니다.(돈만 내면!)
오해는 하지마세요! 이건 단지 물리적인 컴퓨터와 같이 하드웨어적인 것들만 빌리는 거지, 실제로 운영되는 서버를 빌리는건 아닙니다.
서버를 만들고 보안도 신경쓰고 데이터도 백업하는 등 업데이트 및 관리는 스스로 해야 합니다.
그렇다면 결국 컴퓨터와 같은 하드웨어만 빌리고 소프트 웨어 관리는 내가 해야하고 다른 회사들의 컴퓨터를 24시간 돌리는거니깐
돈이 많이 걱정됩니다.
그래서 나온 것이 지금의 서버리스입니다. 서버에 백엔드 전부를 올려서 하루종일 관리하는 것이 아닌, 백엔드를 각각의 함수로 나누어서
빌린 서버에 올리는 겁니다. 이렇게 되면 서버가 24시간 돌아가는 것이 아닌 요청이 들어오면 서버리스 서비스를 제공하는 회사에서
들어올때만 요청을 수행할 동안만 켜지도록 하고 요청을 마무리하면 다시 멈추게 하는 것 입니다.
이렇게 되면 내 서비스를 사용하는 사용자가 많은 적든 동일한 금액을 내는 것이 아닌 사용자만큼의 돈을 지불하게 되고,
즉, 24시간 동안 서버가 작동할 필요가 없이 필요할 때만 사용하니깐 경제적으로 매우 저렴하게 되었죠.
그렇다고 서버리스가 무조건 좋은건 아닐껍니다. 예를 들어서 서버가 항상 동작하고 있는 것이 아니니깐, 갑자기 요청이 들어오면 다시
서버를 깨울 시간이 필요해서 24시간 동작하는 서버에 비해 조금 느릴 수 있습니다.(사실 우리가 크게 느리다고 느끼는 정도의 느림은 아님)또한, AWS, Azure, Google 등 제공사에 대한 강한 의존성을 가지게 됩니다. 그럴 일은 없어 보이지만 이들이 망하면 내 서비스도 같이 힘들어집니다.
거대한 유저를 가지고 이미 훌륭한 인프라를 가지고 있는 회사에서는 이러한 서버리스 서버스가 필요 없을 수 있겠지만, 저희와 같이 아직 공부하는 학생들이 무엇을 만들어보고 싶고, 활용할 수 있는 금전적 상태가 여유롭지 못하다면 이러한 서비스를 사용해보는 것도 흥미로워 보입니다!
'항해 99' 카테고리의 다른 글
| 항해 99 4주차 회고 - 라이프 사이클, React hooks (0) | 2021.11.28 |
|---|---|
| 항해 99 Day 24 - Module (0) | 2021.11.24 |
| 항해 99 Day 18 - ! [rejected] main -> main (fetch first) (0) | 2021.11.19 |
| 항해 99 2주차 회고 - ES6 (0) | 2021.11.14 |
| 항해 99 Day 13 - 알고리즘 테스트 (0) | 2021.11.14 |
댓글 영역