아시다시피 지난 몇 년 동안 수많은 JavaScript 프레임워크가 빠르게 등장했습니다. 그러나 이것은 테이블에 완전히 새로운 렌더링 패러다임을 제공합니다. 다름 아닌 Qwik입니다.

Qwik은 말 그대로 매우 빠릅니다. 현재 가장 빠른 프런트 엔드 프레임워크를 주장합니다. 사이트의 크기와 복잡성에 관계없이 매우 빠른 페이지 로드 시간을 제공합니다. 규모에 따라 일관된 성능을 달성할 수 있으므로 O(1) 복잡성으로 간주됩니다.

Qwik 1.0 안정 버전이 최근에 출시되었습니다. MIT 라이센스에 따른 오픈 소스 프로젝트입니다. 공식 웹 사이트 및 공개 GitHub 리포지토리 에서 탐색할 수 있습니다 .

따라서 이 기사는 이 훌륭한 프레임워크, 기능 및 내부 전략을 안내하는 것입니다. 다이빙하자.

Qwik으로 이동하기 전에 먼저 JavaScript 프레임워크에서 렌더링이 발생하는 방식을 이해해야 합니다. 클라이언트 측 렌더링과 서버 측 렌더링의 두 가지 렌더링 옵션을 사용할 수 있습니다.

클라이언트측 렌더링

이름에서 알 수 있듯이 브라우저는 클라이언트 측 렌더링에서 클라이언트 측 HTML 파일의 모든 데이터를 렌더링합니다.

사용자가 웹사이트를 방문하면 브라우저는 서버에 요청을 보내 HTML, CSS 및 JS 파일을 검색합니다. 이러한 파일을 받은 후 브라우저는 해당 파일을 실행하고 웹 사이트를 렌더링합니다. 사용자가 콘텐츠를 보고 상호 작용할 수 있도록 합니다.

여기에는 클라이언트 측에서 모든 논리, 데이터 검색, 라우팅 및 템플릿 실행이 포함됩니다. 사용자는 일반적으로 이 전체 프로세스가 발생할 때까지 빈 페이지를 보게 됩니다.

이 접근 방식의 중요한 단점은 응용 프로그램이 커짐에 따라 초기 페이지를 렌더링하는 시간이 늘어난다는 것입니다.

서버측 렌더링

서버 측 렌더링에서 서버는 렌더링된 HTML을 응답으로 보냅니다.

클라이언트 측 렌더링에서와 같이 JavaScript 파일을 실행하는 데 시간을 소비하는 대신 브라우저는 이 응답을 사용하여 웹 사이트를 즉시 표시할 수 있습니다.

이렇게 하면 초기 렌더링 시간이 크게 단축됩니다. 따라서 사용자는 빈 화면을 응시하지 않고도 웹 사이트의 콘텐츠를 빠르게 볼 수 있습니다.

그러나 페이지는 보기만 가능하며 JavaScript 파일이 DOM에 로드될 때까지 대화형이 아닙니다. JS가 로드된 후 페이지는 사용자와 상호 작용할 수 있습니다.

수화 과정

위에서 설명한 것처럼 브라우저가 처음에 표시하는 페이지는 아직 상호 작용할 수 없습니다. 웹 페이지와 상호 작용하려면 JavaScript를 DOM에 로드해야 합니다. 이 과정을 수화라고합니다.

여기에는 이벤트 리스너 연결, 애플리케이션 상태 복원 및 처음부터 전체 구성 요소 트리 재구축이 포함됩니다.

이 기술은 오늘날 Next.js, Nuxt.js, Angular 등과 같은 거의 모든 메타 프레임워크에서 사용됩니다. (Astro 제외 — 부분 수화 사용)

이 수화 프로세스의 단점은 페이지가 사용자 화면에 렌더링되지만 코드를 다운로드하고 다시 실행할 때까지 대화형이 아니라는 것입니다.

상당한 양의 JavaScript 코드를 실행해야 하는 경우 이로 인해 웹 애플리케이션 속도가 느려질 수 있습니다.

이러한 JavaScript 프레임워크의 대부분은 한 번에 모든 코드를 다운로드하고 실행합니다. 결과적으로 로드 시간(상호 작용 시간)이 느려지고 선형 O(n) 진행을 따릅니다.

따라서 이 기술을 기반으로 하는 프레임워크는 웹 페이지와의 상호 작용에서 지연을 관찰합니다.

이것이 바로 Qwik이 해결한 문제입니다.

Qwik이 빠른 이유는 무엇입니까?

