옵티미스틱UI
중요한곳에 사용하면 안됨
덜 중요하면서 실패해도 문제가 안되고, 성공확률 99%인 것들에 사용하자
optimisticResponse을 사용하면 입력된 값으로 응답을 받았다고 생각을 하고 data에 적용시킨다 그후에 진짜 데이터가 들어왔을때 값이 다르면 바꾸고 같으면 바꾸지 않는다
scraping(스크래핑)
사이트의 한 페이지의 모든 데이터를 받아 오는것
crawling(크롤링)
스크래핑을 여러번 진행하는것
Open Graph
디스코드,카카오톡 같은 곳에서 특정 웹사이트 링크를 올리면 해당 사이트의 사진과 정보가 나오는것을 알수있다 이것을 Open Graph 라고 한다
<meta property="og:title" content="제목" />
<meta property="og:description" content="간단한 정보" />
<meta property="og:image" content="http://~~~~" />위와 같이 작성하면 미리보기 기능이 구현된 곳은 주소를 올리면 사진과 정보가 뜬다
그럼 이번에는 우리가 그 미리보기 기능을 구현해 보자
// 채팅 같은 곳에 주소가 입력 되면 해당 주소로 axios를 날림
const result = await axios.get("http://~~~~")
// 받은 데이터로에서 og:title,description,image를 찾기
result.data.split("<meta").filter((el: string) => el.includes("og:"))
// 해당 값을 화면에 뿌리면 됨하지만 여기서 axios요청시 CORS를 막아둔곳도 존재하기 때문에 그럴 경우에는 다른 방법으로 받아와야함 (ex: 백엔드서버이용)
