TIL 22.01.19

오늘은 fetch 함수, axios함수에 대해서 공부하고 실습을 하며 사용을 해보았다.

 

그동안  Promise를 fetch의 기본이해를 위해서 배운것이고,

사실상 fetch를 기반으로 만들어진 axios api를 많이 사용한다고 한다.

 

fetch는 promise와 사용법이 비슷하였고 url을 통해 json데이터를 받아오는 것이 신기하였다.

axios는 json()메서드를 사용할 필요없이 js 객체로 변경시켜주고, fetch보다 단순한 형태였다.

 

공부를 진행하면서 가장 어려웠다고 생각했던 부분은 

받은 데이터의 조작이었다.

 

json 데이터를 받아서 원하는 데이터의 형태로 가공시키는 부분이 생각보다 어려웠다.

데이터를 받아서 다른 데이터와 결합을 해야하는데 어떤식으로 가공하여 결합할지 막막했다.

 

그 과정속에서 새롭게 알게된 내용이 있는데

구조분해할당을 이용하면, 원하는 인자를 쉽게 전달이 가능하다는 것이었다.

 

fetch를 통해 받은 데이터를 .json()을 통해 js의 객체로 변환한 뒤,

변환된 객체는 data프로퍼티만 가지고 있는 객체이므로,

data 프로퍼티의 값을 전달 받기 위해서  {data : news} 라고 설정을 해주었다. 

이를 통해 따로 객체.data로 값을 받는 것이 아닌 news 값에 바로 접근이 가능해졌다.

 

또한 프로퍼티와, 그 값을 받는 변수나 상수의 이름이 동일 할 경우에

값을 생략하여 써줄 수도 있다!

ex) {news: news(변수 or 상수} 같은 경우 {news}로 생략

 

이를 통해 코드를 굉장히 단순화 시키고 직관적으로 인자를 받아서 문제를 해결할 수 있었다.

 

-끝-