SvelteKit 1.0 소개: Svelte용 전체 스택 프레임워크

Jun 29, 2023

매튜 타이슨

소프트웨어 설계자, InfoWorld |

최근 발표된 바와 같이, SvelteKit은 오랜 베타 기간을 거쳐 많은 기대를 모았던 1.0 이정표에 도달했습니다. SvelteKit 1.0은 Svelte 프런트 엔드를 사용하여 전체 스택 JavaScript 애플리케이션을 구축하기 위한 완전히 실현된 애플리케이션 프레임워크를 제공합니다. 한 번 보자.

Svelte는 높은 수준에서 React 또는 Vue와 비교할 수 있는 프런트 엔드 반응형 프레임워크이지만 사물에 대한 고유한 각도를 가지고 있습니다. SvelteKit은 Next 또는 Nuxt와 같은 Svelte용 풀 스택 애플리케이션 프레임워크이지만 역시 자체 규칙이 있습니다.

풀 스택 애플리케이션 프레임워크의 특성은 애플리케이션의 프런트엔드와 백엔드를 하나의 우산 아래 통합할 수 있어야 한다는 것입니다. 풀스택 프레임워크는 다음 질문에 답해야 합니다.

모든 애플리케이션 프레임워크의 중심에는 페이지를 생성하는 코드를 브라우저의 URL에 연결하는 라우팅 엔진이 있습니다. SvelteKit과 같은 대부분의 JavaScript 프레임워크는 Next.js가 사용하는 일반 레이아웃에 정착했으며, 여기서 파일과 디렉터리는 URL 경로에 매핑됩니다.

SvelteKit의 루트 디렉터리는 /src/routes(기본값)입니다. 따라서 /src/routes는 루트 URL에 해당합니다(예: 브라우저의 localhost:5173/). 하위 디렉터리는 URL 경로에 매핑되므로 /src/routes/foo/bar는 localhost:5173/foo/bar가 됩니다.

디렉토리 내의 여러 파일 규칙은 페이지와 끝점을 정의합니다. 이러한 파일 형식은 프레임워크에 특별한 의미가 있음을 나타내는 더하기 기호(+)로 시작됩니다. (다른 모든 파일은 무시되므로 동일한 디렉터리에 도우미 파일을 넣을 수 있습니다.)

각 페이지는 +page.svelte 파일에 정의된 Svelte 구성 요소입니다. /src/routes/foo/bar/+page.svelte에 있는 파일은 해당 파일에서 생성된 Svelte 구성 요소에 의해 정의된 localhost:5173/foo/bar의 웹 페이지가 됩니다. (경로에서 기본 페이지를 제공함으로써 이 파일은 다른 프레임워크의 index.jsx와 유사한 역할을 수행합니다.) 즉, +page.svelte는 일반 Svelte 구문을 따르는 표준 Svelte 구성 요소일 뿐입니다.

+page.svelte는 단지 프런트 엔드 Svelte 구성 요소일 뿐이지만 다른 특수 파일을 사용하여 작업을 수행할 수 있습니다. SvelteKit에는 몇 가지 편리한 최적화 기능도 있습니다. 기본적으로 SvelteKit은 서버 측 렌더링 +page.svelte를 수행합니다. 이 프로세스를 제어하기 위해 형제 파일 +page.js(.js 확장자 포함)를 사용합니다. 두 구성요소인 +page.svelte와 +page.js는 함께 작동하여 페이지의 전체 스택 동작을 정의합니다.

+page.js 구성 요소를 사용하면 페이지 구성 요소에 필요한 사전 작업을 수행할 수 있는 로드 기능을 정의할 수 있을 뿐만 아니라 프레임워크가 렌더링 동작과 관련하여 페이지를 처리하는 방법을 제어할 수 있습니다. 이 구성 요소는 세 가지 const 내보내기를 지원합니다.

SvelteKit 문서에서 이러한 옵션을 사용한 페이지 렌더링에 대해 자세히 알아볼 수 있습니다. 여기서는 +page.js에서 내보낸 로드 함수에 중점을 둘 것입니다. 기본적으로 서버와 클라이언트 모두에서 +page.svelte와 함께 실행됩니다. 로드 함수는 데이터 변수를 사용하여 Svelte 구성 요소와 통신합니다. +page.js 내보내기 함수가 반환하는 것은 무엇이든 +page.svelte의 내보내기 let 데이터 변수에 설정됩니다.

+page.js 로드 기능은 클라이언트와 서버 모두에서 실행되므로 브라우저와 백엔드 환경 모두에서 작동하는 기능을 포함해야 합니다. 서버에서만 실행되는 기능이 필요한 경우 +page.server.js를 사용하면 됩니다. 로드 기능은 백엔드에서만 실행됩니다. 서버측 렌더링(SSR)이 제어되면 데이터가 렌더링에 통합될 수 있습니다. 클라이언트 측 렌더링이 활성화되면 코드가 서버에서 실행되고 직렬화되어 전송됩니다. ("범용" 로드 기능과 서버 측 전용 로드 기능 중에서 선택하는 방법에 대한 자세한 내용은 SvelteKit 설명서를 참조하세요.)

로드 외에도 +page.server.js는 양식 데이터를 처리하는 작업 기능을 정의할 수 있습니다. (이는 Remix가 양식을 작성하고 JavaScript를 사용할 수 없을 때 양식이 작동하도록 허용하는 방법과 유사합니다.)