[React] WIL2 - DOM과 서버리스

DOM이란?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스를 말한다.
페이지 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.
HTML의 단위 하나하나를 객체로 생각하는 트리구조이다.
HTML은 설계도 자체이지만 DOM은 설계도를 바탕으로 실제로 화면에 보여지는 인터페이스이다.

DOM tree 확인해보기

내가 확인하고 싶은 브라우저 창에서 command+option+I를 눌러 개발환경으로 들어간다. console창에서는 javascript언어로 데이터를 브라우저로 전달할 수 있다.

DOM tree를 확인하기 위해서 console창에 document라고 치면 현재의 DOM 전체를 보여준다.

자식노드인 body에 접근하고 싶다면 document.body로 접근할 수 있다.

> document.자식노드

document.body.childNodes로 접근하게 되면 브라우저 창에서는 눈에 보이지 않는 것들이 같이 딸려 나온다.
여기에서 Node에는 3가지가 포함된다.

• Text : 텍스트 문자열
• Element : HTML 요소
• Comment : 주석

자식노드인 body의 자식태그를 가져오고 싶다면 document.body.children으로 접근할 수 있다.

그 안에서 "div"태그만 가지고 오고 싶다면 document.getElementByTagName("div")으로 접근할 수 있다.

getElementByTagName 외에도 getElementByID, getElementByName, ByClassName등 여러 방법으로 요소들에 접근할 수 있다.

DOM요소 추가하기

document.createElement("dom요소")로 dom요소를 생성한 후
document.body.appendChild(dom요소) document의 어디에 추가할지와 추가할 dom 요소를 작성해준다.

const new_div = document.createElement("div")
            new_div.style.backgroundColor = "red"
            new_div.style.width = "100px"
            new_div.style.height = "100px"
            //body에 붙여주지 않으면 화면에서 보이지 않음
            document.body.appendChild(new_div)

Dom요소에 EventListenr 추가하기

function sayHello(event){
                alert("Hello")
            }

const btn = document.getElementsByTagName("button")
            for(let i = 0 ; i < btn.length; i++){
                btn[i].addEventListener("click", sayHello)
            }

btn에 클릭 이벤트리스너를 추가하여 클릭하면 HELLO라는 얼랏이 띄워지게 하였다.

EventListener

click이외에도 여러가지 이벤트 리스너가 있다.

• click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
• mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
• mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
• mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus – HTML요소에 포커스가 갔을때 발생한다.
• blur – HTML요소가 포커스에서 벗어났을때 발생한다.
• keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
• keydown – 키를 누를 때 발생한다. (한 번 누르면 멈추지 않고 계속 이벤트가 발생된 상태로 유지된다.)
• keyup – 키를 눌렀다가 떼는 순간에 발생한다.
• resize – 브라우저 창의 크기를 조절할때 발생한다.
• scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않는다.
• change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

더많은 방법을 이용하기 위해서 아래 MDN사이트를 참고해보자.
MDN

서버리스란?

서버리스는 서버가 없다는 뜻으로 오해할 수 있지만 서버가 없는 것은 아니다.
서버리스는 사용자가 서버를 직접 관리할 필요가 없는 모델을 의미한다.
작업을 수행하기 위해 컴퓨터에 서버를 만들고, 이것을 통해 데이터를 관리하는 것이 아니다. ServerLess Computing은 두 가지가 있다. BaaS(Backend as a Servie) 혹은 FaaS(Function as a Service)에의해 데이터를 처리할 수 있다.

BaaS

BaaS (Backend as a Service)

리액트 4강에 나오는 Firebase가 대표적인 Baas이다. 서버와 관련된 백엔드 기능을 API를 제공한다. 보안성을 고려하여 인증 서비스, 추가 암호화 등을 관리하고, 점차 늘어나는 유저에 따라 같이 늘어나는 데이터 저장, 사용자 관리 등을 수행한다.

Faas

FaaS (Function as a Service)

대표적인 방식으로는 AWS Lambda, MS Azure Function 등이 있다.
FaaS 는 이벤트 기반 컴퓨터 실행모델이라고 한다. 프로젝트를 함수별로 구분하여 클라우드 서버에 등록하고, 사용자로부터 Request가 들어오면 필요한 함수가 실행되는데, 이 함수들이 실행되는 횟수 혹은 시간에 대하여 비용을 지불하는 방식이다.

참조
reference
reference