2022_01_13

 ⚙︎ Apollo client

   Apollo Client를 이용하여 graphQL형식으로 데이터 통신을 해보았다. 아폴로를 처음 사용한다면 초기설정을 해야하는데 보통 _app.js 파일에 설정을 한다. 초기 설정을 할때는 Apollo client Doc을 참고하여 셋팅하면 된다.

⚙︎ 동기와 비동기

   통신을 주고받을 때 동기로 사용할지 비동기로 사용할지 정해야한다. 동기는 request를하면 response 받은 후 데이터를 조회할 수 있는 형식이다. 결과물을 받아야 다음 동작이 이루어지기 때문에 코드에서 변수에 데이터를 저장해보면 promise가 나오게된다.(응답이 완료되면 데이터값이 적용된다.)

   비동기는 request를 하면 response없이 다음 동작이 이루어지기 때문에 데이터를 받는기까지의 시간동안 동작을 멈추는 시간을 없앨 수 있으며, 이때 ascyn / await을 사용하게 된다. async는 함수 앞에 사용하게되며 async를 사용했다면 반드시 await도 사용해야한다. 이를 무시할경우 오류가 발생하게된다.

async function graphql () { await mutation...}

화살표함수의 경우 async의 위치가 변한다.

const graphql = async () => { await mutation... }

⚙︎ 호이스팅

   호이스팅이란 var로 선언된 표현식이나 함수 선언문 등을 살행했을 때 해당 스코프의 맨 위로 끌어올리는 현상을 말한다. 이러한 현상은 JS가 소스코드를 평가할 떄 선언문으로 작성된 변수와 함수 등을 실행하여 변수와 함수 식벽자를 key값으로 '실행 컨텍스트'가 관리하는 환경에 등록하기 때문이다.
이런 호이스팅 현상을 방지하기 위해서는 var이외의 let, const로 선언을 하는 방법이 있다. 이와 같은 선언은 블록스코프이기 때문에 우선 선언된 변수는 TDZ(Temporal Dead Zone)에 배치되었다가 실행 후 TDZ에서 제거되면서 사용가능한 형태가 되기 때문이다. 이러한 방식을 이용하여 함수 또한 함수 표현식, 화살표 함수를 사용함으로서 호이스팅을 방지할 수 있다.

// 함수 표현식
const dalaran = function(){...}

// 화살표 함수
const dalaran = () => {...}

   하지만 화살표 함수는 'this' 를 바인딩할 때 동적으로 결정되는 일반함수와는 달리 언제나 상위 스코프를 바인딩하기에 이를 잘 활용할 수 있게 사용하는 것이 좋다

** 호이스팅을 완전히 이해하려면 실행 컨텍스트, TDZ, SCOPE의 이해또한 동반해야하는 것 같다. 조만간 공부하여 포스팅 해보겠다.

⚙︎ Today Coding

   알고리즘을 하면서 for문 이외에 for-in, for-of, forEach, while에 관하여 알게되었다. 또한 apollo cilent를 통해 graphql을 이용한 비동기 통신을 적용시켜보았다.

[Github] https://github.com/Dalaranl/codecamp_frontend_05/blob/master/freeboard_frontend/pages/boards/new/index.js