Qwik이 매우 빠르다는 주된 이유는 이 수화 과정을 제거했기 때문입니다.

Resumability 라는 테이블에 완전히 새로운 렌더링 패러다임을 제공하여 수화의 필요성을 완전히 제거합니다. (제로 하이드레이션)

재개 가능성이란 무엇입니까?

재개 가능성은 모든 애플리케이션 논리를 재생하거나 다운로드할 필요 없이 서버에서 실행을 일시 중지하고 클라이언트에서 재개할 수 있는 기능을 말합니다.

Qwik 앱은 HTML로 완전히 직렬화할 수 있습니다. 언제든지 작업을 수행하고 애플리케이션의 모든 데이터와 클로저를 캡처하고 모두 HTML 문자열로 나타낼 수 있습니다.

그런 다음 브라우저는 JavaScript를 전혀 실행할 필요 없이 서버가 중단된 위치를 선택할 수 있습니다.

따라서 Qwik과 다른 프레임워크 사이에는 엄청난 시간차가 있을 것입니다.

이것이 어떻게 가능했는지 전략과 함께 자세히 논의해 봅시다.

Qwik의 전략

Qwik은 두 가지 주요 전략을 통해 이 목표를 달성합니다.

1. 가능한 한 오랫동안 JavaScript 실행 및 다운로드를 지연하십시오. (시작 코드 제외)
2. 서버에서 애플리케이션 및 프레임워크의 실행 상태를 직렬화하고 클라이언트에서 다시 시작합니다. (참고 — Qwik은 현재 페이지에 필요한 데이터만 직렬화합니다.)

Qwik에서는 모든 것이 지연 로드 가능합니다.

• 렌더링 시 구성 요소(초기화 블록 및 렌더링 블록)
• 시계의 구성 요소(부수 효과, 입력이 변경된 경우에만 다운로드됨)
• 리스너(상호작용 시에만 다운로드됨)
• 스타일(서버에서 아직 제공하지 않은 경우에만 다운로드됨)

코드 연습

지연 로딩 및 직렬화를 더 잘 이해하기 위해 몇 가지 코드 예제를 살펴보겠습니다.

클릭하면 내 이름을 알리는 버튼이 있는 기본 구성 요소를 만들었습니다. React와 매우 유사하므로 Qwik의 구문에 대해 걱정할 필요가 없습니다.

리액트를 아십니까? 당신은 Qwik을 알고 있습니다.

— 공식 문서

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

여기서 특별한 점을 알 수 있습니다. 예! 달러 기호입니다.

이게 뭐야 $?

Qwik에는 옵티마이저가 있습니다. 컴파일러와 비슷합니다. 이 달러 기호는 뒤에 오는 함수가 지연 로드되어야 함을 Optimizer에 알려줍니다.

즉, 버튼을 클릭할 때까지 JS가 로드되지 않습니다. 이 지연 로드 JS 번들은 실행하려는 코드를 포함합니다.

또한 다른 지연 로딩 번들에서 시작된 다른 구성 요소가 공유할 수 있는 상태를 업데이트하기 위해 어휘 환경에 액세스할 수 있습니다.

Qwik은 즉시 사용 가능한 모든 코드 분할 및 지연 로드를 처리합니다. 이것은 개발자로서 그것에 대해 생각할 필요조차 없기 때문에 매우 유익합니다. Qwik의 기본 동작입니다.

후드 아래에서 어떤 일이 발생합니까?

이제 재개 가능성을 알고 있습니다. 그러나 실제로 어떻게 작동합니까? 더 깊이 파고들자.

이전 예제의 HTML 탭으로 이동하면 q 콜론이 많이 표시됩니다. (큐:)

Qwik은 HTML에 추가 정보를 입력합니다. 정보를 HTML로 직렬화하는 것으로 알려져 있습니다. 나중에 결정을 내릴 수 있도록.

Qwik은 다음 형식으로 이벤트 리스너를 DOM으로 직렬화합니다.

<button on:click="./chunk.js#handler_symbol">Click Here</button>

이것은 Qwik Optimizer에서 수행합니다. 앞에서 설명한 것처럼 Qwik Optimizer는 일종의 컴파일러입니다.

내가 작성한 코드(JS 파일)를 검사하고 코드를 기반으로 새 파일을 생성합니다. 그런 다음 코드가 남아 있는 위치를 새 파일에 대한 참조로 바꿉니다.

이 옵티마이저는 Rust로 작성되었으며 여기에서 볼 수 있습니다 . parse.rscore src 폴더에서 파일을 확인하십시오 . 구문 분석이 어떻게 발생하는지 나타냅니다.

