[책] ch1.SPA와 PWA-프론트엔드 구현 기술의 최신동향

초록귤·2022년 3월 24일
0

클라이언트 사이드 라우팅

웹 애플리케이션, 그 중에서도 서버 사이드 분야에서 "라우팅"이라고 하면 사용자의 요청이 들어온 URL에 대해 적절한 응답(HTML 혹은 JSON)을 돌려주기 위해 어떤 처리와 매치시킬지를 결정하는 과정을 가리킨다.

클라이언트 사이드에서 말하는 라우팅은 ?

SPA는 하나 이상의 화면 상태로 구성된다. 그러나 일반적인 웹 애플리케이션과 달리 URL 단위로 서버에서 HTML 응답을 받아오지 않기 떄문에 생각없이 개발하다 보면 URL 하나에서 화면이 변화하는 애플리케이션이 된다.
이 경우 브라우저의 이전 버튼이나 북마크를 사용할 수 없고, 중간 상태를 공유할 수 없기 때문에 사용자가 곤란을 겪게 된다.
이 때문에 클라이언트 측에서도 URL마다 화면을 만들어두거나 HTML5의 히스토리 API로 이전 버튼을 사용할 수 있게끔 해야 한다.
이런 것들을 서버 사이드 라우팅과 구분하기 위해 "클라이언트 사이드 라우팅"이라고 한다.

CSS in JS

문자 그대로 자바스크립트에 CSS가 내장된 것, 여러 라이브러리에서 각각 다른 작성법을 지원한다. 스타일 정의는 최종적으로 CSS로 변환되어 HTML에 적용된다.이 적용 방법도 제각각이어서 요소에 style 속성이 기재되는 타입이나 분산된 스타일 정의를 CSS 하나로 합쳐서 파일로 출력하거나, head 태그 안에 출력한다.

CSS로는 SCSS나 PostCSS를 사용하지 않고는 동적 처리를 구현하기 어려웠다. 하지만 CSS in JS에서는 자바스크립트를 사용한 처리를 도입할 수 있기 때문에 이를 쉽게 구현할 수 있다.

CSS in JS 라이브러리 중에는 styled-components, emotion, aphrodite, 등이 유명하다.

컴포넌트 지향

컴포넌트와 컴포넌트 간의 상호작용 형태로 프로그램을 작성.
컴포넌트가 주체가 되어 컴포넌트 사이의 관계로 애플리케이션 전체를 구성하는 것을 "컴포넌트 지향"이라고 한다. 이는 애플리케이션의 기본 정보를 포함하는 페이지를 통쨰로 하나의 루트 컴포넌트로 정의한다.
이 루트 컴포넌트 안에 다른 컴포넌트를 포함시키는 형태로 컴포넌트 간의 부모관계 및 형제관계를 형성하고 컴포넌트 사이의 상호작용을 정의하여 애플리케이션을 만든다.
(cf. 객체지향 : 객체와 객체의 상호작용 형태로 프로그램을 작성)

컴포넌트 지향 애플리케이션을 구현할 떄는 컴포넌트 각각이 단독으로 필요한 기능을 수행할 수 있는 스타일과 스크립트를 포함하는 독립된 존재여야 하는 것이 중요하다.

SSR과 프리 렌더링

프리렌더링 = "미리 렌더링 해놓는다"

Server Side Rendering .
일반적인 웹 애플리케이션에서는 사용자가 브라우저를 통해 접근하는 콘텐츠가 이미 삽입된 HTML을 응답으로 받아온다. 즉, SPA로 치면 이미 렌더링이 끝난 HTML을 받아오는 것이다.

이와 달리, SPA에서는 알맹이가 빈 HTML을 응답으로 받는다.
<div id="app"></div>
이 HTML의 #app 안에 SPA의 콘텐츠가 삽입되어 HTML이 동적으로 생성된다. 그래서 클라이언트 측에서 렌더링이 이루어진다고 표현하는 것이다.

여기까지는 일반적인 SPA의 경우이다.
클라이언트 측에서 렌더링할 때 문제점은 페이지 표시 속도와 크롤러가 대응하지 못하는 것을 들 수 있다.페이지 표시 속도면을 생각해보면 빈 HTML이 먼저 표시된 다음에 콘텐츠가 렌더링되므로 전체 HTML이 바로 표시되는 경우에 비해 속도가 느려진다. 콘텐츠가 API를 경유하여 전달된 다음 렌더링된다면 더욱 속도가 느려진다.

크롤러 대응과 관련해서는 두 가지 문제가 있다.

    1. SEO(검색 엔진 최적화) 문제- 주로 구글
      즉, 페이지가 검색 결과에 잘 포함될 지 여부
      - 그러나 구글은 js로 렌더링된 페이지도 정상적으로 수집해 주므로 SPA 콘텐츠도 검색 대상이 된다.
    1. SNS에 대한 문제- 쉽게 해결되지 않는다
      정상적으로 웹 페이지가 공유되는지 여부이다.
      - 대부분의 SNS 크롤러는 URL에 접근하여 얻은 응답 결과를 바로 인덱싱하기 때문이다. 다시 말해 wget이나 curl 같은 명령행 도구로 URL에 접근했을 때나 마찬가지가 된다. 이런 경우에 별도 대책을 세워놓지 않은 SPA는 자바스크립트가 채 실행되기 전에 페이지가 수집된다. 서버로부터 들어오는 HTML은 (콘텐츠가 들어갈 자리에) 빈 div 요소가 있기 때문이다. 트위터와 페이스북에서 페이지 공유 시에 사용되는 썸네일 수집용 크롤러가 여기에 해당한다.

SPA의 약점은 기계가독성이 낮다는 점이다.
크롤러의 유형과 상관없이 정상적으로 콘텐츠를 제공하려면 일반적인 웹사이트와 동등한 정보를 HTTP 응답에 실어보낼 수 있는 방법을 사용하면 된다.

해결방법

  • 1. SSR(서버 사이드 렌더링) 을 적용하면 서버에서 클라이언트로 전달되는 응답 결과에 이미 (콘텐츠까지) 렌더링을 마친 상태를 전달한다. 이를 구현하려면 어떤 방법으로든 서버측에서 SPA에서 만들 렌더링 결과를 완성해야 한다.
    1. 프리 렌더링 (ex. NextJS)
      SSR과는 달리 서버에 렌더링 조직이 존재하지 않는다. 요청이 들어왔을 때 대상이 크롤러인지 판단하여 크롤러인 경우 가상 브라우저(headless browser)로 접근하는 방식으로 생성한 다음 저장해둔 렌더링 결과를 제공하는 방식이다.

일렉트론(Electron)

자바스크립트로 윈도우, macOS, 리눅스에서 모두 동작하는 데스크톱 애플리케이션을 만들 수 있다.

profile
초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.

0개의 댓글