소소한 코딩일지

웹 개발을 하면서 가장 많이 사용하는 라이브러리, 프레임워크는 React, Vue.js, Angular이다. 이것들로 우리는 SPA를 만들 수 있다. SPA를 검색해보면 CSR, SSR이라는 용어들도 함께 등장한다. 이 세 가지 용어가 어떤 것을 의미하고, 서로 어떤 관계를 가지고 있고, 영향을 줄 수 있는지 알아보려고 한다. SPA (Single Page Application) SPA는 웹사이트 전체를 하나의 페이지(Single Page)에서 보여주고, 내부 요소를 바꾸면서 화면을 보여주는 페이지이다. 기존 옛날 웹사이트에서는 새로운 페이지로 전환될 때 마다 서버로부터 리소스를 전송받았다. 하지만 점차 페이지의 용량이 커지면서 서버에서 매번 리소스를 받아오는 부담이 커지게 되었고, 이 문제를 해결하기 ..

SPA(Single Page Application) SPA는 단일 페이지 애플리케이션으로, 기본적으로 하나의 페이지로 구성되어있다. 기존의 웹 페이지는 서버로부터 요청을 할 때마다 새로고침이 발생하여 웹 페이지 구성에 필요한 리소스를 받는다. 이렇게 기존의 서버로부터 리소스를 받는 형식을 서버 사이드 렌더링(Server-side rendering)이라고 한다. 서버 사이드 렌더링(Server-side rendering) 방식은 보통 header, footer 부분을 제외하고 contents 부분을 렌더링 받는데 이때 변하지 않는 부분도 새롭게 랜더링하기 때문에 비효율적인 부분이 있다. 반면, SPA의 경우 모든 정적 리소스를 한 번에 전달받아 사용한다. SPA로 설계된 웹페이지를 보면 화면을 랜더링할때 ..