개인적으로 취업을 위해 면접 준비를 하면서 공부한 프론트엔드 기본 지식을 작성해보려고 한다. 장르는 구분 없이, 내가 알고 있는 정보를 제외하고 새로 배운 내용들만 올릴거다...😎
SPA 와 MPA
SPA
하나의 HTML 파일을 기반으로 자바스크립트르르 통해 동적으로 화면 컨텐츠 변화 방식
- CSR 방식을 사용
- ex) 리액트 라이브러리
MPA
사용자가 페이지를 요청할 때 마다 요청한 데이터가 들어있는 HTML 로 파싱해서 보여주는 방식
- SSR 방식을 사용
- 과거 웹 개발방식 자세한 내용은 아래 참고
CSR / SSR
CSR
브라우저가 서버에 HTML 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 js를 이용해 동적으로 랜더링
장점
- 첫로딩만 기다리면 동적으로 빠르게 랜더링 되기 떄문에 UX(사용자경험)가 좋다.
- 서버에게 요청하는 횟수가 적어서 서버 부담이 덜하다
단점
- 모든 스크립트 파일이 로드 될 때까지 기다려야해서 초기 랜더링 시간이 느리다.
- 검색엔진 최적화에 어려움을 겪고있다.(구글 제외 js지원 안함)
SSR
브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML/CSS/JS 파일 데이터를 받아와서 랜더링 시킴
장점
- 초기 로딩 속도가 빠르기 떄문에 사용자가 컨텐츠를 빨리 볼 수 있다.
- js이용한 랜더링이 아니기 떄문에 검색엔진 최적화가 가능하다.
단점
- 매번 페이지를 요청할 때마다 새로고침이 되기 떄문에 UX(사용자경험)가 SPA에 비해서 좋지 않다.
- 서버에 매번 요청을 하기 떄문에 서버의 부하가 커진다.
404