DOM
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
오우.. MDN 문서를 그대로 가져와서 다시 읽어도 무슨말인지 이해가 안된다.
우연치 않게 벨로그 들어와보니 나만 친한.. 나는 그분들 알고 그분은 내존재도 모르겠지만 무튼 그런분이 DOM 관련글을 써주셔서 보고왔다.
출저 - https://velog.io/@teo/dom#domdocument-object-model
여기서 객체란 html, body 같은 태그를 자바스크립트가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다.
모델이란 문서 객체를 인식하는 방식이라고 생각 할 수 있다.
넓은의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하고
좁은의미로는 document객체와 관련된 객체의 집합을 의마할 수도 있다.
밑의 사진이 DOM트리 모양이다.
돔 트리
이름 그대로 하나의 뿌리에서 (root node) 시작된다.
윗쪽의 노드를 부모(parent) 아래쪽 노드를 자식(child)라고 한다.
자식이 없는 노드를 leaf node(잎)라고 한다.
노드(node)
트리 구조에서 root노드를 포함한 모든 개개의 개체를 node라고 표현한다.
각각의 태그뿐만 아니라 태그 안의 텍스트나 속성들도 모두 노드에 포함한다.
이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 합니다.
자바스크립트로 문서객체를 생성한다는 것은 무슨의미일까?
문서객체가 생성되는 방식은 두가지로 나누어 볼 수 있다.
하나
웹 브라우저가 HTML 페이지에 적혀있는 태그를 읽으며 생성하는 것
이런과정을 정적으로 문서 객체를 생성한다고 말한다
둘
반대로 원래 HTML페이지에 없던 문서객체를 자바스크립트를 이용해서 생성할수 있다. 이런 과정을 동적으로 문서객체를 생성한다고 말한다.
출저 - https://m.blog.naver.com/magnking/220972680805
돔이 아닌것은?
- DOM은 HTML이 아니다.
- DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않다. DOM이 원본 HTML소스와 다를 수 있는 두가지 케이스가 있다.
- 작성된 HTML문서가 유효하지 않을때
- 자바스크립트에 의해 DOM이 수정될 떄
- DOM은 브라우저에서 보이는 것이 아니다.
- 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다.
- 렌더 트리는 오직 스크린에그려지는 것으로 구성되어 있어 DOM과 다르다.
- 렌더링 되는 요소만이 관련 있기 때문에 시각적으로 보이지 않은 요소는 제외된다(ex. display:none)
- DOM은 개발도구에서 보이는 것이 아니다.
- 개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공한다.
- 그러나 DOM에 없는추가적인 정보를 포함한다.
출저 - https://wit.nts-corp.com/2019/02/14/5522
서버리스
서버리스(serverless)란?
-
개발자가 서버를 관리할 필요 없이 어플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델이다.
..무슨말인지 잘 모르겠다
-
서버리스 모델에도 서버가 존재하지만 어플케이션 개발에서와 달리 추상화 되어 있다.
쉽게 말해 무언가 개발하고 배포를 하기 위해서 서버가 필요하지만 물리적인 서버를 어떤 기업(aws, googole 등)에서 서버역할을 할 수 있는 것을 제공하고 우리는 그것을 활용해 서버관리의 시간을 세이브할 수 있다.
일정금액을 지불하고 서버관리를 기업에 맡기는 것
장점은 위에 써있듯 서버관리를 따로 해줄필요가 없다는것
정전이 나거나 트래픽이 높아지는데 서버가 버티지 못해 내가 직접 관리하지않아도 된다는 것
최고의 장점은 24시간 내내 서버가 깨있지 않고 요청이 들어오면 그때마다 서버에서 클라이언트로 응답을 해준다. 이런 기능때문에 큰돈이 나가지지않는것이 장점이다.
내가 수행한 만큼 값을 지불하는점
단점은 시간차이가 있다. 일반 서버는 24시간 내내 돌아가며 요청을 확인 할수 있지만 서버리스는 요청이 들어와야 실행되기때문에 미세하더라도 시간차이가 있다.
서버제공자에서 너무 의지 하게 된다.
무슨 기술이든 장단점이 존재한다.
서버리스는 나처럼 처음 시작하는 이에게 작은 프로젝트를 배포할 수 있게 도와줄 수 있다.
항해99 3주차 후기
3주차에 배웠던 내용.
리액트를 사용하여 페이지 만들어보기
jsx문법과 컴포넌트 각각의 리액트훅 등을 사용하여 과제를 만든다.
숙련주차 과제는 각 값들을 잘 보관하여 사용할 수 있게 도와주는 리덕스를 적용하여 과제를 진행한다.
리덕스 전까지의 리액트 사용법은 아직도 익숙하지 않다.
강의 속 코드를 보면서 이럴때 쓰는거였지 하며 사용한다..
이방법들이 맞는지 아직까지 확신이 없다.
리덕스를 배우면서 느낀점은 이코드가 어디서 작성했던 코드지..라는 생각이 자주 들만큼 비슷한 네이밍을 가진코드들이 많다.
이건 내코드니 내가 실수한 일이겠지만..
금요일과 토요일 들은 강의들은 다 이해하지 못했고 큰 흐름도 그림한장만 나올만큼 적게 기억남는다..
조금더 많은 자료들을 만나보고 겹치는부분들이 어떤것인지 파악하면 이해가 잘될거 같다.
리액트 숙련주차도 화이팅하자
