WebPack?
- 모듈 번들링이라고 하는데 모듈 번들링이란?
html파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 말함
- 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 뜻함
WebPack을 왜 사용할까?
- 과거 방식으로는 페이지 하나하나마다 새로운 html을 요청해서 뿌려주는 방식이 었는데, 요즘 SPA를 사용하면서
하나의 html페이지에 여러개의 자바스크립트 파일을 포함하여 연관되어있는 파일들을 하나로 묶어줘서 관리하기에 용이하다.
- 파일을 컴파일 할 때 여러 모듈들의 파일을 읽어오는데 시간이 오래걸린다. 이 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링해준다.
- 하나의 자바스크립트 파일로 만들어서 웹페이지 성능을 최적화 해준다.
Babel?
- 최신 ES6버전을 ES5로 변환해준다.
Babel은 왜 사용?
- 최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다. 업데이트가 큰 만큼 ES6를 지원해주는 브라우저가 있다
그 중에서 지금까지 크롬,사파리,파이어폭스와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원해준다.
하지만 익스플로러11는 최신 업데이트 버전을 지원해주지 않는다 이런 경우에 Babel이 필요하다.
SPA?
- Single Page Application의 약자이며 하나의 페이지로 구성된 웹 어플리케이션이다.
- 브라우저에 처음 들어왔을때 최초 한번 페이지 전체를 로드하고, 이후부터 특정 부분만 Ajax를 통해 필요한 부분만 비동기 통신하는 방법이다.
MPA?
- Multi Page Application의 약자로 여러 페이지로 구성된 웹 어플리케이션이다.
- 사용자의 마우스클릭,키보드 누름 등 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와 해당 링크로 이동한뒤
다시 전체 페이지를 새로 렌더링하는 과거 웹페이지 구성 방식이다.
SSR(서버사이드 렌더링)?
- 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식이다.(MPA에서 SRR방식을 사용한다.)
SSR의 순서
- 클라이언트가 초기화면을 로드하기 위하여 서버에 요청을 보낸다.
- 서버는 화면을 구성하는데 필요한 데이터들을 얻어와 모두 삽입하고 css까지 모두 적용하여 렌더링 준비를 마친 html과 js코드를 브라우저에 응답으로 전달한다.
- 브라우저에서는 바로 전달 받은 페이지를 띄우고 같이 받아온 js코드를 다운로드하고 html에 실행시킨다.
서버사이드 렌더링은 부분적인 수정이 필요하여도 1~3까지의 과정을 모두 거쳐야함(새로고침된 후 표시됨)
서버사이드 렌더링의 장점?
- SEO(검색엔진 최적화)에 유리하다.
SEO는 검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성하는 과정을 말한다.
- 초기 로딩이 빠르다.
서버로 부터 화면 구성에 필요한 요소들을 먼저 가져오기 때문에 CSR보다 초기로딩속도가 빠름
서버사이드 렌더링의 단점?
- TTV와 TTI간에 시간간격이 존재하게 된다.
TTV=>사용자가 웹브라우저에서 내용을 볼 수 있는 시점
TTI=> 사용자가 웹브라우저에서 언터렉션 할 수 있는 시점
즉, 사용자가 버튼을 클릭하거나 키보드를 눌러도 아무런 반응이 없을 수도 있다.
- 서버과부화
바꾸지 않아도되는 부분까지 전부 렌더링되다보니 서버과부화의 단점이 있다.
CSR(클라이언트사이드 렌더링)?
- 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식(SPA에서 CSR방식을 사용한다.)
CSR의 순서
- 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다.
- 서버에서 화면에 표시하는데 필요한 완전한 리소스의 응답을한다.
(어플리케이션에 필요한 로직이나 구동하는 프레임워크와 라이브러리의 소스코드 또한 다 포함되어있다.굉장히 사이즈가 크기때문에 다운로드받는데 시간이 걸림)
- 추가적으로 필요한 데이터가 있다면 서버에 요청하여 데이터를 바당온 뒤 이 데이터들을 기반으로하여 동적으로 html을 생성해 사용자에게 보여지게 된다.
CSR의 장점
- 변경된 부분이나 관련된 데이터만을 가져오기때문에 매번 새롭게 렌더링하는 SSR방식보다 서버에 대한 부하가 적다.
- 사용자 친화적이다.
SSR방식에 렌더링마다 화면이 깜빡이는 이슈가 존재했는데, CSR는 깜빡임 없이 부드러운 이동을 사용자가 경험하게 된다.
CSR의 단점
- SEO가 불리하다.
- 초기속도가 느리다.