[JavaScript]DOM, Event, 비동기 처리

JavaScript

Browser APIs

웹 브라우저에 내장된 API, Javascript를 이용해 Browser API 사용 가능

DOM

문서 객체 모델(Document Object Model)

문서의 구조화된 표현을 제공, html 문서를 구조화해서 각 요소를 객체로 취급

• window: DOM을 표현하는 창, 각 탭
• document: 브라우저가 불러온 웹페이지

//요소 선택
document.querySelector(요소)
document.querySelectorAll(요소)

//태그 생성
document.createElement(tagName)

//Node객체와 컨텐츠 표현
htmlElement.innerText

//Node를 다른 Node의 자식으로 삽입 및 삭제
parentNode.appendChild(childNode)
parentNode.removeChild(childNode)

//요소의 값 반환, 요소의 값 설정
element.getAttribute(attributeName)
element.setAttribute(name, value)

Event

대상에 특정 event가 발생했을 때 할 일을 설정

EventTarget.addEventListener(type, handlerfunction)

비동기 처리

모든 일을 순서대로 처리하는 동기와는 다르게 작업 시작 후 결과를 기다리지 않고 다음 작업을 처리하는 것

1. 모든 작업은 Javascript Engine의 Call Stack으로 들어간 후 처리됨
2. 오래 걸리는 작업은 Web API에서 별도로 처리됨
3. Web API에서 처리가 끝난 작업들은 Task Queue에 순서대로 들어감
4. Event Loop는 Call Stack이 비어있는 것을 확인하며 Call Stack이 빈다면 Task Queue의 가장 앞에 있는 작업을 Call Stack으로 보냄

// 콜스택으로
console.log('Hi')
// 콜스택-Web API로
setTimeout(function myFunc() {
    console.log('Good')
}, 1000)
// 콜스택으로
console.log('Bye')
// 1초 경과 후
// Web API에서 처리된 console.log('Good')이 task queue에 삽입, Call stack이 비어있는 것을 확인 후 call stack으로 보내짐

Axios

Javascript HTTP 웹 통신을 위한 라이브러리

//기본 구조
    axios.get('요청할 URL')
    .then(function(response) {}) // 성공시 호출할 콜백함수
    .catch(function(response) {}) // 실패시 호출할 콜백함수