[멋쟁이사자처럼 11기] 8회차: DOM, JS 비동기 처리

1. DOM

• html 문서의 구조와 컨텐츠를 JS 에서 조작할 수 있게함
• 트리 구조: 루트 노드인 Document 객체로부터 시작 -> 계층 구조

왜 트리 구조여야하는가?

• html은 상하구조가 확실함

DOM 요소 선택

const button = document.querySelector("button");

-> 특정 노드를 뽑아서 변수에 할당해놓음

DOM 요소 수정

textContent:

• 어떤 텍스트가 들어가있는가

innerHTML:

• 어떤 구조인가

But, 바꾸려고하는 행위는 언제나 조심해야함 !

DOM 요소 생성

let paragraph = document.createElement("p");
paragraph.appendChild(p);

-> 실제로 보일 수 있도록

DOM 요소 삭제

---

2. JS 비동기 처리

• 한번에 여러가지 task를 진행할 수 있음
• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행

Client (사용자) ------- request -------> Server (가상 공간)

1. 인스타그램 피드를 위한 데이터 줘
2. 받아온 데이터 하나 당 하나의 네모를 만들어줘  --> 에러 !

Server에서 가공 후 렌더링해서 사용자에게 보여줌
서버야 데이터를 보내줘. But, 결과값이 언제 올지 모름!

따라서, Promise 사용

Promise 객체 기반

• resolve(): 성공했을 때 코드 작성
• reject(): 실패했을 때 코드 작성

---

비동기 처리 라이브러리

third-party library

• request -> AXIOS

내장 library

• Fetch API

AXIOS vs. Fetch API

AXIOS를 선호한다! 왜?

• handling JSON data: 어떤 타입의 데이터가 오던 JSON화 시켜줌
• Error handling: 유연함
• Request and response interceptor: Client가 Server로 요청을 보내기 전에 개발자가 원하는 로직을 수행한 다음에 보내줌
• Cancellation: 요청 보낸 후에 취소 가능
• Browser support

비동기 처리 async / await

Promise의 어려운 부분을 단순화함

Client (사용자) ------- request -------> Server (가상 공간)

async [
1. 인스타그램 피드를 위한 데이터 줘
await: 흐름 blocking
2. 받아온 데이터 하나 당 하나의 네모를 만들어줘  ]

---

*멋사 포스팅은 티스토리에 업로드 된 글의 백업입니다.
출처: Jenvelop log