210106_TIL (HA 끝 그리고 AJAX, XMLHttpRequest)

🍎 오늘 한 것

---

✔️ HA 문제풀기
4주 동안 배웠던 것들이 총집합(?)된 HA 문제들을 풀었다. 부족하게 느껴졌던 부분들이 있었는데, 익숙해질때까지 보고 또 본게 효과가 있던 것 같아서 뿌듯하기도 했고 뭔가 한시름 놓은것 같기도 하다. 

✔️AJAX, XML, fetchAPI 공부, 블로깅
어제 fetch API를 활용해서 날씨 앱을 만들었는데 구글링하면서 부분적으로만 이해하고 넘어가는 식으로 완성을 한 것 같다. 아직 뭔가 제대로 알고 있다는 느낌이 들지가 않아서 찝찝하기도 하고 HA가 끝나면 좀 더 찾아봐야지 하고 생각하고 있었다. 그렇게 fetchAPI에 대한 글들을 찾아보게 됐는데 글을 다 읽기도 전에 AJAX, XMLHttpRequest, Promise같은 잘 모르는 개념들이 자꾸만 튀어나와서 끝까지 보지 못해 답답한 마음이 들었다ㅠㅠ 그래서 그냥 하나씩 정복해보자는 마음으로 하나씩 알아보며 블로깅하고 있다. 

 

 

🍎 기억할 것

---

✔️AJAX (Asynchronous JavaScript And XML)
Javascript, XML을 이용해 비동기로 서버와 데이터를 주고 받는 방식, 서버로부터 웹페이지를 받으면 원래 모든 리소스를 다시 불러와야하는데, 일부만을 갱신할 수 있게 해준다.

✔️ XML
데이터를 저장하고 전달할 목적으로 만들어진 언어 중 하나로, HTML같은 '문서 기술 언어'에서 파생되었지만 HTML보다는 데이터 내용을 기술하는데 좀 더 특화되어있다!

✔️ XMLHttpRequest
서버로부터 받아온 XML데이터를 처리하는 데 사용되는 객체!
* 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송
* 서버가 요청에 응답하면 XMLHttpRequest 객체는 그 결과를 처리해줌

✔️ Promise
Promise는 Javascript 비동기 처리에 사용되는 객체로, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다! 데이터를 받아오기도 전에 다 받아온 것처럼 화면에 출력하려하면 당연히 오류가 발생하게 되는데, 이런 문제점을 해결하기 위한 방법 중 하나이다.

* new Promise() : 프로미스는 객체 생성 -> 콜백 함수 인자로 resolve, reject 사용가능
* Pending(대기), Fulfilled(이행), Rejected(실패) 3가지 상태를 가짐
* 비동기 작업을 완료했을 때와 실패했을 때의 결과 값을 나타낸다.

✔️ then(), catch()
서버에서 성공적으로 응답을 받아올 경우 / 응답이 없을 경우 각각 호출된 메서드에 따라 then() / catch()로 나누어 응답 결과 / 오류를 출력할 수 있다!

 

출처 : MDN문서 (Promise 처리 과정)

 

🍎 더 공부할 것

---

✔️ Promise 블로깅
✔️ Prototype 블로깅 

 

 

✏️ 진짜로 프리코스가 끝났다. 이머시브 코스를 시작하기 전에 4일 정도 혼자 공부할 수 있는 시간이 주어져서 그 동안 뭘하면 좋을 지 생각해봤다. 일단은 못잤던 잠을 푹 자두고, 읽다 말았던 책들도 마저 읽어야겠다 📒 그리고 다 끝내지 못했던 부분들에 대한 보충을 해둬야겠다.