Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
1111Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
개발자

프론트엔드 아키텍처의 진화, 리액티브 자바스크립트

Matthew Tyson  | InfoWorld 2022.06.02
현재 소프트웨어 개발에서 가장 역동적인 분야는 프론트 엔드 아키텍처다. 동적인 사용자 인터페이스를 구축하기 위한 더욱 강력한 방법을 고안하고자 여러 혁신가들이 첨단 기술을 발전시키고 있다. 이들 작업은 대부분 맹렬한 속도로, 공개적으로 진행되고 있다.
 
스벨트킷(SvelteKit), 솔리드(Solid), 리액트(React), 퀵(Qwik), 아스트로(Astro) 같은 여러 오픈소스 자바스크립트 프로젝트 덕분에 우리는 미래를 향한 웹의 진화를 눈앞에서 지켜볼 수 있다. 이 글은 최근 오픈소스 자바스크립트 프로젝트의 움직임 이해를 위한 가이드다.
 
ⓒ Getty Images Bank
 

하이드레이션이란?

현대의 프론트 엔드 아키텍처를 개선하기 위한 활동의 대부분은 이른바 하이드레이션(hydration)에 초점을 둔다. 하이드레이션이 무엇이며 왜 현대 프론트 엔드 아키텍처의 중심인지 이해하기 위해 일단 전체적인 개념을 파악해야 한다. 반응성(reactivity)을 구현하려면 모든 프레임워크는 다음 다이어그램에 기술된 세 가지 측면을 처리해야 한다. 
 
반응성의 고차원적 측면 ⓒ IDG

이 다이어그램의 기본적인 메시지는 뷰의 프레임을 설정하고 상태를 저장하고 이 둘 간의 상호작용을 관리하는 작업을 프레임워크가 담당한다는 것이다(MVC 패턴을 잘 아는 사람에게는 친숙한 개념).
 
이 3가지 조각이 확보되면 준비가 된 것이다. 사용자는 페이지를 보고 페이지와 상호작용할 수 있다.
 
네이티브, 또는 기본적인 접근 방법은 단순히 클라이언트에서 필요한 모든 것(프레임, 리액티브 코드, 상태)을 가져와 보내는 방법이다. 그러면 클라이언트(브라우저)가 프레임을 표시하고(UI 페인팅) 자바스크립트를 해석하고 상태를 연결하는 작업을 한다.
 
이 접근 방법의 장점은 코드가 단순하며 따라서 코드를 이해하기도 쉽다는 것이다. 그러나 큰 단점도 있다. 첫 페이지 렌더에서 모든 요소를 기다려야 하고 사용자는 모든 네트워크 및 브라우저 작업이 완료되기까지의 과정을 거쳐야 한다. 또한 이 방법을 구현할 때 주의를 기울이지 않으면 페이지가 표시된 다음 부자연스럽게 최종 레이아웃으로 재배열되는 경향이 있다. 보기에 썩 좋지 않다.
 
그래서 개발자는 서버에 먼저 첫 페이지를 렌더링한 다음(서버 측 렌더링, SSR) 보내는 방식을 시도했다. 이렇게 하면 코드와 상태의 나머지 부분이 전송 및 부트스트랩되고, 그 사이 사용자에게 표시되는 페이지도 자연스럽다. 대단히 간소화해서 표현한 설명이지만 기본적인 개념은 그렇다.
 
기본 레이아웃이 배치되기까지 걸리는 시간을 최초 콘텐츠풀 페인트(FCP)라고 한다. 페이지가 도달해야 하는 다음 이정표는 인터랙티브까지 소요되는 시간(TTI)으로 측정된다. TTI는 사용자가 실제 그 페이지를 사용할 수 있게 될 때까지 걸리는 시간을 의미한다.
 
이렇게 초기 페이지에서 출발해 이를 상호작용을 가능하게 하는 과정이 바로 하이드레이션이다.
 

서버 측 렌더링의 한계

중요한 점은 SSR이 FCP를 개선하지만 TTI를 악화시키는 경향이 있다는 것이다. 따라서 쾌적한 개발자 경험(DX)을 유지하면서 둘 사이의 균형을 맞추는 것이 목표가 됐다.
 
하이드레이션을 개선하기 위한 다양한 접근 방법이 제안, 채택, 폐기, 수정, 결합됐다. 구현 세부 사항을 자세히 보면 그 복잡함에 놀라게 된다. FCP와 TTI의 균형과 우수한 DX의 결합? 말은 쉽지만 사실은 쉽지 않다.
 
