프론트엔드 필수 SPA, Webpack

카테고리 없음

이채야채 2022. 3. 28. 00:47

SPA란 무엇일까?

과거의 웹사이트

SSR 서버사이드 렌더링으로, 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송을 해줬다. 그때는 전달되는 파일의 용량이 적어서 크게 문제점이없었으나. (새로고침시 하얀색 화면이 되는 문제점)

현재에는 웹사이트가 고도화되어 서버에서 전송시키는 페이지당 용량이 커지고 서버에 큰 부담이 되기시작했다.

이 문제점을 보안하기위해 나온 것이

⬇️

SPA

리렌더링 => ui에 관한것이며, ajax => 데이터에 관한것

Single Page Application의 약자로 단일페이지로 구성된 웹 어플리케이션이다.

기존 웹사이트는 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다.

single page application은 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식

1. (웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고) 최초에 한번, 전체 페이지를 렌더링을 한다.

2. 이후부터는 ajax요청으로 부분적으로 필요한 데이터를 요청해서 활용한다

3. 재활용이 가능한 컴포넌트들이 모여서 한 페이지를 구성한다. => ajax요청으로 부분적으로 필요한 데이터를 요청해서 활용한다

SPA 장점

SPA 단점

Webpack이란?

✔️ webpack = 모듈번들링

모듈번들링이란?

html에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는것을 모듈 번들링이라고한다.

=> 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것.

왜 webpack, 모듈번들링이 이 필요할까??

예전에는 페이지마다 새로운 html요청을 해서 뿌려주는 형식이였지만, 오늘날에는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들을 포함한다. 연관되어있는 자바스크립트 종속성 파일들을 하나의 파일로 묶으면, 관리하기가 편하다.
파일들을 컴파일할때 여러 모듈들의 파일을 읽어오는데 시간이 오래걸린다. 이부분을 해결하기위해서 여러 파일을 하나의 파일로 번들링 해준다.
하나의 자바스크립트 파일로 만들어져서 웹페이지 성능 최적화를 해준다.

webpack을 사용하기위해 옵션으로 babel로 이해하고 사용해야한다.

그렇다면 babel이란?

Babel이란?