Today Yurim Learned

# 2020.08

# 0703

  • https://www.youtube.com/watch?v=_ISAA_Jt9kI
  • https://github.com/callstack/linaria

# 0825

# SSR(Server Side Rendering)과 SSG(Static Site Generator)의 차이

뒤에거 줄인 단어는 처음봤네. 얘도 SS로 시작해서 Server Side 같자너... https://unicorn-utterances.com/posts/what-is-ssr-and-ssg/

  • 바닐라 HTML 사이트
    • 서버가 각 route마다 각 HTML 파일 줌.
  • Client Side Rendering
    • 앵귤러, 리액트, 뷰 등 SPA 사용(NextJS나 Gatsby 끼지말구)
    • 리액트 코드 서버로부터 받아서 이 리액트 코드가 HTML CSS를 만든다.
    • 그 다음에 유저가 화면을 보게 되어서 TTI(Time to interactive)가 길어짐. 컴포넌트 너무 많으면 더욱 느려짐. 이떄 SSR의 필요성 생김
  • Server Side Rendering
    • 리액트의 첫 렌더링을 서버에 맡김(유저 노트북보다 빠를겨). 그 전까진 암것도 안보여줌. 매번 서버 필요하기 때문에 간단한 CDN 호스팅으론 안된다.
  • Static Site Generation
    • SSR이 페이지 그리는 책임을 서버에게 위임한다면(request time에 hydrate시킴), SSG는 개발자가 하도록 함(compile time에 hydrate시킴).
    • 내 개발 머신에서 HTML, CSS 생성하고 서버에 올림.

# window.requestAnimationFrame 이란?

https://blog.eunsatio.io/develop/JavaScript-window.requestAnimationFrame-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

  • 애니메이션을 위해 만들어진 특수한 비동기 함수.
    • setTimeout이랑 다른점: 브라우저가 실행 시기를 결정
    • setInterval과 다른점: 스스로 반복해서 호출하지 않음
  • 반복해서 호출하려면 재귀호출 해야함
  • 모니터 주사율에 맞추어 실행됨. 기본적으로 1초 60번
    • 일반 for문으로 돌리면 1초에 1000번가량 실행되어 필요 이상으로 버벅이게 된다.
  • setInterval보다 좋은 점: 2번째 인자로 넘어오는 timestamp값 - 이걸 활용해서 디테일한 애니메이션 생성 가능

# 자바스크립트 실행 최적화

https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ko

  • 시각적 업데이트에 setTimeout/setInterval피하고 항상 requestAnimationFrame쓰기

    • rAF: 자바스크립트가 프레임 시작시 실행되도록 보장하는 유일한 방법
    • setTimeout/setnterval로 애니메이션 만들면 종종 프레임이 누락될 수 있음

  • 메인 스레드 벗어나 오래 실행되는 js를 web workers로 이전

    • DOM 액세스가 필요하지 않은 경우(웹워커는 액세스 권한이 없음) 등의 순수한 계산 작업을 Web workors로 이전. 정렬이나 검색 등.
var dataSortWorker = new Workor("sort-worker.js");
dataSortWorker.postMessage(dataToSort);

dataSortWorker.addEventListener('message', function(evt) {
	var sortedData = evt.data;
	})
  • 마이크로 작업을 사용해 여러 프레임에서 DOM을 변경
  • chrome DevTools의 Timeline및 js 프로파일러를 사용해 평가

# 0826

# 리액트의 Hydration이란? + SSR와 Hydration

https://simsimjae.tistory.com/389 https://simsimjae.tistory.com/390?category=384814

  • Hydration: 수화 = 수분을 보충하는 행위
// DOM에 리액트 컴포넌트를 렌더링해주는 render 메서드. 이미 렌더링했다면 업데이트만 해줌. 렌더링이 완료되면 세번째인자의 callback 실행되게 할 수 있다.
ReactDOM.render(element, container[, callback])

// 렌더링은 하지 않고 이벤트 핸들러만 붙여줌. SSR을 해서 이미 마크업이 채워진 경우엔 굳이 render하지 않고 얘만 쓰면 됨.
ReactDOM.hydrate(element, container[, callback])
  • 정적인것(완성된HTML)을 동적인것(리액트가 관리하는)으로 만드는 행위가 Hydrate. 반대가 Dehydrate.
  • SSR을 하더라도 컴포넌트를 리액트가 관리하게 하기 위해선 hydration은 꼭 필요한 작업.
  • next가 react를 사용하는 순서
    1. 서버에서 리액트 컴포넌트를 HTML string상태로 렌더링
    2. 렌더링된 HTML을 클라에 보냄
    3. js로 된 리액트 코드를 클라에 보냄
    4. HTML을 리액트로 hydrate함.
  • Next 위의 리액트는 렌더링 과정 없이 HTML에 이벤트 핸들러만 붙임(hydrate)
  • 이 방식으로 웹페이지 로드하면, 클라는 웹사이트 접속시 완벽하게 렌더링된 페이지 봄. 그리고 react가 컴포넌트를 hydrate하면 유저와 상호작용할수있게 됨. 브라우저는 repaint할필요 없어서 성능 향상.
  • 근데! next가 HTML 만든 후 모든 리액트 코드를 클라로 보내게 되는데 문제는 이 js 번들의 크기가 너무 큼. 이를 해결하기 위해 partial hydration이란 기법 사용.
    • 정적인 사이트는 그대로 next가 SSR하게 두고 hydrate가 필요한 컴포넌트만 클라로 보내자.

← # 2019.11 →