이 복잡성의 원인은 온갖 종류의 절충점을 정리해야 한다는 점이다. 그러나 앞으로 나아갈 방향이 명확해지면 클라이언트 아키텍처에서 두 개의 결과를 예상해야 한다. 첫째, 지금 잘 만들어진 앱이 몇 년 전의 앱보다 미세하지만 명확하게 더 나은 경험을 제공하는 것과 마찬가지로 ‘차세대’의 느낌이 나는 웹 앱을 생성해야 한다.
 
둘째, 개선된 클라이언트 아키텍처는 성능 개선 이상의 훨씬 더 광범위한 효과로 이어져야 한다. 프론트 엔드 엔지니어는 복잡성을 해결함으로써 시스템적으로나 엔지니어 심리적으로 더 나은 모델에 도달하게 된다. 더 나은 아키텍처는 실제로 더 강력한 휴리스틱을 나타낸다. 이는 예측할 수 없는 경우가 많은 이후의 혜택으로 이어진다.
 
이것은 반응성 자체에서 확인할 수 있다. 반응성은 상태 바인딩이라는 짐을 개발자의 뇌에서 프레임워크로 덜어내는 수단을 제공한다. 그러나 혜택은 그게 전부가 아니다. 아키텍처는 더 단순해질 뿐만 아니라 더 일관적이게 된다. 이렇게 얻는 성능 및 기능성은 전반적으로 향상된다.
 
현대 자바스크립트 프레임워크는 서버와 클라이언트를 모두 수용하므로 이러한 발전의 결과는 애플리케이션 아키텍처에 전반적으로 광범위한 영향을 미칠 수 있다.
 

하이드레이션을 개선하기 위한 접근 방법

하이드레이션 상황을 개선하기 위한 기본적인 방법은 더 세분화된 시각으로 보는 것이다. 뷰, 상호작용, 상태를 더 작은 조각으로 분할함으로써 FCP와 TTI에 최적화해서 단계적으로 로드하고 활성화할 수 있다. 몇 가지 접근 방법을 살펴보면 다음과 같다.
 

자바스크립트 피하기

한 가지 접근 방법은 사이트에서 자바스크립트가 아예 불필요한 페이지를 분석하는 것이다. 이는 멀티페이지 앱(MPA)이라는 새로운 개념과 관련된다. 싱글 페이지 앱(SPA)과 단순한 페이지별 탐색(기본 웹 동작) 사이의 중간 지대라고 할 수 있다. 앱에서 HTML과 자산으로 즉각 전달이 가능한 부분을 찾아 이를 통해 가능한 최선의 SEO와 로드 시간을 얻는 개념이다.
 
이와 같은 비 JS 접근 방법은 예를 들어 스벨트킷에서 볼 수 있다. 물론 리액티브 상호작용이 필요한 페이지에서는 아무런 기능도 하지 않는다. 프레임워크는 SPA로 작동하는 페이지에서 여전히 하이드레이션을 해결해야 한다.
 

섬 아키텍처

아스트로는 섬(island) 아키텍처 개념을 채택했다. 핵심은 페이지에서 어느 부분이 정적인지, 어느 부분에 반응성이 필요한지를 파악하는 것이다. 이 지식을 활용해서 변경되지 않는 프레임 콘텐츠를 완전히 무시하고 다른 부분들(섬)을 필요에 따라 로드함으로써 페이지 로딩을 세밀하게 튜닝할 수 있다.
 
목적이 SPA를 개선하는 데 있다고 생각하면 이 개념을 이해하는 데 도움이 된다. 즉, 모든 정적 콘텐츠는 성능에 아무런 영향을 미치지 않으면서 제자리에서 역할을 수행할 수 있다. 모든 클라이언트 측 상태 및 탐색이 유지된다.
 
긍정적인 면은 이 접근 방법으로 필요한 어떤 일이 발생하기 전까지는(예를 들어 스크롤, 마우스 클릭 등) 각 섬의 로드를 지연시킬 수 있다는 점이고, 단점은 실제 환경에서 로드 타이밍이 부적절한 경우가 많다는 것이다(사용자가 뭔가를 하는 중에 로드되는 등).
 

지연 로드되는 경계

