Section 1 - 16일차

노태경·2021년 4월 26일

TIL algorithm

SEB-Section 1

목록 보기

19/30

1. Algorithm Basic 1, 2

자세한 내용은 쓰면 안될것 같아서 간략하게!
입력받은 배열의 요소를 이용하여 객체를 리턴
어려움 없이 풀었음
연이율 관련
원금을 입력받지 않고, 연이율이 해당 조건이 되는 값을 리턴해야했는데, 입력받을 원금이 없어서 당황스러웠다. 원금을 입력받는 코드를 짜보았고, 불피요한 요소와 원금을 대체시킬려고 하다보니 코드가 완성되었다. 대학교 다닐 때 배운 누산기가 생각나는 코드였다.

2. DOM

Document Object Model
DOM은 프로그래머 관점에서 바라 본 HTML
DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있다
DOM은 document 객체를 통해 HTML에 접근한다
BOM은 window 객체를 통해 브라우저에 접근한다
HTML, Javascript는 트리구조
HTML에 script를 선언하는 2가지 방법
1.<head>
2.<body>
웹 브라우저는 HTML을 parsing 중 script를 만나면 script fetch, execution이 끝날 때까지 멈춘다.
<head>에 script를 선언했을 경우, HTML 요소를 가져오려하면, HTML body부분을 아직 parsing 하지 않아서 요소를 못가져올 수 있다.
console.dir는 DOM을 객체의 모습으로 출력
.children 자식
parentElement, parentNode 부모태그
트리 구조
부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복된다
CRUD(Create, Read, Update, Delete)
createElement('div') div태그를 만든다
createDocumentFragment DOM 노드를 추가할 수 있는 비어있는 Fragment를 만든다

와 같이 사용될 수 있다.(MDN 출처)
.append() 마지막 자식 뒤에 삽입
.appendChild() 한 노드를 특정 부모 노드의 자식 리스트의 마지막 자식으로 붙인다
차이점
append()는 DOMString 객체도 허용하는 반면 appendChild는 Node 객체만 허용한다

위와 같이 문자열도 사용할 수 있다
append()는 리턴값이 없는 반면, appendChild는 append된 노드 객체를 리턴한다

append()는 여러 객체나 스트링을 append 할 수 있으나, appendChild는 오직 하나의 노드만 append할 수 있다
prepend()는 첫 번째 자식 앞에 요소를 삽입한다.
querySelector() 해당하는 첫번째 요소를 가져온다
querySelectorAll() 해당하는 모든 요소를 유사 배열로 가져온다
getElementById 등을 사용할 수도 있으나, 오래된 방식, 호환성을 생각한다면 이런 방식도 알아야함
classList.add() 요소에 class추가
Element.setAttribute("name","helloButton") 요소의 name속성을 helloButton으로 설정한 것
innerText와 textContent의 차이
textContent는 요소를 포함한 모든 요소의 내용을 가져온다
innerText는 텍스트의 렌더링 된 모양, 사람이 읽을 수 있는 요소만 표시

innerText는 HTML 구문분석을 하기에 보안상 위협이 있다, XSS 공격
.innerHTML"<div>hello</div>"
.textContent = "hello"
remove(),removeChild()
또는 .innerText = ''를하면 모든 엘리먼트를 한번에 지울수도 있다.
하지만 보안상 위험이 있기에, removeChild를 통해 자식 엘리먼트를 지정해 삭제
while(element.firstChild){
element.removeChild(element.firstChild)
}
첫번째 자식이 존재한다면 첫번째 자식을 계속해서 지우는 반복을 할 수도 있다.
remove()는 노드를 메모리에서 삭제
removeChild()는 노드를 삭제하는 것이 아닌 DOM 트리를 해제하는 것, 삭제한 노드 참조를 반환
Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 태그 노드만을 가리킨다.
nodelist는 유사 배열이므로 reduce를 사용할 수 없고, forEach사용
Array.from은 유사 배열 객체를 얕게 복사해 Array 객체를 만든다.
chlidren은 텍스트 노드를 제외, childNodes는 텍스트 노드를 포함한다
이벤트에 함수를 할당하기 위해서는 함수의 값을 할당하는 것이 아닌 함수 자체를 할당해야 한다.
.onclick = 함수() X
.onclick = 함수 O
date-user-id <> dateset.userId // dataset 속성
Nodelist vs HTMLCollection
HTMLCollection은 문서 내에 순서대로 정렬된 노드의 컬렉션, 유사배열, forEach, map 등 사용불가, getElement~ 사용시 리턴되는 형태
Nodelist는 chideNodes나 querySelectorAll 등을 사용했을 때 반환되는 노드의 모음, 유사배열, forEach 사용가능
유사배열은 map, reduce 등 Array 메소드 등을 사용할 수가 없기에 배열형태로 바꿔야 한다.
childNodes는 DOM을 실시간으로 반영, querySelectorAll은 DOM이 변경되어도 collection 내용에 영향을 주지 않음