수업 20일차
4주차의 마지막 날이다. 오늘은 엘리스 플랫폼에서 행맨 게임과, Axios대에서 알아보자 :)
이론
- 행맨 게임 : 알파벳을 하나씩 선택하여 주어진 기회 안에 단어를 맞추는 게임
- 초기에는 단어의 길이와 공백 정도의 정보만 주어진다.
- 알파벳을 하나씩 선택할 때마다, 그 알파벳이 들어 있는 위치가 드러난다.
- 단어에 들어있지 않은 알파벳을 선택하면 점차 행맨이 완성된다.
- 총 7번의 기회, 혹은 60초 안에 단어를 맞추지 못하면 패배한다.
-
컴포넌트 : 특정 UI의 영역을 담당하는 코드
Axios : 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리 -
Fetch 와 Axios 차이점
- Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않습니다.
하지만 Axios의 경우 간단하지만, 위의 사용법 설명처럼 설치 과정이 필요합니다. - Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어,
Axios가 Fetch보다 브라우저 호환성이 뛰어납니다. - Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능
등을 Axios에서 지원해줍니다.
그렇다면 역시 더 좋아 보이는 Axios를 무조건 사용해야 할까요? 그렇지는 않습니다.
axios는 외부 모듈로 따로 패키지 설치를 해줘야 사용할 수 있으니, 여의치 않다면 fetch를 사용해도 상관 없습니다.
자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택하는 것이 필요합니다.
- API : 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
행맨 게임
기회가 줄어들수록 단두대에 캐릭터가 생성된다.
기회가 다 줄어들면 게임에 졌습니다. 다시 시작하세요 출력
Axios
Axios는 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다. Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다.
Fetch와 Axios의 기능 비교
문법
Fetch는 두 개의 인자를 받습니다. 첫 번째 인자는 가져오고자 하는 리소스의 URL입니다. 두 번째 인자는 요청의 설정 옵션을 포함하는 객체로 선택적 인자입니다.
두 번째 인자로 설정 옵션을 넘기지 않을 경우, 기본적으로 GET 요청을 생성합니다.
fetch(url);설정 옵션을 넘기면 다음과 같이 요청에 대해 커스텀 설정을 할 수 있습니다.
fetch(url, {
method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, etc.)
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}),
});Axios의 문법도 비슷하나, 다양한 방법으로 요청할 수 있습니다.
axios(url, {
// 설정 옵션
});아래와 같이 HTTP 메서드를 붙일 수도 있습니다.
axios.get(url, {
// 설정 옵션
});fetch 메서드처럼 HTTP 메서드 없이 요청할 경우 기본적으로 GET 요청을 생성합니다.
axios(url);또, 두 번째 인자를 사용해서 커스텀 설정하는 것도 가능합니다.
axios(url, {
method: "get", // 다른 옵션도 가능합니다 (post, put, delete, etc.)
headers: {},
data: {},
});아래처럼 작성할 수도 있습니다.
axios({
method: "get",
url: url,
headers: {},
data: {},
});이제 Axios와 fetch가 응답 처리 시 어떤 차이가 있는지 살펴보곘습니다.
JSON 데이터 처리
아래 예제에서는 JSONPlaceholder라는 REST API에 GET 요청을 통해 투두 리스트의 아이템을 가져오며 fetch와 Axios의 차이점을 알아봅니다.
Fetch API를 사용하면 코드는 다음과 같습니다.
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then(console.log);fetch()는 .then() 메서드에서 처리된 promise를 반환합니다. 이 때는 아직 우리가 필요한 JSON 데이터의 포맷이 아니기 때문에 응답 객체의 .json() 메서드를 호출합니다. 그러면 JSON 형식의 데이터로 이행(resolve)된 또 다른 promise를 반환합니다. 따라서 일반적인 fetch 요청은 두 개의 .then() 호출을 갖습니다.
다음은 같은 요청을 Axios로 수행하는 코드입니다.
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있습니다. 응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있습니다.
다음과 같이 설정 옵션을 통해 responseType을 지정하여 기본 JSON 데이터 타입을 재정의 할 수도 있습니다.
axios.get(url, {
responseType: "json", // options: 'arraybuffer', 'document', 'blob', 'text', 'stream'
});자동 문자열 변환(stringify)
이제 JSONPlaceholder API를 사용해서 데이터를 전송해보겠습니다.
이를 위해서는 데이터를 JSON 문자열로 직렬화해야 합니다. POST 메서드로 JavaScript 객체를 API로 전송하면 Axios가 자동으로 데이터를 문자열로 변환해줍니다.
다음은 Axios를 사용해 post 요청을 수행하는 코드입니다.
const url = "https://jsonplaceholder.typicode.com/todos";
const todo = {
title: "A new todo",
completed: false,
};
axios
.post(url, {
headers: {
"Content-Type": "application/json",
},
data: todo,
})
.then(console.log);Axios로 post요청을 할 때 요청 본문(request body)으로 보내고자 하는 data는 data 프로퍼티에 할당합니다. 컨텐츠 유형 헤더도 설정할 수 있습니다. 기본적으로 axios는 Content-Type을 application/json으로 설정합니다.
Fetch API를 사용한다면 JSON.stringify()를 사용하여 객체를 문자열으로 변환한 뒤 body에 할당해야 합니다.
const url = "https://jsonplaceholder.typicode.com/todos";
const todo = {
title: "A new todo",
completed: false,
};
fetch(url, {
method: "post",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(todo),
})
.then((response) => response.json())
.then((data) => console.log(data));또한 Fetch를 사용하면 명시적으로 Content-Type을 application/json으로 설정해야 합니다.