리액트의 서스펜스(Suspense) 구성요소와 같은 기능은 기본적인 하이드레이션 모델을 유지하면서 이후 지연 로드되는 경계에 따라 이를 분해하는 접근 방법을 제공한다. 장점은 익숙한 프로세스의 대부분을 그대로 사용한다는 것이고, 단점은 좋은 결과를 달성하기 위해서는 개발자 쪽에서 많은 생각과 조정이 필요하다는 것이다. 개발자는 구성요소 레이아웃과 빌드 타임 코드 분할 사이를 연결해야 한다.
 
또한 프레임워크의 대부분이 여전히 사전에 전달되어야 한다는 점에서 지연 로드의 유용함에도 한계가 있다.
 

재개 가능성

재개 가능성은 퀵 프레임워크에서 도입한 개념이다. 퀵은 애플리케이션 요소로 더 깊이 들어가서 지연 경계를 생성한다. (어떤 면에서는 매우 정교한 경계 지연 로드라고 볼 수도 있음) 재개 가능성은 서버가 작업을 마친 지점을 클라이언트가 이어받고 세부적으로 동기화된 상태를 유지할 수 있음을 의미한다.
 

서버 구성요소

리액트는 서버 구성요소 및 이와 관련된 스트리밍이라는 성능 개선의 개념을 내세운다. 서버 구성요소가 어떻게 움직이는지 설명하자면, 기본적으로 서버 구성요소는 앱의 어느 부분을 온전히 서버에서 실행할 수 있는지를 파악해서 클라이언트 측 렌더 불이익을 방지할 수 있게 해준다.
 

스트리밍

스트리밍은 서스펜스와 관련된 또 다른 발전 중인 리액트 기법이다. 핵심 개념은 모든 필요한 데이터가 서버에서 준비되기 전이라도 HTML 같은 프레임 콘텐츠를 클라이언트로 보낼 수 있도록 하는 것이다. 이를 구성요소 상호작용 발생에 따라 적용할 수 있다. 
 

부분 하이드레이션 또는 점진적 하이드레이션

용어 때문에 다소 헷갈릴 수도 있다. 아스트로는 자체 섬 아키텍처를 부분 하이드레이션이라고 표현한다. 간단히 말하자면 한 번에 페이지의 특정 요소만 하이드레이션된다는 뜻이다. 점진적 하이드레이션으로 지칭하는 경우도 있다. 두 용어 모두 다른 기법에 적용되기도 한다.
 
사실 섬, 부분, 점진적이라는 세 용어는 서로 겹치는 부분이 있다. 어쨌든 기본 개념은 동일하다. 앱이 더 지능적으로 로드되도록 하기 위해 앱의 구조를 더 작은 조각으로 분해해야 한다는 것이다.
 

파티션 분할된 하이드레이션?

이 용어를 조금 구분해 보자. 예를 들어 섬 아키텍처가 정적 프레임 내의 아스트로 스타일의 독립적인 상호운용성 조각을 나타낸다고 가정하자.
 
위로 올라가서 UI 분해라는 전체 개념이 부분 하이드레이션이며 아스트로의 섬은 그 한 가지 예라고 말할 수 있다. 그러나 여기에는 위험이 따른다. 아스트로==섬==부분이라는 개념이 이미 퍼져 있기 때문이다. 또한 부분이라는 용어는 하이드레이션의 불완전한 상태를 암시하는 듯한 오해를 불러일으킨다.
 
점진적이라는 말도 점진적 웹 앱(PWA)과의 혼란을 유발한다. 전체적인 개념을 의미할 때 파티션 분할된 하이드레이션이라는 용어가 더 나을지도 모르겠다.
 

프론트 엔드 아키텍처 발전

자바스크립트의 프론트 엔드 아키텍처와 관련된 활동은 필자가 지금까지 본 것 중에서 가장 흥미로운 코드 작업으로 이어졌다. 이 분야에는 새로운 개념적 영역을 탐구하고 이를 위해 혁신적인 프로그래밍 작업을 수행하는 열정적인 개인이 많다. 이들은 개방적으로 교류하고 아이디어를 공유하며 협력한다. 보기 좋은 모습이다.
 
이 중에는 라이언 카니아토(솔리드), 미스코 히버리(퀵)이 있다. 둘 다 최첨단 기술을 추구하며 그 과정에서 나온 코드와 정보를 모두에게 공개하는 개인이다. 카니아토의 작업을 살펴보기에 좋은 두 출발점은 여기와 여기, 히버리의 경우 여기와 여기다.
editor@itworld.co.kr 
 Tags 자바스크립트 프론트엔드아키텍처 프론트엔드 프로그래밍 하이드레이션 PWA 리액트
Sponsored

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2022 International Data Group. All rights reserved.