TIL[34일차]낙관적인 Optimistic-UI

남예지·2022년 12월 15일
0

TIL

목록 보기
27/47

Optimistic-UI

좋아요를 클릭하면 원래는 많은 단계가 있지만 아폴로캐시에서 미리 다음 숫자를 생각해서 미리 보여주고 요청을 하고 데이터베이스에서 변경을 한다.

쉽게말해 좋아요가 8이 있다면 눌렀을때 9가 되겠지 하고 예상해서 누르면 9로 바뀌게 먼저 보여주는 것이다.

만약 백엔드나 디비에서 에러가 떨어지면 아폴로캐시에서 원상복귀하고 9로 바뀌었다가 8로 다시 돌아간다.
올라갔다가 줄어드는 좋지 못한 UX를 보여준다.
그래서 Optimistic-UI는 항상 사용하지 않고 99% 성공을 확신할 수 있을때
사용을 해야한다.


OpenGraph

스크랩핑 / 크롤링 뭘까

한번에 가져오는 스크랩핑과 꾸준히 가져오는 크롤링.

우리가 주소를 붙여넣으면 이렇게 아래에 미리보기가 뜨게되는데 이걸 스크랩핑했다고 한다.

스크랩핑 / 크롤링 관련 라이브러리
스크래핑: cheerio
크롤링: puppeteer

다른사이트의 정보를 가져오는 것? 이걸 하려면 어떻게 해야할까
다 하드코딩으로 주소 하나하나 정보를 입력하는 것은 아닐것이다.

개념

브라우저의 주소창은 API 요청도구이다. GET방식으로 요청한다.
curl, 포스트맨과 같이 브라우저도 마찬가지로 요청을 받으면 데이터를 가져온다. 하지만 브라우저는 마크업 태그를(html) 보여주기까지 기능하기 때문에 읽고 해석해서 그림을 그려 우리에게 보여준다.

예전에는 프론트엔드 없이 모두 rest API였다.

지금 우리는 프론트 서버로 next.js를 쓰고 있는데 그러면 여기서 만든 폴더가 api로 바뀌게 된다.
포스트, axios, curl에서도 조회가 가능하지만 그려주는 능력은 브라우저가 가지고 있어서 화면이 바뀌어 보여지는 것이다.
그래서 실제로 프론트도 백앤드처럼 api를 만들수 있다.

어쨌든 핵심은 다 rest API이고, 브라우저만 특이하게 그림까지 그려주는구나로 정리할 수 있다.


실제로 가능한걸 포스트맨에서 확인해볼 수 있다.

이걸 가지고 오픈그래프 실습을 해보자.

Opengraph로 사이트 미리보기 구현

opengraph를 활용해 미리보기를 구현해보자.

OG (Open Graph) 란?
대부분의 콘텐츠는 URL로 공유된다. 이 때, 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그(OG TAG)로 웹사이트를 마크업하여 마케팅 효과를 낼 수 있다.
즉, 해당 콘텐츠의 요약내용이 "SNS에 게시되는데 최적화된 데이터"를 가지고 갈 수 있도록 설정하는 것.
(미리보기가 가능한 정보를 노출해준다. = 미리보기 화면 생성)

오픈그래프(OG, 오픈 그래프 프로토콜)는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며, html기능은 아니고 페이스북에서 각각의 피드를 미리보려고 시작되었는데 편리함에 하나, 둘 따라하면서 하나의 문화가 되었다.

❗ (오픈 그래프) 프로토콜
프로토콜(Protocol)은 컴퓨터나 네트워크 장비가 서로 통신하기 위해 미리 정해 놓은 약속, 규약.
즉, 컴퓨터끼리 서로 이해할 수 있는 공용언어에 대한 통신 규약(약속)

대표적으로 인터넷을 할 때 사용되는 프로토콜은 TCP/IP 가 있다.

개발문화로 meta태그안에 og:~ 이러면 이건 회사소개를 적어놓기로 했다.

og를 보는 입장은 제공자 입장과 사용자 입장 2개로 나뉜다.
예시 =>
제공자 입장 : 네이버 개발자
사용자 입장 : 네이버 주소를 요청해서 화면에 뿌려주는 타사이트 사용자

//  제공자일때 => 네이버, 다음, 쿠팡
// og는 head에 입력해야해서 Head룰 import 해준다.
import Head from "next/head";

