⏱️
알잘딱깔센 JavaScript 비동기 프로그래밍 - 비동기 너 내 동기가 돼라/
📄
목차
📄

목차

Channel. 00 들어가며

Notion 링크, PDF 파일 및 QR 코드
머리말, 책 보는 방법, 저자소개
 

Channel. 01 비동기 처리

 
  1. 동기와 비동기 1.1. 동기 1.2 비동기 1.2.1 비동기식 실행의 예
  1. 자바스크립트의 비동기 2.1 자바스크립트 엔진이란? 2.2 브라우저 별 엔진 종류 2.3 자바스크립트 엔진 구조 2.3.1 메모리 힙 2.3.2 콜 스택 2.4. 자바스크립트는 어떻게 비동기 실행이 가능할까? 2.4.1 비동기 실행에서 브라우저의 역할 2.4.2 브라우저 Web API란? 2.4.3 렌더링 엔진이란?
  1. 이벤트 루프 3.1. 이벤트 루프의 동작 3.1.1 이벤트 루프의 동작 예제 3.2 브라우저 환경에서의 큐 3.2.1 큐(queue)란? 3.2.2 큐의 종류 3.2.3 마이크로태스크 큐란? 3.2.4 태스크 큐란? 3.2.5 태스크 큐 VS 마이크로태스크 큐 예제 3.3. 렌더링 엔진 3.3.1 렌더링 엔진이란? 3.3.2 렌더링 엔진과 이벤트 루프 3.3.3 렌더링 흐름 3.3.4 이벤트 루프에서 렌더링 엔진의 우선순위 3.4. setTimeout(fn, 0)을 활용한 예제
  1. 비동기 실행을 제어하는 방법들 4.1 비동기 흐름 제어란? 4.2 비동기 흐름 제어 방식
 

Channel. 02 콜백함수

 
  1. 콜백 함수 1.1 콜백 함수 정의 1.2 콜백 함수 예제 1.2.1 filter() 메서드에서 활용되고 있는 콜백 함수
  1. 콜백 함수 동기 처리 방식 2.1 동기 처리의 특징 2.2 동기 처리 예제
  1. 콜백 함수 비동기 처리 방식 3.1 비동기 처리의 특징과 한계 3.2 비동기 처리 예제 3.3 콜백 함수를 통한 비동기 처리의 한계 해결 방법
  1. 콜백 지옥 4.1 정의 4.2 콜백 지옥 예제 4.3 콜백 지옥 해결 4.3.1 기명 함수로 콜백 지옥 해결 예시
 

Channel. 03 Promise

 
  1. Promise 1.1 Promise의 생성 1.2 Promise의 상태
  1. Promise 처리 메서드 2.1 then 2.2 catch 2.3 finally 2.4 Promise chainning 2.5 promise 메서드 종합 예제
  1. Promise API 3.1 Promise.resolve 3.2 Promise.reject 3.3 Promise.all 3.4 Promise.allSettled 3.5 Promise.race
 

Channel. 04 제너레이터

 
  1. 제너레이터(Generator)란 1.1 제너레이터 함수 정의 1.2 제너레이터의 특징 1.2.1 함수 동작을 빠져나갔다가 다시 돌아올 수 있다 1.2.2 Generator 객체를 생성해 반환한다 1.3 제너레이터 객체 1.3.1 제너레이터 객체 메서드 1.3.2 제너레이터 객체 메서드 사용 예제
  1. 이터레이터와 제너레이터 비교 2.1 이터레이터와 이터러블 2.1.1. interable 2.1.2. iterator 2.2 이터레이터와 제너레이터
  1. 제너레이터의 비동기 활용 3.1 회사 결재 시스템 만들기
 

Channel. 05 async await

 
  1. async await 사용 이유 1.1 정의
  1. async 2.1 async function 사용 방법 2.1.1 함수 선언식 2.1.2 함수 표현식
  1. await 3.1 await 사용 방법 및 특징 3.2 promise.all 병렬 처리
  1. 예제 4.1 then 지옥을 탈출해 보자 4.2 실용 예제
  1. 에러 처리 5.1 try catch
 

Channel. 06 HTTP 요청

 
  1. 현대 인터넷의 공용어, HTTP 1.1 HTTP 트랜잭션 1.2 HTTP 메시지 1.2.1 HTTP 버전 1.2.2 요청 메시지의 구조 1.2.3 응답 메시지의 구조
  1. JSON 2.1 JSON 표기법 2.2 JSON.stringify 2.3 JSON.parse
  1. Ajax 3.1 Ajax의 등장 3.2 여러 비동기 기술의 비교 3.2.1 네트워크 탭으로 동작 확인하기 3.2.2 XMLHttpRequest와 jQuery 사용 비교 3.2.3 XHR과 fetch의 차이 3.2.4 fetch와 axios의 차이
  1. REST API 4.1 REST architecture란? 4.2 REST API의 구성 4.3 REST API 설계원칙 4.4 식별할 수 있는 리소스 (identification of resources) 4.5 REST API 실습 4.5.1 GET 요청 4.5.2 POST 요청 4.5.3 PUT 요청 4.5.4 PATCH 요청 4.5.5 DELETE 요청
 

