TIL #17

 

 

 

Project

https://juicyjerry.tistory.com/233

 

 

 

 

 

배운 내용

1. lazy loading과 code splitting의 차이점

우리가 번들러 같은 빌드 툴 체인(소스 빌드 과정에 필요한 도구)을 사용하여 번들링 하는 이유로 여러 개로 흩어져 있는 파일들(static file: html, css, image...)을 압축, 난독화하여 하나의 파일로 모아주어 최적화를 해주면 웹에서 여러 개로 나눠진 파일을 받는 경우보다 하나로 된 파일로 받는 경우의 속도가 훨씬 빠릅니다. 

 

 

 

 

출처: Vue School

 

 

 

 

이런 번들링 툴인 웹팩은 번들링을 할 때 dependency graph라는 것을 호출합니다. 이 그래프는 모든 import 되는 파일이 서로 연결되어 있는 그래프입니다. 웹팩은 이 그래프를 이용해 번들링해야할 파일들을 찾아냅니다.

 

 

 

이런 파일들을 프로젝트가 커질수록 번들링한 파일의 크기도 커집니다. 번들링 파일이 커지면 웹에서 관련 파일을 다운 받을 때 시간이 더 소요됩니다. 소요되면 사용자 이탈률도 늘어나며 이는 서비스에 크나큰 피해를 입히게 됩니다. 참고로,구글에 의하면 53%의 사용자가 3초이상 기다리게 되면 페이지를 이탈하게 된다고 합니다. 

 

 

 

이런 번들 사이즈를 줄이기 위해서 lazy loading과 code splitting이라는 것이 나오게 됩니다.

lazy loading은 사용자가 클릭이나 라우터가 변경되는 경우와 같이 필요한 상황에 해당 내용(parts: chunks)을 loading 하는 과정을 의미합니다. 보통 사용자가 사이트를 방문하여도 모든 코드가 필요하지 않기 때문입니다. 즉, 사용자가 모든 페이지를 방문하는 경우가 드물다는 의미입니다.

 

 

 

code splitting은 lazy loading 할 때, 해당 앱을 쪼개는 과정을 의미합니다. 보통 Enrty Points, Prevent Duplication, Dynamic Imports와 같은 접근할 때 code splitting을 한다고 합니다.

 

 

 

cf) compile vs transpile 

컴파일이란 작성된 코드를 기계가 이해할 수 있는 바이너리 코드로 바꾸는 것이고 트랜스파일이란 언어 대 언어로 변형하는 작업을 의미. ex) sass -> css 변환

 

 

 

 

Reference

Vue School | https://bit.ly/3zw7Czt

Webpack | https://webpack.js.org/guides/code-splitting/

위펄슨 기술 블로그 | https://tech.weperson.com/wedev/frontend/bundling-transpiler/#webpack

 

 

 

 

 

 

 

2. next.js와 react의 차이점

과거 웹사이트들 대부분은 ssr로 동작했기 때문에 multi page form 방식을 사용했습니다. 이런 와중에 스마트폰이 등장하면서 모바일에 최적화되지 않아 모바일 웹에 대한 수요가 증가했습니다.

 

 

 

이런 문제 해결을 위해 react, angular, vue 같은 라이브러리, 프레임워크(csr이 가능한 spa)가 등장했습니다. 이런 spa 특징은 한 개의 페이지에서 여러 동작이 이뤄지는 방식으로 헤더 영역을 고정 메인 영역의 상태만 변경하는 방식을 사용합니다. 

 

 

 

next.js는 react의 ssr을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. react 자체내에서도 ssr이 가능하도록 설계됐지만, 개발환경을 만들기가 복잡하여 이런 문제를 해결하기 위해 나온 것이 next.js라고 합니다.

 

 

 

 

next.js 작동 원리

next.js는 초기에 사용자가 서버에 페이지 접속 요청시,

1. ssr 방식으로 렌더링될 html을 보냄

2. 브라우저에서 js 다운하여 리액트 실행

3. 사용자, 페이지가 상호작용하여 페이지 이동시, server가 아닌  csr 방식으로 브라우저에서 처리

 

 

 

 

또한, csr은 검색최적화(seo)가 불리한 특징을 가지고 있어 ssr를 통해 검색최적화를 통해 브라우저에 더 노출될 가능성을 높일 수 있게 된다.

 

 

 

 

cf) 검색 엔진 작동원리 

검색 엔진 봇들은 사이트 데이터 크롤링을 하는데, js 파일을 해석할 수 없어서 html 파일에서 크롤링한다. 

• csr 방식은 클라이언트 측에서 페이지 구성 전까지 html에 아무것도 없으므로 데이터 수집할 수 없어서 검색 엔진 노출이 어렵고
• ssr 방식은 server에서 화면을 그려서 보내주는 방식이기 때문에 html 안에 이미 컨텐츠가 포함되어서 검색 엔진 봇이 데이터 수집하는데 수웝해진다.

 

 

 

 

또한, codespliting 기능을 지원하여, 번들링된 파일을 분할하여 로드해 초기 구동 속도를 빠르게 하여 사용자 경험을 높일 수 있다. 

 

 

 

 

Reference

moonsj | https://bit.ly/3BNfI91

ivorycode | https://bit.ly/3kSd7V3