export default function OpengraphProvider() {
  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 OpengraphDeveloper() {
  const onClickEnter = async () => {
    // 1. 채팅데이터에 주소가 있는지 찾기 (ex. http~~ 로 시작하는 것 찾기)

    // 2. 해당 주소로 스크래핑하기
    const result = await axios.get("https://www.gmarket.co.kr");

    // 3. 메타태그에서 오픈그래프(og: ) 찾기
    // 모바일앱이나 백엔드에서 하는게 일반적 // CORS: https://www.naver.com 따라서 모바일앱이나 백엔드에서 스크래핑
    result.data.split("<meta").filter((el: string) => el.includes("og:"));
    console.log(
      result.data.split("<meta").filter((el: string) => el.includes("og:"))
    );
  };

  return (
    <>
      <button onClick={onClickEnter}>채팅 입력 후 엔터치기!!</button>
    </>
  );
}

그런데 보통은 프론트엔드에선 하지 않는다. CORS 관련 이슈가 나타나기 때문이다.

CORS 관련 이슈

오픈그래프는 모바일앱이나 백엔드에서 하는게 일반적이다.
왜냐면 cors문제가 있어서. (저번에 배웠음)
프론트는 제약이 있어 백엔드 서버로 우회해서 간다.


서버사이드렌더링 SSR

서버사이드렌더링이란?
서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것이죠. 즉, 서버가 화면(View)을 그리는 주체가 됩니다.

서버사이드렌더링의 작동방식

프론트엔드 서버에서 실행을 시켜서 필요한 것들을 백엔드에 바로 요청시켜서 데이터를 받고 그 데이터로 html을 완성하고 한번에 포스트맨드로 다시 보내주면 정상적으로 모든 데이터를 받을 수 있다!

우리는 그래서 프론트엔드 서버 => 백엔드 서버로 데이터를 요청하고 받는 방법을 알아야한다.

// 이름은 무조건 getServerSideProps이고, 페이지 기준이라 페이지에서만 작성이 가능하다.
export const getServerSideProps = () => {
  // 여기는 서버라서 브라우저에 들어가지 않음
  console.log("여기는 서버입니다.")
}

getServerSideProps를 이용해서 백엔드에서 프론트엔드로 요청하고 데이터를 보내준다.

CSR / SSR

하드코딩 된 걸 미리 보여주려고 프리렌더링이 일어나는건데 이걸 CSR(클라이언트 사이드 렌더링)이라고 한다.
SSR(서버사이드 렌더링)은 미리보기를 구현하기 힘드니 브라우저에서 요청을 하면 프론트엔드 서버에서 완벽한 html을 주려고 하는 것이다.

미리보기 뿐만 아니라 구글검색이나 네이버검색 등 과도 관련이 있다.
검색회사들은 24시간동안 돌아가면서 웹홈페이지들을 한번씩 접속해서 사이트에 정보들을 가지고 분석해서 많이 나온 단어를 통해 사이트를 분석하는 프로그램 봇이 있다.
이런사이트들에 검색봇이 요청을 하는데 html을 받아오면 비어있다.
내용이 반드시 검색이 되야하는 사이트는 SSR을 해줘야된다.

🚧 주의 >

구글의 검색봇은 좀 더 고도화되어서 useQuery로도 어느정도 정보를 받아올 수 있지만 맹신하지 않아야한다.

또한 SSR은 완벽한 html을 보여주기 위해 조금 느리게 뜬다.
그래서 모든 사이트를 SSR 하기 보다는 구분해야한다.

실제로 검색이 되어서는 안되는 사이트들/ 예를 들어 관리자 페이지 등 / 은 절대 SSR이 되어서는 안된다.

인터넷에 SSR을 검색하면 검색엔진최적화(SEO최적화)가 나오는 이유다.


  • 추가로 웹접근성이 높을수록 검색이 더 잘된다!

<웹접근성높이는 방법>
1. img 태그에 alt="인형사진" 이렇게 설명을 붙여주거나
2. 장애를 가진 분들을 위한 기능이 들어간 사이트
등등 웹접근성을 높일 수 있다.


오늘 내용은 간단히 알아봤지만 정말 중요한 내용이라고 하셨으니 포트폴리오에 적용하면서 복습해야겠다.

profile
총총

0개의 댓글