21. 8. 23(월) TIL(API, Request, Fetch)

배준형·2021년 8월 23일

목록 보기

14/21

Javascript API, Request, Fetch

📌 API(Application Programming Interface)

▶ API(Application Programming Interface)
- 응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

▶ Web API
- 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다. 예를 들어 블로그 API를 이용하면 블로그에 접속하지 않고도 다른 방법으로 글을 올릴 수 있다. 그 외에 우체국의 우편번호 API, 구글과 네이버의 지도 API등 유용한 API들이 많으므로, 요즘은 홈페이지 구축이나 추가개편 시 따로 추가로 개발하지 않고 이런 오픈 API를 가져와 사용하는 추세다.

📌 Web API 중 Request API

Request : XMLHttpRequest 객체를 생성하고, addEventListener 메소드 등을 이용해 입력된 url 주소를 통해 서버에 요청, 응답으로 응답 결과를 반환해주는 API 이다.

해당 API를 통해 XMLHttpRequest 객체를 활용하여 서버와 통신할 때 마다 해당 코드를 매번 작성하는 것이 아니라 export, import 또는 javascript에 내장된 request API를 이용하여 간단하게 서버와 통신할 수 있다.

Promise / async, await를 적용한 Request API

해당 API, XMLHttpRequest 객체를 이용하여 서버와 통신할 때 Promise, async, await 등을 통해 비동기 제어 역시 가능하다. Promise를 사용할 때는 .then 메소드를, async, await는 키워드만 잘 명시해주면 된다.

📌 Fetch API

fetch : 네트워크 요청/응답에 대해 Request/Response Object를 제공한다. 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있고, XMLHttpRequest보다 더 유연한 조작이 가능하다.

- fetch()는 2개의 매개변수를 받는데 첫번째는 URL이고 두번째는 Option이다. URL은 필수 매개변수이고, 서버와의 통신이 성공하든 실패하든 Response로 분해할 수 있는 Promise를 리턴한다.

fetch API의 특징

fetch()가 반환하는 Promise는 response가 HTTP 404, 500 같은 HTTP error status여도 거부하지 않고 다 받아온다.
cross-site cookies를 받지 않는다. fetch()는 cross-site session을 설정할 수 없다. 다른 사이트의 Set-Cookie 헤더는 자동으로 무시한다.
credential init 옵션을 설정하지 않으면 cookie를 전송하지 않는다.
fetch API는 Promise를 반환하므로 .then 메소드와 .catch 메소드를 통해 사용할 수 있다.

📌 배운점

저번 Module을 학습한 이후 오늘 API까지 학습하면서 export, import가 꽤나 익숙해졌다. 직접 사용해보니 생각보다 어려운 것은 하나도 없고, 단순히 작성한 코드 앞에 export를 적어주고, 사용할 때 import만 작성해주면 돼서 정말 중요한 내용이지만 알고나니 왜 지금까지 몰랐을까 하는 아쉬움까지 생겼다.

지금까지는 정말 화면에 나타나는 부분만 신경썼었는데, 서버와의 통신을 통해 응답을 가져오고, 가져온 내용을 구분자를 통해 필요한 부분만 나타나도록 렌더링 하면서 어떤식으로 통신하는지 대략적으로나마 알게되었다. 서버와 통신하는 것 관련해서 아직 모르는 부분이 많지만 모르는 것이 많다는 것을 알게되는 계기가 된 것 같다.

📌 앞으로

사실 저번주에 한번 학습한 내용이지만, 처음에는 이해가 되지 않아서 TIL을 작성할 수가 없었다. 구글링한 정보들을 조합하여 작성할 수도 있지만, 완전히 내것이 아닌 상태에서 작성한다면 모르는 상태로 남을 것 같아서 오늘 한번 더 학습을 통해 조금이나마 이해가 되었다.

처음에는 코드를 따라치기만 바빴고, 위 내용이 이해가 되지도 않는데 따라하다보니 학습이 종료된 후 되돌아보면 남는 것이 하나도 없었다.

오늘 우연히 노마드 코더 유튜브를 보다가 클론 코딩할 때(클론 코딩에만 해당되는 내용은 아니다) 코드만 따라치지 말고 직접 작성해보고, 배운 것이 있다면 거기에 자신만의 추가적인 기능을 적용시키는 등 크리에이터가 돼보라는 얘기를 하는 영상을 보게 됐다.

그 영상을 통해 깨달은 것이 너무나 많다. 여태까지 코드를 따라치기만 했었는데, 이제는 따라치는 것 한번, 시간이 흐른 뒤 혼자서 코드를 보지 않고 직접 작성해보는 시간을 가지면서 최대한 학습을 내것으로 만드려고 한다.