Front-End 면접 질문 대비 Part4(SSR, CSR, Execution Context, Iterator, Event Delegation)

이희제·2021년 1월 3일
25

직무 면접 대비

목록 보기
4/6

오늘도 이어서 시작하겠습니다.


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?

SSR 개념 이해와 Next.js로 실습까지 해보는 SSR 환경 구축하기

실행 컨텍스트와 자바스크립트의 동작 원리

profile
그냥 하자

5개의 댓글

comment-user-thumbnail
2021년 1월 3일

좋은정보 감사합니당

답글 달기
comment-user-thumbnail
2021년 1월 5일

시리즈 정리를 잘 하시네요
복습하는 재미로 잘 보고 갑니다

1개의 답글
comment-user-thumbnail
2021년 1월 18일

와.. 우리나라의 미래가 밝다

1개의 답글