Channel. 07 Fetch & Axios

 
  1. Fetch 시작하기 1.1 Fetch 등장 배경 1.2 Fetch 사용 이유
  1. Fetch 문법 2.1 Response 프로퍼티와 메서드 2.1.1 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 promise 설명 예제 2.1.2 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 then 함수 설명 예제 2.1.3 Response property에 대한 설명과 예제 2.1.4 Response method란?[2] 2.2 fetch() 메서드 2.2.1 fetch()의 기본적인 사용방법 2.2.2 Request() 생성자 2.2.3 fetch()의 options
  1. Fetch 사용해보기
      2. 실습 전 참고사항
      실습용 API 사이트 이용 방법 브라우저 콘솔창으로 성공 확인 방법 실습시 사용할 fetch()의 기본 구조
      3.1 GET 요청 3.1.1 GET이란? 3.1.2 사용방법 3.1.3 실습 예제 3.2 POST 요청 3.2.1 POST란? 3.2.2 사용 방법 3.2.3 실습 예제 3.3 PUT 요청 3.3.1 PUT이란? 3.3.2 PUT의 사용 방법 3.3.3 실습 예제 3.4 PATCH 요청 3.4.1 PATCH란? 3.4.2 사용방법 3.4.3 실습 예제 3.5 DELETE 요청 3.5.1 DELETE란? 3.5.2 사용방법 3.5.3 예제
  1. Fetch를 통한 API를 불러오는 방법 4.1 API란 무엇일까? 4.2 API 호출하기 4.3 GET, POST 사용해보기
  1. Fetch 성공 여부 확인 및 에러처리 5.1 Fetch 성공 여부 확인 5.2 에러 처리
  1. 요청객체를 생성하고 전송하기 6.1. Request() 생성자로 생성한 요청 객체를 인자로 전달 6.1.1 Request() 생성자 6.1.2 왜 써야할까?
  1. Axios 시작하기 7.1 Axios 사용 이유 7.1.1 Axios 정의 7.1.2 Axios 사용 이유 7.2 Axios와 Fetch의 차이 7.2.1 Axios와 Fetch에 대해서 7.2.2 Axios와 Fetch의 기능 차이 JSON 데이터 변환 자동 문자열 반환 7.2.3 Request 취소 및 Timeout 설정 7.2.4 브라우저 지원 7.2.5 Axios와 Fetch 중 어떤 것을 써야 할까 7.3 Axios 시작하기 7.3.1 Node.js 개발 환경에서 설치/사용 7.3.2 브라우저 환경에서 설치/사용
  1. Axios 문법 8.1 Axios API 8.1.1 요청 config 옵션들 8.1.2 Config 전역 기본값 설정 8.2 Axios 응답 스키마 8.2.1 요청했을 때 응답 스키마 종류 및 예제 [1]
  1. Axios 사용해보기 9.1 GET 요청 9.1.1 Axios의 GET이란? 9.1.2 사용 방법 9.1.3 실습 예제 9.2 POST 요청 9.2.1 Axios의 POST란? 9.2.2 사용 방법 9.2.3 실습 예제 9.3 PUT 요청 9.3.1 Axios의 PUT이란? 9.3.2 사용방법 9.3.3 실습 예제 9.4 PATCH 요청 9.4.1 Axios의 PATCH란? 9.4.2 사용방법 9.4.3 예제 9.5 DELETE 요청 9.5.1 Axios의 DELETE란? 9.5.2 사용방법 9.5.3 실습 예제
  1. Axios 성공 여부 확인하기, 에러 처리 10.1 Axios 성공 여부 확인하기 10.2 에러 처리
  1. 참고자료
 

Channel. 08 비동기 통신 실습 : 카카오 API를 활용한 로그인 기능 구현

 
  1. 비동기 통신을 위한 사전 지식 1.1 개요 1.2 OAuth 1.2.1 OAuth 2.0 1.2.2 OAuth 구성 요소 1.2.3 OAuth의 로그인 방식 1.3 카카오 로그인 흐름 1.3.1 카카오 로그인 과정의 프레임 1.3.2 카카오 로그인 과정의 세부적인 과정 1.3.3 카카오 로그인 과정의 도식적 표현 1.4 카카오 developers 1.4.1 애플리케이션 추가하기 1.4.2 Web 플랫폼 등록 1.4.3 Redirect URI 설정 1.4.4 카카오 로그인 동의 항목 설정
  1. API 실습 2.1. HTML & CSS 코드 2.2 Javascript 코드
 

Channel. 09 비동기 통신 실습 : 공공 API를 활용한 리스트 기능 구현

 
  1. 비동기 통신을 위한 준비 1.1 공공데이터 포털 사이트에서 API 사전 준비 1.1.1 공공데이터란? 1.1.2 공공데이터 포털 사이트 1.1.3 실습 전 주의사항
  1. API 실습 2.1 공공데이터 포털 사이트에서 데이터 사용 승인받기 2.2 공공데이터 샘플코드 활용방법 2.3 실습