부트캠프 4Week

- 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(삭제)