오늘도 이어서 시작하겠습니다.
SSR vs CSR
SSR(Server Side Rendering)
완전하게 만들어진 HTML 파일을 서버로부터 받아오고 이를 웹브라우저에 렌더링합니다.
웹서버에 요청을 할 때마다 브라우저 새로고침이 일어나고 새로운 페이지는 서버에 요청하는 것입니다.
장점
- 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
- 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다.
단점
- 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.
- 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.
CSR(Client Side Rendering)
클라이언트 사이드 렌더링은 처음에 웹서버에 요청할 때 데이터가 없는 문서를 반환합니다.
그 후 HTML 및 static 파일들이 로드되면서 데이터가 있으면 데이터를 서버에 요청하고 화면에 렌더링해줍니다.
즉 사용자 요청이 올 때마다 서버에 리소스를 요청하고 이를 가져와 웹 브라우저에 보여주는 방식입니다.
장점
- 첫 로딩에 HTML과 static파일들만 다 받으면, 동적으로 빠르게 Rendering하기 때문에 사용자 UX가 뛰어나다. (필요한 부분만 요청하면 되기 때문에)
- 서버에 요청하는 횟수가 훨씬 적기 때문에 서버 부담이 덜하다.
단점
- 모든 HTML과 static파일이 로드될 때까지 기다려야 한다.=> 초기 구동속도 느림.
(리소스를 Chunk(청크) 단위로 묶어서 요청할 때만 다운받에 하는 방식으로 완화시킬 수는 있지만 해결할 수는 없다.) - SEO(검색엔진 최적화) 문제가 발생할 수 있다. (검색엔진이 크롤링을 하는데 어려움을 겪기 때문에, 구글 검색엔진은 javascript까지 크롤링을 하지만 다른 검색엔진의 경우 그렇지 않음)
CSR과 SSR의 비교
👍🏻 지금부터는 자바스크립트에 대한 내용입니다.
실행 컨텍스트
✅ 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리입니다.
✅ 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해서 필요한 환경이라고 할 수 있습니다.
[실행 컨텍스트 구조]
자세히는 ➡️ 실행컨텍스트
Iterator(이터레이터)
✅ iterator 은 객체를 next 메서드로 순환 할 수 있는 객체입니다.
const iterator = [1, 2, 3][Symbol.iterator]();
iterator.next().value; // 1
iterator.next().value; // 2
iterator.next().value; // 3
iterator.next().done; // true이벤트 위임(Event Delegation)
✅ 이벤트 위임(Event Delegation) 이란 동적으로 노드를 생성하고 삭제할 때 각 노드에 대해 이벤트를 추가 하지 않고, 상위 노드에서 하위 노드의 이벤트를 제어 하는 방식입니다.
예시 : 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
마무리
오늘한 내용 중 실행 컨텍스트가 가장 복잡하고 어려운 내용인 것 같습니다.
확실히 동작원리를 알고 자바스크립트를 써야한다고 느끼게 되었습니다.
Reference
CSR, SSR, SPA, MPA?
오늘만 열심히 살고 모든 걸 남기되 후회는 남기지 말자
좋은정보 감사합니당