[TIL] week 4

1. 비동기 통신

이번주는 Vanila JS에서 비동기 통신 관련 개념을 학습하였다. 통신에서 주로 사용되는 AJAX, Promise..then, async..await를 문법적인 내용 뿐만 아니라 실습해보는 시간까지 주어졌다.

2. API && 현업에서 사용하는 기법

이번주 데브코스에서 처음으로 JS 관련 API를 활용해보는 시간이었다. Fetch API, history API 등을 실습에 적용하면서 서버와 통신해면서 변화를 관찰할 수 있었다. 단순히 API를 사용하는 범위를 넘어서 현업에서 서버와 통신하면서 발생할 수 있는 경우의 수에 대해 학습하고 이에 대응할 수 있는 방법에 대해 학습할 수 있었다. 이번주에 배운 기법으로는 낙관적 업데이트, 디바운스 기법이 있었다.

낙관적 업데이트는 이름에서도 드러나듯 낙관적이라는 말이 포인트이다. 서버에서 안정적으로 응답을 해줄 것이라는 것을 전제로 클라이언트가 입력한 내용들을 서버를 통해 전달받는 것이 아니라 입력한 값을 바탕으로 랜더링을 우선적으로 수행한 뒤, 서버쪽의 응답과 1:1로 비교하여 틀린 부분을 고쳐나가는 방식이다. 이러한 방식은 안정적인 통신보다는 사용자의 사용경험이 우선시되는 서비스에서 주로 사용된다. 가령 facebook의 댓글 기능도 낙관적 업데이트 기법을 활용한 기능이라고 할 수 있다. 우선 글쓴이가 입력한 값이 서버에 온전히 전달될 것이라는 것을 전제로 답글을 바로 랜더링을 수행하고, 백그라운드에서 서버와 통신을 통해 데이터를 업데이트 하는 방식이다. 서버가 안정적으로 응답할 것이라는 전제가 깔린 기법이기 때문에 금융 거래와 같이 100% 안정적인 트랜잭션이 요구되는 서비스에서는 절대 사용되면 안되는 기법이다

디바운스 기법은 같은 이벤트를 반복적으로 수행하면서 가장 마지막에 발생한 이벤트만을 최종적으로 실행하는 기법을 의미한다. 이러한 기법이 가장 자주 쓰이는 경우가 '실시간 저장' 기능을 구현할 때이다. setTimeout()안에 콜백 함수와 시간을 설정하고, 이전에 setTimeout을 통해 타이머를 실행시킨 적이 있는지 여부를 검사하여, 타이머 값이 주어진 시간보다 이전이면 아직 입력중인 것으로 판단하고 시간을 초기화하여 다시 카운트하고, 시간이 지난 경우에만 비로소 입력이 끝났다고 판단하여 콜백함수를 실행하는 방식이다.

{
  if(timer !==null){
    clearTimeout(timer)
  }
    timer=setTimeout(async ()=>{
      setItem(postLocalSaveKey,{
        ...post,
        tempSaveDate:new Date()
      })
    }
    ...
}