그런 다음 Qwik Loader가 있습니다 .

지연 로드할 준비가 된 이러한 개별 파일을 모두 확보한 후에는 사용자가 수행하는 이벤트에 응답한 다음 해당 파일을 지연 로드할 수 있어야 합니다.

이것이 Qwik Loader가 하는 일입니다.

전역 이벤트 리스너를 추가하고 문서의 모든 위치에서 사용자 이벤트를 찾습니다.

on-click 이벤트가 발생하면 관련 chunk.js 파일을 가져옵니다.

그런 다음 기호 이름 부분이 있는 모듈을 갖게 됩니다. (#handler_symbol) 별도의 파일에 지연 로드됩니다. 따라서 로더는 해당 파일을 가져와서 실행합니다.

상태/값은 심판에 따라 바인딩됩니다 qwik/json. (위 첨부파일 참조)

이렇게 온클릭 이벤트 기능이 실행되었습니다. 여기 GitHub 리포지토리에서 이 로더 동작을 찾을 수 있습니다 .

로컬 환경에서 Qwik 설치 및 실행

우리 기계에 이 작은 짐승을 설치합시다.

전제 조건 - Node.js ≥v16.8이 설치되어 있어야 합니다.

Qwik CLI를 사용하여 Qwik 애플리케이션을 쉽게 가동할 수 있습니다.

npm create qwik@latest

괜찮은. 다음을 사용하여 이것을 구축해 봅시다.npm run build

이제 하나의 거대한 번들 대신에 각각 1킬로바이트 미만의 수많은 작은 청크를 보게 될 것입니다. 이것은 게으른 로딩 절차입니다. 이를 통해 Qwik은 JavaScript를 최대한 확장할 수 있습니다.

괜찮은! 이제 다음을 사용하여 앱을 시작할 수 있습니다. npm run dev기본 웹사이트는 다음에서 사용할 수 있습니다.http://localhost:5173/

Inspect를 사용하여 축하할 시간 버튼에서 클릭 이벤트의 JS 번들을 로드하는 방법을 살펴보겠습니다.

네트워크 탭을 열면 초기 JS 번들만 찾을 수 있습니다. 버튼을 클릭하면 버튼과 관련된 JS 번들을 로드합니다.

또한 Qwik은 Alt 키를 누른 채 아무 곳이나 클릭하여 좋아하는 IDE에서 코드를 열 수 있으므로 개발자 친화적입니다.

보너스 — 에 가면 http://localhost:5173/demo/flower?pride=true회전하는 화려한 꽃을 볼 수 있습니다.

Qwik을 사용하면 명령을 사용하여 React, Tailwind CSS 등과 같은 도구 및 서비스에 쉽게 연결할 수 있도록 통합을 추가할 수 있습니다 npm run qwik add. 지원되는 통합은 여기 공식 문서에 나열되어 있습니다 .

Qwik은 또한 개념에 더 익숙해지는 데 도움이 되는 뛰어난 대화형 자습서를 제공합니다. Qwik을 빠르게 배우는 데 사용할 수 있기를 바랍니다.

자원

• 공식 웹 —https://qwik.builder.io
• Qwik GitHub —https://github.com/BuilderIO/qwik
• 문서 —https://qwik.builder.io/docs/overview/
• StackBlitz 데모 —https://stackblitz.com/edit/qwik-todo-demo

Qwik의 새롭고 혁신적인 접근 방식(Resumability)은 프런트 엔드 JavaScript 프레임워크를 위한 새로운 방식을 제공합니다.

확실히 이것은 세상의 판도를 바꾸는 프레임워크가 될 것입니다. 여기서 일이 어디로 가는지 보는 것은 흥미로울 것입니다.

이 기사가 Qwik 프레임워크의 핵심 원칙을 이해하는 데 도움이 되었기를 바랍니다. 다음 기사에서도 Qwik의 업데이트를 가져올 수 있기를 기대합니다.

읽어주셔서 감사합니다. Qwik에 댓글을 남겨주세요. 행복한 코딩!

레벨업 코딩

우리 커뮤니티의 일원이 되어 주셔서 감사합니다! 가기 전에:

• 이야기에 박수치고 작가 팔로우
• 레벨업 코딩 출판물 에서 더 많은 콘텐츠 보기
• 무료 코딩 면접 과정 ⇒ 과정 보기
• 팔로우: 트위터 | 링크드인 | 뉴스 레터