Front-end라면 알아야 할 상식

https://github.com/baeharam/Must-Know-About-Frontend

SPA와 MPA

SPA(Single Page Application)

하나의 HTML 파일을 기반으로 동적으로 컨텐츠를 바꾸는 방식의 웹 어플리케이션

MPA(Multiple Page Application)

사용자가 페이지를 요청할 때마다, 웹 서버가 클라이언트가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션

SPA가 사용하는 렌더링 방식은 CSR, MPA가 사용하는 렌더링 방식은 SSR

CSR과 SSR

CSR(Client Side Rendering)

브라우저에서 서버에 HTML파일과 JS파일을 요청하고 로드가 된 후, 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링 시킨다

CSR의 장점

1. 첫 로딩이 된 후 동적으로 빠르게 렌더링 되기 때문에 UX가 좋다
2. 서버에 요청하는 횟수가 적기 때문에 서버의 부담이 덜하다

CSR의 단점

1. 모든 스크립트 파일이 로드될 때까지 기다려야 한다
2. 검색 엔진의 검색 봇이 크롤링하기 어렵기 때문에 SEO(Search Engine Optimizing)의 문제가 있다

SSR(Server Side Rendering)

브라우저가 페이지를 요청할 때마다 해당 페이지와 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링 시킨다

SSR의 장점

1. 초기 로딩 속도가 빠르기 때문에 사용자가 빠르게 컨텐츠를 볼 수 있다
2. JS를 이용한 스크립트가 아니기 때문에 SEO가 가능하다

SSR의 단점

1. 페이지를 요청할 때마다 매 번 새로고침 되기 때문에 UX가 좋지 않다
2. 서버에 매 번 요청하기 때문에 서버에 부하가 크다

브라우저의 렌더링 과정

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko)등의 렌더링 엔진을 사용한다
브라우저가 HTML, CSS, JS를 렌더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 이용하여 진행한다