이번주엔 함수형 React component와 함수형 component에서 사용하는 useState, useEffect등의 Hook을 공부했고, React-Router로 url을 Component로 라우팅 하는 SPA 과제를 구현하였다.
그리고 숙련주차로 들어가 React에서 전역 상태관리를 가능캐하는 Redux와 서버리스 혹은 BAS(Back-end As Service)툴인 Firebase를 사용해 프로젝트를 만들고 있다.
DOM 이란?
JavaScript를 비롯한 다양한 프로그래밍 언어들이 동적으로 html document에 접근하고 제어 할 수 있게 도와주는 API, 표준 규약. 요소, 속성, 메소드, 이벤트가 객체의 형태를 띈다.
JavaScript(외 다른 프로그래밍 언어)는 본인과 연결된 HTML을 DOM의 형태로 인식
document는 DOM의 최상위 객체
html은 단순한 문서지만 브라우저가 해석 할 때 그 구조를 object형태로 만든다.
그 객체를 구성하는 것들을 node 라고 한다. 최상위부터 최하위까지 노드들은 트리구조로 뻗어나가는 형태이다.
찾아가서 선택하기 용이하다.
예) 빌딩 밖에서 사람들(HTML 요소)은 그냥 똑같은 사람들이지만 회사(브라우저)에 들어오는 순간 계급표(트리구조)에 따라 사장부터 말단직원으로 해석된다. 이게 Document Object Model. 외부 회사(다른 프로그래밍 언어)에서 특정 사원과 연결되기 용이하다. 이게 API의 은유.
property에 대하여: html에 속성으로 작성 할 수 있는것들은 모두 DOM 에서 .으로 접근 할 수 있다.
html은 문서파일 html에선 element, DOM은 객체 DOM에선 node object or element
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
document.getElementById("demo") : DOM 에서 id "demo"를 가진 node를 반환한다
.innerHTML = "Hello World!"; : 반환된 node의 innerHTML property가 "Hello World!" 를 가리키게
function getElementById(Id) {
return DOM 에서 Id를 가진 노드를 찾아서
}
function innerHTML(node) {
return node 의 innerHTML(key) property를 찾아서
}
someNode{
innerHTML : Some Old Value
}
someNode.innerHTML = "Hello World!";
someNode{
innerHTML : "Hello World!"
}
. 은 객체가 가지고 있는 property에 접근하는 문법
Document Object Model을 통해 JavaScript는 HTML document의 모든 nodes를 제어 할 수 있다.
JavaScript가 DOM을 통해 할 수 있는것
- 요소 변경
- 속성 변경
- CSS 스타일 변경
- HTML 요소와 속성 삭제
- 요소와 속성 추가
- html상의 이벤트에 반응
- html상에 이벤트 생성
DOM의 method와 properties
DOM상에서 요소들은 객체로 정의된다
- method : 행할 수 있는 것
- property : 접근하거나 부여할 수 있는 값
- document.getElementById("demo").innerHTML = "Hello World!";
- getElementById 는 method, innerHTML 은 property.
- document 객체의 method를 사용해서 가져온다.
- 알맞는 property를 선택해서 제어!
The HTML DOM "Object document"
JavaScript로 HTML 요소에 접근하고자 한다면 document 객체에 먼저 진입해야한다.
DOM CRUD
How to pointing DOM
- document.getElementById(idName)
- document.getElementsByTagName(tagname)
- document.getElementsByClassName(class-name)
Manipulating DOM
밑의 element란 찾은 선택자를 변수 element가 가리키는 것임. Chaining
- element.innerHTML = new html content
- element.attribute = new value
- 예)document.getElementById("myImage").src = "landscape.jpg"
- element.style.property = new style
Chaining method
- element.setAttribute(attribute, value)
요소를 추가하고 삭제하는 methods
- document.createElement(element)
- document.removeChild(element)
- document.appendChild(element)
- document.replaceChild(new, old)
- document.write(text)
- 예) document.write(Date());
이벤트를 정의하고 반응하는 method
- document.getElementById(id).onclick = function(){code}
HTML object(요소를 포함한 HTML의 모든 것)를 찾는 method는 너무 많아서 링크로 대체
html에서 JavaScript를 작성하고 DOM(Document Object Model)을 조작하자
작성법 : script 태그를 작성하고 document 객체의 함수를 사용
브라우저가 DOM을 생성하는 순서와 자바스크립트의 동작
- 브라우저는 url 주소로 http 통신을 request 한 후 html 문서를 response 받는다
- 받는 문서를 parsing 한다.
- DOM tree 구성.
- html에 작성된 코드의 순서대로 document 객체의 node 객체들을 생성한다.
- node object 생성
- 이 때 script가 document 속 아직 생성되지 않은 node 객체를 참조하려하면 null or undefined 상태로 오류를 발생시킨다.
결론 : JavaScript는 html 문서 그 자체를 제어하는 것이 아닌 브라우저가 parsing 하고 create 한 document 객체를 제어하는 것.
자바스크립트로 글자를 파랗게 파랗게~
자바스크립트와 프론트엔드
프론트엔드는 브라우저(UX/UI)단을 다룬다.
- html 문서는 서버에 저장되어 있다.
- html 문서는 http 통신으로 받아와서 브라우저에 의해 해석된다.
- style(css)는 html과 동시에 해석되고, DOM이 생성 될 때 동시에 적용된다.
- JavaScript 문서도 html 문서와 같이 서버에 저장된다
- JavaScript는 브라우저가 html 문서를 해석하고 document 객체를 만들고(html 문서를 DOM으로 만들고 나서) 나서 실행된다.
- 이때부터 JavaScript는 DOM의 형식을 가지고 리턴된 html 문서에 접근이 가능해지는것이다.
- 클라이언트가 브라우저에서 생성된 document 객체를 제어하는것은(클릭, 스크롤 등 여러 행위) 즉 JavaScript를 제어하는 것이다.
Document Object Model(DOM) Tree (문서 객체 모델)
HTML을 위한 표준 객체 모델로 브라우저의 API이다.
- HTML 요소를 Object로 생성한다.
- 모든 html 요소의 attribute를 Element. 으로 접근 가능하며 이를 '요소의 attribute를 property로써 구성한다'고 할 수 있다.
- html elements에 접근 하는 방법을 제공한다.(methods)
- html elements에 event property를 제공한다.
const hoverLi = document.querySelector('#hoverLi')
- 브라우저는 위와같은 일을 미리 해놓는다. DOM Tree 의 node의 id property를 참조해 JavaScript 내의 변수처럼 바로 접근 가능
- html : id="hoverLi"
- JS : 따로 변수 선언하지 않고 console.log(hoverLi) 실행하면
- result : li id="hoverLi"
- console.log(document.getElementById('hoverLi'));
- console.log(hoverLi); 의 결과가 같다.
- 굉장히 편리
HTML elements를 찾는 방법들
서버리스란?
서버리스는 BAS(Back-end As Service)라 부르기도 하는 웹 개발의 방법론 중 하나로써, 따로 Back-end를 개발하지 않고도 사용할 수 있게 만든 서비스, 또는 그 서비스들을 이용해 개발한 어플리케이션들을 총칭하는 단어이다.
'WIL' 카테고리의 다른 글
| 2022.2.2nd WIL (0) | 2022.02.15 |
|---|---|
| 2022.2.1st WIL (0) | 2022.02.07 |
| 2022.1.3rd WIL (0) | 2022.01.24 |
| 2021.12 4th WIL (0) | 2021.12.31 |
| 2021.12.3rd WIL (0) | 2021.12.20 |
