퀵의 현재 상태
퀵은 아직 초기 단계지만 출범 당시와 비교하면 상당히 발전했다. 지금은 스택블리츠(StackBlitz)에 모든 기능이 포함된 예제가 있고 REPL 플레이그라운드와 명령줄 툴을 지원한다. 또한 더 개발자 친화적인 리액트(React)와 비슷한 구문도 지원한다. 내부에는 상태, 템플릿 및 리스너에 따라 리액티브 경계를 정의하는 독자적인 리액티브 엔진이 있다.재개 가능성
퀵은 서버 측 렌더링과 클라이언트 측 렌더링의 조합을 사용해 현대 프레임워크에서 발생하는 이중 부담, 즉 서버와 클라이언트에서 한 번씩, 총 두 번 하이드레이션 작업을 수행하는 데 따르는 부담을 방지한다. 퀵을 만든 미스코 헤브리는 다음과 같이 설명했다."퀵의 기본 개념은 재개가 가능하다는 것(resumable)이다. 서버에서 작업을 멈춘 부분부터 이어서 할 수 있다. 클라이언트에서 실행되는 매우 작은 양의 코드밖에 없다. 다르게 표현해 보자. 최대한 온전히 기능하는 HTML 페이지를 설정하는 일은 서버에 맡기고, 사용자를 위한 프로세스를 이어서, 즉 재개하기 위한 가능한 가장 작은 양의 작업을 수행하는 일은 클라이언트에 맡긴다.
SSR(서버 측 렌더링)을 사용하는 리액티브 프레임워크의 일반적인 흐름은 먼저 서버에 앱 버전을 생성한 후 이를 클라이언트로 보내면 클라이언트에서 이 골격이 갖춰진 앱을 렌더링하는 것이다. 이 시점에서 클라이언트 측 앱이 작업을 넘겨받아서 기능하는 클라이언트를 만들기 위해 같은 앱을 다시 부트스트랩한다. 이 프로세스를 하이드레이션(hydration)이라고 한다. 하이드레이션의 효율을 높이기 위한 여러 가지 방법이 있지만 퀵은 재개 가능성이라는 새로운 프로세스를 위해 그러한 방법을 포기한다. 정리하면 재개 가능성은 클라이언트에서 앱을 다시 빌드할 필요 없이 서버가 작업을 멈춘 부분을 클라이언트가 이어받을 수 있음을 의미한다.
상호작용 시간
퀵이 적극적으로 개선한 성능 지표는 상호작용까지 소요되는 시간(TTI)이다. TTI는 사용자가 웹 페이지에 요청을 하는 시점부터 페이지가 사용자의 상호작용에 응답하기까지 소요되는 시간을 의미한다.이는 기존의 로드 시간(TTL)과 차이가 있다. TTL이 클라이언트가 필요한 데이터를 모두 수신할 때까지 걸리는 시간을 추적한다면(따라서 이 지표는 파일 크기와 네트워크 속도에 크게 좌우됨), TTI는 현대 JS 프레임워크의 중요한 사실, 즉 데이터가 다운로드되면 클라이언트는 페이지의 상호운용성을 구현하기 위해 필요한 자바스크립트 코드를 압축 해제해서 실행해야 한다는 점을 고려한다.
리액티브 엔진은 많은 작업을 수행한다. 엔진은 상태 변화를 기반으로 표시되는 내용을 수정하고 코드를 기반으로 동작 방식을 수정하는 표현식과 변수를 통해 JSX와 같은 모든 마크업을 풀어야 한다(파싱). 스펙트럼의 반대쪽 끝에는 간결한 HTML 페이지가 있다. 브라우저가 이 페이지를 확보하면 페이지가 작동할 준비는 완료된다. 구글의 페이지스피드 인사이트(PageSpeed Insights)가 원시 HTML에는 100점을 부여하면서 Reddit.com과 같은 페이지에 32점을 부여하는 이유가 여기에 있다.
클로저와 리스너
헤브리는 빠른 TTI를 가로막는 기술적 장애물을 '클로저(Closures)에 의한 사망'이라고 표현한다. 간단히 말해, 모든 클로저가 둘러싼 정보의 우주를 유지해야 한다는 사실은 런타임 앱이 즉시 로드된(eagerly loaded) 코드의 레이어 케이크라는 것을 의미한다.이 문제에 대한 퀵의 해법은 직렬화된 리스너와 상호작용하는 전역 이벤트 리스너(listeners)를 사용하는 것이다. 즉, 클로저에서 (앞으로 실행될지 여부에 관계없이) 리스너가 다운로드되어 래핑되는 것이 아니라, 범용 이벤트 리스너를 사용해 요구 시 구현되는 리스너를 조율한다. 퀵은 HTML과 함께 반응성을 제공해서 모두 직렬화 가능하도록 하는 것을 목표로 한다. 그러면 마크업에 캡슐화된 정보에 따라 런타임에 반응성을 나타내기 위한 작은 실행 파일만 있으면 된다.
코드 분할의 세밀한 조정
이 부분을 바라보는 또 다른 시각은 퀵이 세밀한 코드 분할을 수행한다는 것이다. 퀵은 상호작용 코드를 필요에 따라, 사용자가 요구할 때 로드한다. 그러면 번들러(Bundlers)는 적당한 시점에 이 청크를 더 큰 비트로 패키징할 수 있다.퀵은 상태, 템플릿, 리스너 만들기를 위한 3가지 기능으로 새롭게 만들어졌다. 덕분에 프레임워크는 당면한 작업에 필요한 부분만 로드하면 된다. 청크 부분에 대한 더 자세한 내용은 여기서 확인할 수 있다.
과거에는 상태, 템플릿, 리스너의 3가지 경계를 개발자가 직접 코딩했다. 그러나 백그라운드에서 리액트와 같은 구문을 경계로 변환해주는 새로운 옵티마이저(Optimizer) 툴 덕분에 익숙한 DX를 접할 수 있다. 또한 옵티마이저는 실제 코드를 필요에 따라 작은 덩어리로 앱을 재개할 수 있는 작은 스텁 모음으로 바꿔주는 작업을 한다.
옵티마이저에서 템블릿과 리스너는 달러 기호로 표시되며 상태는 useStore 후크로 처리된다. 퀵 코드의 최종 출력은 다른 프레임워크와 다른 형태지만 옵티마이저와 함께 퀵을 사용하면 다른 프레임워크와 대등해진다. 또한 퀵에는 풀 스케일 앱을 더 쉽게 빌드할 수 있게 해주는, 라우팅과 같은 고차적 기능 집합인 퀵시티(QwikCity)도 있다.
퀵 실전
이제 퀵의 개념을 이해했으니, 코딩을 살펴보자. <예시 1>은 퀵으로 작성한 간단한 구성요소를 보여준다. 퀵 FAQ에서 발췌했다.import { component$ } from '@builder.io/qwik';
export const App = component$(() => {
console.log('render');
return <p onClick$={() => console.log('hello')}>Hello Qwik</p>;
});
<예시 1>은 퀵의 구성요소가 익명 함수로 정의돼 퀵 라이브러리의 component$ 함수로 전달되는 것을 보여준다. 퀵에 나오는 달러 기호($)는 옵티마이저에게 할 일이 있음을 알리는 역할을 한다. 퀵은 앱의 달러 기호가 붙은 부분에서 세분화된 지연 로드(lazy loading) 경계를 활용한다. <예시 1>의 onClick$은 특수한 퀵 구문의 또 다른 예다. 퀵은 몇 가지 트릭을 사용해 기능이 실제로 필요할 때 그 기능을 지원하는 데 필요한 자바스크립트만 로드한다. <예시 1>의 코드는 옵티마이저에 의해 <예시 2>와 같이 여러 세그먼트로 분할된다.
// The app.js file itself
import { componentQrl, qrl } from "@builder.io/qwik";
const App = /*#__PURE__*/
componentQrl(qrl(()=>import('./app_component_akbu84a8zes.js'), "App_component_AkbU84a8zes"));
export { App };
// app_component_akbu84a8zes.js
import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
import { qrl } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
console.log('render');
return /*#__PURE__*/ _jsx("p", {
onClick$: qrl(()=>import("./app_component_p_onclick_01pegc10cpw"), "App_component_p_onClick_01pEgC10cpw"),
children: "Hello Qwik"
});
};
// app_component_p_onclick_01pegc10cpw.js
export const App_component_p_onClick_01pEgC10cpw = ()=>console.
<예시 2>에서는 실제 구성요소 기능을 포함하는 대신 라이브러리의 componentQrl() 함수를 사용한 참조를 포함한다. 이 함수는 익명 함수를 사용해 생성된 구성요소 파일을 가져오는 qrl() 함수를 취한다. 구성요소 간의 이 연결은 모두 옵티마이저에 의해 내부적으로 관리되므로 개발자가 직접적으로 신경을 쓸 필요가 없다.
QRL은 Qwik URL의 약어로, 퀵이 지연 로드된 대상을 참조하는 방식이다. 기본적으로 프레임워크는 뭔가의 로드를 연기해야 할 때마다 QRL을 삽입하고 이는 QRL별 소비자(구성요소, 상태 또는 템플릿 함수 등)에 의해 래핑된다. 예를 들어 componentQRL은 자식 구성요소에 있는 코드에서 적절한 시점에 로드할 수 있고 부모는 레이아웃을 빠르게 표시할 수 있다. onClick 핸들러와 마찬가지로 클릭이 발생할 때 평가할 수 있다.
퀵 CLI
명령줄 툴은 npm에서 받을 수 있고 생성, 개발 모드, 프로덕션 빌드를 포함해 기본적인 기능이 있다. 퀵 CLI는 바이트(Vite)를 빌드 툴로 사용한다. npm create qwik@latest로 인터랙티브 프롬프트를 실행해 새 앱을 시작할 수 있다. 간단한 앱을 만들고 프로덕션 빌드를 실행하면 앞서 설명한, 지연 로드된 앱의 개별적인 여러 청크가 모두 포함된 dist 디렉터리가 생성된다.퀵 조정
퀵 구문을 재미있게 익힐 수 있는 방법으로 퀵 코드와 리액트 코드를 나란히 비교하여 보여주는 퀵 치트 시트(Qwik Cheat Sheet)가 있다. 이걸 보면 전체적으로 전환이 그렇게 어려운 일은 아니다. 매우 비슷한 부분도 있고 주로 사고의 전환이 필요한 부분도 있다. 더 중요한 점은 옵티마이저를 통해 얻는 구문의 유사성에도 불구하고 퀵의 리액티브 시스템은 리액트와 같은 프레임워크와는 매우 다르다는 것이다.정리하면 코드 분할과 지연 로드에 대한 혁신적인 퀵의 접근 방식은 프론트엔드 자바스크립트를 위한 새로운 길을 제시한다. 앞으로 어떻게 전개될지 흥미롭게 지켜볼 만한 부분이다.
editor@itworld.co.kr
Sponsored
Surfshark
“유료 VPN, 분명한 가치 있다” VPN 선택 가이드
ⓒ Surfshark VPN(가상 사설 네트워크, Virtual Private Network)은 인터넷 사용자에게 개인 정보 보호와 보안을 제공하는 중요한 도구로 널리 인정받고 있다. VPN은 공공 와이파이 환경에서도 데이터를 안전하게 전송할 수 있고, 개인 정보를 보호하는 데 도움을 준다. VPN 서비스의 수요가 증가하는 것도 같은 이유에서다. 동시에 유료와 무료 중 어떤 VPN을 선택해야 할지 많은 관심을 가지고 살펴보는 사용자가 많다. 가장 먼저 사용자의 관심을 끄는 것은 별도의 예산 부담이 없는 무료 VPN이지만, 그만큼의 한계도 있다. 무료 VPN, 정말 괜찮을까? 무료 VPN 서비스는 편리하고 경제적 부담도 없지만 고려할 점이 아예 없는 것은 아니다. 보안 우려 대부분의 무료 VPN 서비스는 유료 서비스에 비해 보안 수준이 낮을 수 있다. 일부 무료 VPN은 사용자 데이터를 수집해 광고주나 서드파티 업체에 판매하는 경우도 있다. 이러한 상황에서 개인 정보가 유출될 우려가 있다. 속도와 대역폭 제한 무료 VPN 서비스는 종종 속도와 대역폭에 제한을 생긴다. 따라서 사용자는 느린 인터넷 속도를 경험할 수 있으며, 높은 대역폭이 필요한 작업을 수행하는 데 제약을 받을 수 있다. 서비스 제한 무료 VPN 서비스는 종종 서버 위치가 적거나 특정 서비스 또는 웹사이트에 액세스하지 못하는 경우가 생긴다. 또한 사용자 수가 늘어나 서버 부하가 증가하면 서비스의 안정성이 저하될 수 있다. 광고 및 추적 위험 일부 무료 VPN은 광고를 삽입하거나 사용자의 온라인 활동을 추적하여 광고주에게 판매할 수 있다. 이 경우 사용자가 광고를 보아야 하거나 개인 정보를 노출해야 할 수도 있다. 제한된 기능 무료 VPN은 유료 버전에 비해 기능이 제한될 수 있다. 예를 들어, 특정 프로토콜이나 고급 보안 기능을 지원하지 않는 경우가 그렇다. 유료 VPN의 필요성 최근 유행하는 로맨스 스캠은 인터넷 사기의 일종으로, 온라인 데이트나 소셜 미디어를 통해 가짜 프로필을 만들어 상대를 속이는 행위다. 이러한 상황에서 VPN은 사용자가 안전한 연결을 유지하고 사기 행위를 방지하는 데 도움이 된다. VPN을 통해 사용자는 상대방의 신원을 확인하고 의심스러운 활동을 감지할 수 있다. 서프샤크 VPN은 구독 요금제 가입 후 7일간의 무료 체험을 제공하고 있다. ⓒ Surfshark 그 외에도 유료 VPN만의 강점을 적극 이용해야 하는 이유는 다음 3가지로 요약할 수 있다. 보안 강화 해외 여행객이 증가함에 따라 공공 와이파이를 사용하는 경우가 늘어나고 있다. 그러나 공공 와이파이는 보안이 취약해 개인 정보를 노출할 위험이 있다. 따라서 VPN을 사용하여 데이터를 암호화하고 개인 정보를 보호하는 것이 중요하다. 서프샤크 VPN은 사용자의 개인 정보를 안전하게 유지하고 해킹을 방지하는 데 유용하다. 개인정보 보호 인터넷 사용자의 검색 기록과 콘텐츠 소비 패턴은 플랫폼에 의해 추적될 수 있다. VPN을 사용하면 사용자의 IP 주소와 로그를 숨길 수 있으며, 개인 정보를 보호할 수 있다. 또한 VPN은 사용자의 위치를 숨기고 인터넷 활동을 익명으로 유지하는 데 도움이 된다. 지역 제한 해제 해외 여행 중에도 한국에서 송금이 필요한 경우가 생길 수 있다. 그러나 IP가 해외 주소이므로 은행 앱에 접근하는 것이 제한될 수 있다. VPN을 사용하면 지역 제한을 해제해 해외에서도 한국 인터넷 서비스를 이용할 수 있다. 따라서 해외에서도 안전하고 편리하게 인터넷을 이용할 수 있다. 빠르고 안전한 유료 VPN, 서프샤크 VPN ⓒ Surfshark 뛰어난 보안 서프샤크 VPN은 강력한 암호화 기술을 사용하여 사용자의 인터넷 연결을 안전하게 보호한다. 이는 사용자의 개인 정보와 데이터를 보호하고 외부 공격으로부터 사용자를 보호하는 데 도움이 된다. 다양한 서버 위치 서프샤크 VPN은 전 세계 곳곳에 여러 서버가 위치하고 있어, 사용자가 지역 제한된 콘텐츠에 액세스할 수 있다. 해외에서도 로컬 콘텐츠에 손쉽게 접근할 수 있음은 물론이다. 속도와 대역폭 서프샤크 VPN은 빠른 속도와 무제한 대역폭을 제공하여 사용자가 원활한 인터넷 경험을 누릴 수 있도록 지원한다. 온라인 게임, 스트리밍, 다운로드 등 대역폭이 필요한 활동에 이상적이다. 다양한 플랫폼 지원 서프샤크 VPN은 다양한 플랫폼 및 디바이스에서 사용할 수 있다. 윈도우, 맥OS, iOS, 안드로이드 등 다양한 운영체제 및 디바이스에서 호환되어 사용자가 어디서나 안전한 인터넷을 즐길 수 있다. 디바이스 무제한 연결 서프샤크 VPN은 무제한 연결을 제공하여 사용자가 필요할 때 언제든지 디바이스의 갯수에 상관없이 VPN을 사용할 수 있다.