2022.06.27

jooooo·2022년 6월 26일
0
post-thumbnail
post-custom-banner

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의 순서
  1. 클라이언트가 초기화면을 로드하기 위하여 서버에 요청을 보낸다.
  2. 서버는 화면을 구성하는데 필요한 데이터들을 얻어와 모두 삽입하고 css까지 모두 적용하여 렌더링 준비를 마친 html과 js코드를 브라우저에 응답으로 전달한다.
  3. 브라우저에서는 바로 전달 받은 페이지를 띄우고 같이 받아온 js코드를 다운로드하고 html에 실행시킨다.

서버사이드 렌더링은 부분적인 수정이 필요하여도 1~3까지의 과정을 모두 거쳐야함(새로고침된 후 표시됨)

서버사이드 렌더링의 장점?

  • SEO(검색엔진 최적화)에 유리하다.
    SEO는 검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성하는 과정을 말한다.
  • 초기 로딩이 빠르다.
    서버로 부터 화면 구성에 필요한 요소들을 먼저 가져오기 때문에 CSR보다 초기로딩속도가 빠름
    서버사이드 렌더링의 단점?
  • TTV와 TTI간에 시간간격이 존재하게 된다.
    TTV=>사용자가 웹브라우저에서 내용을 볼 수 있는 시점
    TTI=> 사용자가 웹브라우저에서 언터렉션 할 수 있는 시점
    즉, 사용자가 버튼을 클릭하거나 키보드를 눌러도 아무런 반응이 없을 수도 있다.
  • 서버과부화
    바꾸지 않아도되는 부분까지 전부 렌더링되다보니 서버과부화의 단점이 있다.

CSR(클라이언트사이드 렌더링)?

  • 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식(SPA에서 CSR방식을 사용한다.)
    CSR의 순서
  1. 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다.
  2. 서버에서 화면에 표시하는데 필요한 완전한 리소스의 응답을한다.
    (어플리케이션에 필요한 로직이나 구동하는 프레임워크와 라이브러리의 소스코드 또한 다 포함되어있다.굉장히 사이즈가 크기때문에 다운로드받는데 시간이 걸림)
  3. 추가적으로 필요한 데이터가 있다면 서버에 요청하여 데이터를 바당온 뒤 이 데이터들을 기반으로하여 동적으로 html을 생성해 사용자에게 보여지게 된다.
    CSR의 장점
  • 변경된 부분이나 관련된 데이터만을 가져오기때문에 매번 새롭게 렌더링하는 SSR방식보다 서버에 대한 부하가 적다.
  • 사용자 친화적이다.
    SSR방식에 렌더링마다 화면이 깜빡이는 이슈가 존재했는데, CSR는 깜빡임 없이 부드러운 이동을 사용자가 경험하게 된다.
    CSR의 단점
  • SEO가 불리하다.
  • 초기속도가 느리다.
profile
INFP🖐
post-custom-banner

0개의 댓글