08.18 Optimistic UI/ openGraph

Optimistic UI

Optimistic UI란?

사용자의 요청이 서버에 도달하기 전에 화면의 값을 바꾸어 놓아 사용자가 체감하는 브라우저의 속도가 보다 빠르게 만든 것이다. 화면에서의 값은 미리 바꾸어 두고 서버에 요청을 계속 보내어 응답이 돌아오면 화면을 다시 업데이트한다. 만약에 서버에서 응답을 받는 것을 실패했다면 이전의 값을 응답으로 보내주고 이전의 값을 화면에 업데이트 해준다.
따라서 결제와 같이 데이터의 중요성과 안정성이 필요한 곳에는 사용하지 않는다. 사용자가 결제를 취소했는데 결제 완료 응답을 받은 것으로 오해하면 안되기 때문이다.

OpenGraph

카카오톡으로 인터넷 제품 링크를 친구에게 보내본 적이 있다면 openGraph를 경험해본 것이다.

인터넷 주소 아래에 이미지와 함께 뜨는 회사 혹은 제품의 간략한 설명 등이 openGraph이다. 링크에 대한 정보를 meta태그에 담아 미리 볼 수 있도록 해준 것이다.

라이브러리

• npm cheerio
  스크래핑(계속 끊임없이 데이터를 연쇄적으로 긁어옴)
• npm puppeteer
  크롤링에 사용(정기적으로 데이터를 긁어옴)