1. DOM
< 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 비동기 처리
< 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. 받아온 데이터 하나 당 하나의 네모를 만들어줘 ]