2월 17일 (월)

오늘 배운 것

• 비동기, 콜 스택, 콜백 큐, 이벤트 루프 공부하기

• 비동기 안에서의 클로저 -> 제대로 알아보기

• fetch API

지난주 코드 리뷰

아마존 Card UI

• 시간이 남으면 모바일 터치 UI도 해보기

• 클래스를 화면 단위로

• 의미있는 클래스 설계, 클래스 다이어그램

• 설계를 꾸준히 연습하기

• 다른 오픈소스의 커밋로그 찾아보기

• 오픈소스의 변수명들 읽어보기 -> 사람이 이해할 수 있는 코드 짜기

• 모든 함수에 인자로는 객체로 넘기는게 좋음. -> key:value / 순서가 바뀌어도 상관 없으므로

• 디버깅

Object.assign()

객체의 디폴트 값을 세팅할 때 사용하면 좋다. 알아보기

forEach(), map(), filter(), reduce()

자주 사용해보기. 함수형 프로그래밍의 기초

DOM Caches

const parentNode = event.target.parentNode

자주 사용해야할 DOM 엘리먼트의 경우, 로컬 변수에 DOM을 저장해두면 똑같은 일을 반복하지 않을 수 있다. DOM에 접근을 최소하하기

나만의 범용 유틸리티 만들기

나만의 라이브러리를 만들어가는 첫번째 과정!

function $(selector, target) {...}

// 객체 리터럴로 만든 유틸리티
// namespace를 활용하기 위해서 -> 최근엔 module로 많이 대체됨
const $ = {
  dom : {},
  style : {
    setcss() {},
    setTransform() {},
    ...
  }
}

비동기

call stack, callback queue, event loop 정리하기

JSON, fetch API, Promise

XHR

여전히 가장 많이 쓰이는 방식. 이제 fecth API 로 바뀌는 추세

fetch API

fetch(...).then(...).then(...);
console.log("Hello");

종류	동기	비동기
1	fetch()	서버 요청
2	then()	콜백등록(1)
3	then()	콜백등록(2)
4	console.log()	-
5	-	fecth 서버 응답
6	-	콜백반환(1)
7	-	콜백반환(1)의 값으로 콜백반환(2)

이번주 목표

• 동기 / 비동기

• fetch 요청방법

• JSON

• (+) Promise 패턴