1주차 - 서버와 클라이언트 통신
서버 : 리소스를 제공(serve)하는 곳
클라이언트 : 리소스를 사용하는 앱
--> 클라이언트와 서버는 요청(request)와 응답(response)를 주고받는 관계이다.
서버와 클라이언트가 통신하기 위해선 서로 지켜야 할 약속 같은게 있다.
웹 어플리케이션에서는 HTTP라는 프로토콜을 이용해 "HTTP 메시지"를 주고 받으며 통신한다.
하지만 서버가 어떻게 구성되어 있는지 모르기 때문에 서버에서 클라이언트에게 API를 제공해주어야 한다.
API - Application Programming Interface
상황에 맞는 메서드들을 사용하여 적절한 API를 구성하는 것이 중요하다.
AJAX
AJAX - Asynchronous JavaScript And XMLHttpRequest
웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 나타낼 수 있다.
Fetch
Fetch를 이용해 서버에 요청을 보내고 응답을 받을 때까지 멈추지 않고 계속해서 페이지를 렐더링 해주는 비동지적인 방식이다.
--> 필요한 데이터만 가져와 DOM에 적용시켜 렌더링이 빠르다는 장점이 있다.
// fetch 예시
fetch ('http://example.com/music.json') //해당 도메인에 HTTP요청을 보냄
.then ((response) =>
response.json(); // fetch() 요청 결과로 받아온 데이터를 JSON으로 저장
)
.then((data) => console.log(data)); // JSON형식 data 출력
Axios
Axios는 Fetch와 비슷하지만 따로 추가해야하는 라이브러리이다.
- npm을 이용해 설치
npm install axios- 프로젝트에서 import
import axios from "axios";위의 Fetch 예제 코드를 Axios로 변환해보았다.
axios.get('http://example.com/music.json')
.then((response) =>
console.log(response.data));Axios는 응답 데이터를 기본적으로 JSON 형식으로 반환해준다.
에러 처리
Fetch와 Axios 둘다 Promise가 거부(reject)되면 .catch()를 통해 에러를 처리한다.
const url = "http://example.com/music.json";
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});Axios의 Promise는 status가 200을 넘어가면 거부(reject)한다.
하지만 Fetch는 404에러나 다른 HTTP 에러를 받아도 거부(reject)하지 않고 네트워크 장애가 발생한 경우에만 한다. 따라서 .then()을 이용해 수동으로 에러 처리를 해줘야한다.
const url = "http://example.com/music.json";
fetch(url)
.then((response) => {
if (!response.ok) { //ok가 false일 때 수동으로 에러 처리
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then(console.log)
.catch((err) => {
console.log(err.message);
});결론 : Axios와 Fetch는 개인의 선호도 차이와 프로젝트 환경에 따라 갈린다.
