- 220425 ~ 220426
오늘은 자바스크립트의 비동기식 처리에 관해서 배웠다. promise와 fetch에 대해 처음 알게 되었고, json 서버를 사용해서 json 데이터 가져오는 실습을 해보았다.
- AJAX : Asynchronous JavaScript And XML(비동기 자바스크립트) 의 약자로, 서버와 비동기적으로 통신할 때 사용하는 API이다. 백그라운드에서 비동기적으로 데이터를 통신해서 웹페이지를 동적으로 만들어준다.
- 자바스크립트는 싱글스레드(하나의 메인스레드) 런타임을 가진 동기식 언어이다.
- 자바스크립트는 브라우저에서 별도의 API를 사용하여 비동기적으로 작업을 처리할 수 있다.
- 자바스크립트에서 비동기 코드를 처리하는 모듈은 이벤트 루프(event loop), 태스크 큐(task queue), 잡 큐(job queue) 등으로 구성된다.
- 비동기 내장함수 ->
setTimeout(): 특정 코드를 바로 실행하지 않고 일정 시간동안 지연시킨 후 실행- promise의 객체는 new Promise()로 생성, 성공(resolve) 시에는 then 메서드, 실패(reject) 시에는 catch 메서드, 성공/실패 여부와 상관없이 모두 실행 시에는 finally 메서드
- Fetch 함수는 자바스크립트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해준다.
- JSON: Stands for JavaScript Object Notation의 약자
- json-server : 프로토타입 백엔드 서버
터미널에npx json-server --watch db.json입력하면 json 서버가 실행되고 해당 주소(http://localhost:3000)로 진입할 수 있다.fetch('http://localhost:3000/topics') // 주소 .then(res=>res.json()) // 1. 첫 번째 then에서는 데이터 타입을 결정한다. .then(data=>{ // 2. 두 번째 then에서는 데이터를 전달 받는다. console.log(data); // 서버가 준 데이터 사용 });
response.text()– 응답을 읽고 텍스트를 반환response.json()– 응답을 JSON 형태로 파싱JSON.parse(): string 객체를 json 객체로 변환JSON.stringify(): json 객체를 String 객체로 변환- REST API : 데이터를 서버에 제공할 때 사용할 수 있는 방법
- 220427 ~ 220428
오늘은 async/await에 대해서 배웠다. async/await를 쓰니 then/catch보다 코드가 훨씬 직관적이라 좋았다. 앞에 배운 내용들은 모두 async/await를 이해하기 위한 발판이었던 것이다!
- 콜백 함수
function timer(callback, time) { setTimeout(function() { callback(); }, time) } timer(function() {console.log('time out')}, 1000)
- then을 연쇄적으로 쓰다보면 콜백지옥과 같이 코드가 복잡해질 수 있다.
// 비동기적으로 작업 fetch('http://localhost:3000/topics') // fetch의 return은 response에 담겨있다 .then(function(response){ return response.json(); }) .then(function(topics){ // topics의 첫번째 항목의 id를 가져옴 let firstId = topics[0].id; // fetch를 연쇄적으로 => callback hell fetch('http://localhost:3000/topics/'+firstId) .then(function(response){ return response.json(); }) .then(function(topic){ console.log('topic', topic); }) });
- async await는 Promise를 활용한 비동기 코드를 동기적인 코드처럼 간결하게 작성하는 문법으로, then~catch보다 비교적 간결하다.
- await는 반드시 async 함수 안에서 실행된다. await는, then 메서드를 체이닝한 것처럼 순서대로 동작한다.
- async는 항상 Promise를 반환한다. 그래서 부를 때는 await를 붙여서 부른다.
- async await를 사용하면 try-catch 구문을 이용하여 에러를 처리할 수 있다.
response = await fetch('http://localhost:3000/topics')// 동기적으로 작업 response = await fetch('http://localhost:3000/topics'); topics = await response.json(); console.log(topics); response = await fetch('http://localhost:3000/topics/'+topics[0].id); topic = await response.json(); console.log(topic);
Promise.race를 하면 실행이 가장 빠른 결과를 반환console.time('race') // timer 기능 result = await Promise.race([timer(1000), timer(2000), timer(3000)]); console.log(result); console.timeEnd('race') // race가 끝날 때까지 측정 // 1000 -> 가장 빨리 실행된 1000 반환 // race: 31939.361083984375 ms -> 걸린 시간
Promise.all을 하면 모두 다 동시에 실행하고 모두 다 실행이 완료되면 모두 다 반환console.time('race') result = await Promise.all([timer(1000), timer(2000), timer(3000)]); console.log(result); console.timeEnd('race') // [1000, 2000, 3000] -> 3000까지 모두 다 실행이 끝난 후에 다 반환 // race: 3008.490234375 ms -> 걸린 시간
- 220429
오늘은 행맨 게임 만들기 실습과 Axio에 대해서 간단하게 배워보았다.
Axio는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이며, Promise를 기반으로 만들어진 라이브러리이다.- Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않지만, Axios는 설치 과정이 필요하다.
- Axios가 Fetch보다 브라우저 호환성이 뛰어나다.
- Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다.
- Axio의 CRUD -
POST(생성)/GET(조회)/PUT(수정)/DELETE(삭제)
