오늘 배울 내용!
좋아요를 누르는 과정을 보면 클릭을 하면 백엔드를 거쳐 DB를 거쳐 BR까지 와서 캐시들어갔다가 값이 변경되면 그때 숫자를 올리는 식으로 썼는데
Optimistic-UI를 쓰면 클릭을 누르면 캐시에 8을 먼저 올려줘서 숫자를 올린상태에서 요청하고 받는다. 더 빠르게 눌리는 걸 볼 수 있는데, 실패시 숫자가 올라갔다가 떨어진다. 그렇기 때문에 마구잡이로 쓰면 안되고, 99%성공하는 부분과 만일 실패하더라도 큰 상관없는 부분에 사용하게 된다.
실습
const onClickLike = () => {
void likeBoard({
variables: { boardId: "639a7d73531bd200286b7837" },
// refetchQueries: [{ query: FETCH_BOARD,{variables: {boardId: ""}} }]
optimisticResponse: {
likeBoard: (data?.fetchBoard.likeCount ?? 0) + 1,
},
update: (cache, { data }) => {
cache.writeQuery({
query: FETCH_BOARD,
variables: { boardId: "639a7d73531bd200286b7837" },
data: {
fetchBoard: {
_id: "639a7d73531bd200286b7837",
__typename: "Board",
likeCount: data?.likeBoard,
},
},
});
data?.likeBoard; // 8
},
});
};중간에 optimisticResponse를 넣어주면 빠르게 숫자가 올라간다.
Opengraph / SSR
Scraping,Crawling
공통점: 다른 사이트 정보를 가져오기
차이점
Scraping- 한 번 가져오기 => Cheerio
Crawling- 꾸준히 가져오기 =>
어떤 사이트에 개발자 도구를 들어가면 HTML을 볼 수 있다. 내가 원하는 정보의 HTML부분을 변수로 넣어서 내가 가져다 쓸 수 있다.
API요청도구
postman, 터미널, curl, 브라우저 등등
브라우저 이외에는 그냥 불러올 수만 있지만,
브라우저는 보여주고 markup 돼 있는 코드가 있으면 그걸 그려주는 역할도 한다.
사실 우리가 쓰는 모든 파일은 JSON형태에 restAPI이기 때문에 API요청도구에서 그거에 대한 주소값을 넣으면 데이터가 들어가는 걸 확인할 수 있다. (파일명이 EndPoint가 된다.)
우리가 JSON을 쓰기전에 XML(eXtensible Markup Language)을 썼다.
JSON은 우리가 알다시피 객체로 돼있고,
XML은 
이런 형태의 텍스트가 데이터로 들어왔고,
우리가 쓰는 JSX(Javascript XML)도 관련이 있다.
Opengraph(약자로 og)
디스코드에 도메인 주소를 쓰면 이런 식으로 나온다.
개발자들의 문화 중에 meta태그에 'og:' 으로 홈페이지를 소개하는 글을 쓰는 문화가 있다.
디스코드의 개발자는 og에있는 정보를 요청해서 받아오는 방식으로 만들면 된다.
실습으로 제공자, 사용자입장에서 해보자.
제공자일때
import Head from "next/head";
export default function OpengraphProviderPage() {
return (
<>
<Head>
<meta property="og:title" content="중고마켓" />
<meta
property="og:description"
content="도상의 중고마켓에 오신 것을 환영합니다!"
/>
<meta property="og:image" content="http://~~~" />
</Head>
<div>중고마켓에 오신 것을 환영합니다!(여기는 Body입니다.)</div>
</>
);
}개발자일때
import axios from "axios";
export default function OpengraphDeveloperPage() {
const onClickEnter = async () => {
// 1. 채팅데이터에 주소가 있는지 찾기(ex, http//:~~~로 시작하는 것)
// 2. 해당 주소로 스크래핑하기
const result = await axios.get("https://www.gmarket.co.kr"); // CORS: https://www.naver.com 따라서 모바일 앱이나 백엔드에서 스크래핑
console.log(result.data);
//3. 메타태그에서 오픈그래프(og:) 찾기(스크래핑- cheerio!!)(크롤링은-puppeteer)
console.log(
result.data.split("meta").filter((el: string) => el.includes("og:"))
);
};
return (
<>
<button onClick={onClickEnter}>채팅입력 후 엔터치기!!</button>
</>
);
}SSR
페이지별로 meta가 다르다 그럼 meta넣는 부분에 Fetch를 해서 값부분에 각각의 데이터를 넣어주면 되지 않을까?
직접해보면 안된다.
작동원리가 HTML를 브라우저에서 먼저 그리고 useQuery를 받아오면 리렌더링이 되는 총 2번이 렌더링이 되기때문에 실제로 data는 못받아오기 때문에 undefined가 된다.
CSR(Client Side Rendering)
클라이언트에서 백엔드를 거쳐 가져오기때문에 CSR이다
SSR(Server Side Rendering)
FE에서 백엔드를 거쳐 완벽한 HTML을 브라우저에 준다.
SSR의 작동원리
프론트엔드에서 그림-> 백엔드에서 필요한 데이터 요청-> DB -> 백엔드에서 프론트엔드로 정보를 받아옴 -> 프론트엔드 컴퓨터에서 다 그린 상태에서 완성된 HTML을 넘겨준다.
.
SSR은 SEO와 관련이 있음!!!!
검색엔진 최적화SEO(Search Engine Optimization) 검색봇을 이용하려면 프론트엔드 컴퓨터에서 SSR을 이용해서 완벽한 HTML을 줘야지만 검색봇이 찾을 수 있다.
.
SSR은 백엔과 통신을 다하고 브라우저에 전달하다보니 CSR보다 속도가 좀 느리다.->모든페이지에 SSR을 넣으면 안된다.
.
검색이 되면 안되는 곳! 예시) 관리자 페이지
