Svelte와 Sapper가있는 빠른 반응성 블로그를 짓는다

Sep 15, 2025

어떻게

(이미지 크레디트 : Svelte)

Sapper는 Svelte 맨 위에 구축 된 프레임 워크입니다. 서버 렌더링, 링크 프리로드 및 서비스 근로자를 만드는 기능이있는 상자의 속도가 빠르게 초점을 맞 춥니 다. SVELTE와 결합 된 최종 결과는 매우 맞춤형, 작은 풋 프린트가있는 번개가 빨라집니다.

이 자습서에서는 Sapper를 사용하여 Svelte 구성 요소를 사용하여 경량 블로깅 사이트를 구축 할 것입니다 (우리의 블로그를 시작하는 방법 블로깅에 대한 기술적 인 팁을위한 게시물). Svelte는 차이가있는 프레임 워크입니다. 컴파일시 코드를 분석하고 런타임의 필요성을 피하고 바닐라 자바 스크립트의 모듈 세트를 만듭니다. 레이아웃에 대한 추가 도움이 필요하면 완벽한 것을 얻는 방법에 대한 우리의 게시물을 확인하십시오. 웹 사이트 레이아웃 ...에 또는 다른 옵션의 경우,이를 참조하십시오 웹 사이트 빌더 그리고 당신은 또한 당신을 얻을 필요가 있습니다 웹 호스팅 포인트에서 서비스.

파일로에서 자습서 파일을 다운로드하십시오

01. 종속성을 설치합니다

첫째, 종속성을 다운로드하고 설치해야합니다. Svelte에서 작동하며 서버를 구축하는 또 다른 프레임 워크가 필요하지만 나머지는 구축되는 응용 프로그램에 따라 다릅니다. 이 경우 나중에 마크 다운 파일을 추출하는 데 도움이되는 몇 가지 패키지가 필요합니다.

자습서 파일 (위)을 다운로드하고 명령 줄에서 찾아 종속성을 설치하십시오.

> npm install

02. 서버를 빌드합니다

Sapper는 클라이언트 측 프레임 워크와 해당 프레임 워크의 서버 측 렌더링의 두 부분으로 구성됩니다. 이렇게하면 느린 네트워크의 추가 속도 향상이 도움이됩니다. 그것은 노드를 사용하여 작성되어 Sapper 미들웨어가 우리를위한 모든 무거운 리프팅을 할 수 있습니다.

server.js를 열고 익스프레스로 서버를 만듭니다. 권장 사항을 사용하여 우리는 포함합니다 압축 우리가 보내는 파일을 축소하려면 시계 정적 파일을 제공합니다.

 익스프레스 ()
  .사용하다(
    압축 ({임계 값 : 0}),
    SIRV ( "static", {dev}),
    sapper.middleware ()
  )
  .listen (포트);

03. 응용 프로그램을 마운트하십시오

클라이언트 측면에서는 응용 프로그램을 마운트 할 위치에서 Sapper에게 알려야합니다. 이것은 DOM의 반응과 유사합니다 세우다 또는 vue. $ mount. 행동 양식. client.js 안에 Sapper를 시작하고 루트에 마운트하십시오. & lt; div & gt; 요소. 이 요소는 템플릿 파일에 포함되어 있습니다.

 "@ sapper / app"에서 sapper로 가져 오기 *;
sapper.start ({
  대상 : document.getElementById (
   "뿌리")
});

04. 개발 서버를 시작합니다

Command line — 개발 빌드 프로세스 중 오류는 명령 줄에 플래그가 지정됩니다. (이미지 크레디트 : 매트 크라우치)

기본 서버 및 클라이언트 파일이 설정되면 개발 서버를 시작할 수 있습니다. 이렇게하면 서버, 클라이언트 및 서비스 작업자 파일의 빌드에서 시작되며 기본적으로 포트 3000에서 시작됩니다. 파일이 변경 될 때마다 변경된 응용 프로그램의 일부를 다시 작성합니다.

명령 줄에서 서버를 실행하십시오. 사이트를 개발하는 동안이 창을 열어 두십시오.

 & gt; NPM RUN DEV

05. 서버 경로를 만듭니다

"경로"디렉토리 안의 모든 것이 응용 프로그램의 경로가됩니다. 파일이있는 파일 .js. 확장 프로그램은 서버 경로가 호출됩니다. 이 경로에는 UI가 없지만 대신 응용 프로그램이 데이터를 가져 오기 위해 요청됩니다. 우리의 경우에는 블로그 게시물을로드하기 위해 사용합니다.

그만큼 routes / blog / index.json.js. 파일이 생성됩니다 /blog.json. 우리 서버의 엔드 포인트. 블로그 게시물을 가져 와서 그 일부 JSON을 만듭니다.

 "./_posts.js"에서 게시물을 가져옵니다.
const 내용 = JSON.Stringify (
  posts.map (post = & gt; ({
    저자 : Post.Author,
    이미지 : post.image,
    제목 : post.title,
    슬러그 : Post.slug.
  }))
);

06. 블로그 게시물을 반환합니다

서버 라우팅 HTTP 메소드와 해당하는 내보내기 기능입니다. 예를 들어, GET 요청에 응답하기 위해, 우리는 호출 된 함수를 내보낼 것입니다. 가져 오기 서버 라우트 파일에서. A.를 만드십시오 가져 오기 JSON 형식의 이전 단계에서 수집 한 데이터로 응답하는 기능. 열다 http : // localhost : 3000 / blog.json. 브라우저에서 게시물이 오는 것을 확인하십시오.

 내보내기 기능 GET (REQ, RES) {
  Res.WriteHead (200, {
    "Content-Type": "응용 프로그램 / JSON"
  });

  res.end (내용);
}

07. 색인 생성 페이지

Sapper의 페이지는 일반 Svelte 구성 요소입니다. 각 구성 요소는 A가있는 단일 파일입니다 .날씬한 확장 및 자체 관리를위한 모든 논리와 스타일링을 포함합니다. 이 구성 요소가 실행 해야하는 모든 JavaScript는 & lt; script & gt; 태그 - HTML 페이지처럼.

내부 경로 / index.svelte. 이 페이지를 빌드하는 데 사용할 수있는 몇 가지 다른 Svelte 구성 요소를 가져옵니다. 수출 A. 게시물 우리가 나중에 채울 수있는 변수.

 & lt; script & gt;
  컨테이너 가져 오기
   "../components/container.svelte";
  Opport PostSummary에서 가져 오기
   "../components/postsummary.svelte";
  내보내기 게시물;
& lt; / script & gt;

08. 블로그 게시물 데이터를 가져옵니다

페이지가 설정되면 블로그 게시물을 가져 오기 시작할 수 있습니다 (당신은 클라우드 스토리지 짐마자 페이지가로드되는 즉시이를 수행해야합니다. 서버 가이 문제를 인식 하고이 데이터를 페이지를 렌더링 할 때이 데이터를 요청하려면 별도로 이동해야합니다. & lt; 스크립트 컨텍스트 = "모듈"& gt; 꼬리표.

서버에서 Sapper는 A를 찾습니다 예압 기능을 보여주기 전에 완료 될 때까지 기다리십시오. 여기, 우리는 그를 채우고 있습니다 게시물 이전 단계의 변수.

 & lt; Script Context = "모듈"& gt;
  내보내기 비동기 함수 preload () {
    const res = await.
     이 .fetch ( "blog.json");
    const 데이터 = res.json ()을 기다리십시오.
    반환 {게시물 : 데이터};
  }
& lt; / script & gt;

09. 포스트 요약 표시

Svelte에서는 변수가 기본적으로 반응합니다. 즉, 업데이트 할 때 우리의 구성 요소도 업데이트됩니다. 그대로 게시물 변수가 이제 블로그 게시물 배열을 보유하고 있으며,이를 반복하여 표시 할 수 있습니다.

우리는 AN.을 사용 하여이 작업을 수행 할 수 있습니다 #마다 블록. 이들은 배열의 각 항목에 대해 괄호 안에있는 것을 반복합니다. 구성 요소의 맨 아래에 태그 외부에서 HTML을 추가하여 게시물을 표시합니다.

& lt; 컨테이너 & gt; & lt; Ul & gt; {#each as post} & lt; li & gt; & lt; postsummary {... post} / gt; & lt; / li & gt; {/마다} & lt; / ul & gt; & lt; / container & gt;

10. 컨테이너 스타일

우리는 구성 요소를 사용하여 반복되는 논리를 포함하고 필요한 곳이 필요할 때마다 사용합니다. 그만큼 & lt; 컨테이너 & gt; 구성 요소는 현재 아무 것도하지 않지만 내부의 내용에 최대 너비를 제공하는 데 사용할 수 있습니다.

개방 구성 요소 / container.svelte. , A에 대한 스타일을 추가하십시오 & lt; 스타일 & gt; 꼬리표. 구성 요소 안에 적용되는 스타일은 해당 구성 요소로 범위가 지정되어 일반 선택기를 사용할 수 있음을 의미합니다.

 & lt; 스타일 & gt;
  div {
    마진 : 0 자동;
    패딩 : 0 1REM;
    최대 너비 : 50REM;
  }
& lt; style & gt;

11. & lt; slot & gt;

구성 요소가 다른 구성 요소에 부모로 설계된 경우 해당 구성 요소를 통과하는 방법이 필요합니다. 그만큼 & lt; slot & gt; 요소는 그냥 구성 요소의 마크 업 내로 의미가있는 곳으로 배치 될 수 있습니다.

와 & lt; 컨테이너 & gt; , 우리는 스타일의 내용을 포장하고 있습니다 & lt; div & gt; ...에 사용하다 & lt; slot & gt; 내부에서 & lt; div & gt; 다른 모든 것을 통과하게하는 것.

& lt; div & gt; & lt; slot / & gt; & lt; / div & gt;

12. 포스트 미술 소품을 노출시킵니다

모든 구성 요소가 일부 데이터를 가져올 수있는 것은 아닙니다. 메인 페이지 구성 요소에서 게시물을로드하는 것처럼 속성을 통해 렌더링하는 구성 요소로 통과 할 수 있습니다.

열다 구성 요소 / postsummary.svelte. 파일 맨 위에있는 속성을 정의합니다. 이것들은 09 단계에서 추가 된 스프레드 운영자가 채워지고 있습니다.

 & lt; script & gt;
  내보내기 저자;
  내보내기 이미지;
  수출 슬러그를 사용하자;
  내보내기 제목;
& lt; / script & gt;

13. 블로그 포스트 요약을 표시합니다

속성이 채워지면 다른 변수처럼 액세스됩니다. 포스트 요약의 각 부분에 대해 별도의 속성을 갖추면 마크 업이 쉽게 읽을 수 있습니다.

구성 요소의 맨 아래에서 일부 HTML을 추가하여 요약을 만듭니다. 클래스는 미리 정의 된 스타일과 관련이 있습니다.

& lt; 기사 & gt;
& lt; div class = "post-image"스타일 = "
 배경 이미지 : URL ({Image}) "/ & gt;
& lt; div class = "몸체"& gt;
  & lt; div class = "저자상"& gt;
    & lt; img src = {저자 .Image}
     Alt = {Author.Name} / & gt;
  & lt; / div & gt;
  & lt; div class = "약"& gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span 클래스 = "Byline"& gt; by
     {작성자 & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / 기사 & gt;

14. 블로그 게시물에 링크하십시오

Sapper blog — Sapper는 사용자가 지각 된 성능 혜택을 위해 사용자가 호버에 대한 정보를 가져올 수 있습니다. (이미지 크레디트 : 매트 크라우치)

Next.js와 같은 유사한 프레임 워크와 달리 Sapper는 일반 앵커 링크와 함께 작동합니다. 빌드 시간에 내부 링크를 탐지 할 수 있으며 자체 최적화를 수행 할 수 있습니다.

이전 단계에서 마크 업을 링크로 배치하여 업데이트하십시오. 슬러그가있는 URL을 구성하기 위해 템플릿 문자열을 만들 수있는 필요가 없습니다.

 & lt; rel = "prefetch"href = "/ blog / {slug}"& gt;
  & lt; 기사 & gt; ... & lt; / 기사 & gt;
& lt; / a & gt;

15. 슬러그로 게시물을 가져옵니다

Sapper는 URL 매개 변수를 기반으로 페이지를 만들 수 있습니다. 우리의 경우, 우리는 링크합니다 / 블로그 / 슬러그, 이는 구성 요소를 렌더링하는 것을 의미합니다 /routes/blog/[slug].svelte. ...에

해당 구성 요소에서는 인덱스 페이지에서 한 것처럼 블로그 데이터를 가져옵니다. 그만큼 매개 변수 객체는 URL의 매개 변수를 포함합니다.이 경우이 경우는 슬러그입니다.

 & lt; Script Context = "모듈"& gt;
  내보내기 비동기 기능
   Preload ({params}) {
    const res = await this.fetch (
     `blog / $ {params.slug} .json`);
    const 데이터 = res.json ()을 기다리십시오.
  }
& lt; / script & gt;

16. POST가 없으면 오류가 없습니다

색인 페이지와 달리 URL에는 블로그 게시물이없는 기회가 있습니다. 이 경우 오류가 표시되어야합니다. 와 함께 술책 , 예압 메소드도 포함됩니다 오류 대신 오류 페이지로 응답을 변경합니다.

Preload 메소드가 끝나면 게시물이없는 경우 오류를 표시하십시오. 그렇지 않으면, 그를 설정하십시오 게시하다 페이지 변수.

 if (res.status === 200) {
  반환 {POST : DATA};
} else {
  이 .Error (res.status,
    data.message);
}

17. 블로그 게시물을 표시하십시오

Internal links — 모든 내부 링크를 비동기 적으로로드 할 수 있습니다. 여기에는 Markdown에서 작성된 것들이 포함됩니다. (이미지 크레디트 : 매트 크라우치)

데이터가 가져온 데이터를 사용하면 이제 페이지에 게시물을 표시 할 수 있습니다. 포스트 샘플 구성 요소와 마찬가지로 우리는 곱슬 괄호 안에 포스트의 내용의 각 부분을 표시합니다. 구성 요소의 맨 아래에 있으면 일부 마크 업을 추가하여 페이지에 표시합니다.

 & lt; 기사 & gt;
  & lt; 컨테이너 & gt;
    & lt; div class = "title"& gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline"& gt; by
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image"src = {post.image} Alt = ""/ & gt;
     {post.html}
  & lt; / container & gt;
& lt; / 기사 & gt;

18. 대신 HTML을 표시하십시오

이제 페이지를 보면 모든 모든 것이 실제 게시물 콘텐츠와 정확하게 표시됩니다. Markdown Conversion은 HTML을 생성하지만 게시물 자체의 텍스트로 인쇄 된 것을 볼 수 있습니다. Sapper에는이 경우 HTML 파서가 내장되어 있습니다. 자본 매출 @html. 앞에이 파서를 사용합니다.

 {@ html post.html}

19. Page & lt; 타이틀 & gt; 값

우리의 블로그는 올바르게 작동하지만 완료하는 데 필요한 몇 가지 변경 사항이 있습니다. 그 중 하나는 업데이트하는 것입니다 & lt; 타이틀 & gt; 페이지에서 탭을 릴레이하여 표시됩니다.

Svelte는 A를 지원합니다 & lt; Svelte : 헤드 & gt; 그것의 내부에 어떤 것을 주입하는 요소 & lt; head & gt; 페이지의 게시물 제목을 설정하려면이 옵션을 사용하십시오. & lt; 타이틀 & gt; ...에

& lt; svelte : 헤드 & gt; & lt; title & gt; {post.title} | Sapper 블로그 & lt; / title & gt; & lt; / svelte : 헤드 & gt;

20. & lt; 타이틀 & gt;

모든 페이지는 나머지 페이지의 HTML을 스탬프하기 위해 템플리트를 통과합니다. 글꼴 가져 오기 및 메타 태그와 같은 설정이 입력되는 곳입니다. Template.html을 열고 내용의 내용에 추가하십시오. & lt; Svelte : 헤드 & gt; 이전 단계의 요소. 폐쇄 직전에 이것을 추가하십시오 & lt; / head & gt; 꼬리표.

& lt; 헤드 & gt; [...]% sapper.head % & lt; / head & gt; 추가해야 할 최종 일은 블로그의 레이아웃입니다. 구성 요소의 각 페이지를 포장하는 대신 Sapper는 "_layout.svelte"파일을 찾아이 작업을 수행합니다. _layout.svelte 내부에서 & lt; 헤더 & gt; 구성 요소를 표시하고 모든 페이지 상단에 표시됩니다. 홈페이지로 편리한 링크를 제공합니다.

21. 영구 헤더를 추가하십시오

추가해야 할 마지막 일은 블로그의 레이아웃입니다. 구성 요소의 각 페이지를 포장하는 대신 Sapper는 _layout.svelte. 이 작업을 수행하는 파일. 내부 _layout.svelte. , & lt; 헤더 & gt; 구성 요소를 표시하고 모든 페이지 상단에 표시됩니다. 홈페이지로 되돌아가는 편리한 링크를 제공합니다.

 & lt; script & gt;
  헤더 가져 오기
   "../components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; 헤더 / & gt;
  & lt; slot / & gt;
& lt; / main & gt;

이 콘텐츠는 원래 웹 디자이너에 나타났습니다.

웹 구성 요소 : 궁극적 인 가이드
웹 디자이너와 DEVS에 대한 30 개의 크롬 확장
52 2019 년에 더 똑똑한 일을 돕는 웹 디자인 도구

Svelte와 Sapper가있는 빠른 반응성 블로그를 짓는다

01. 종속성을 설치합니다

02. 서버를 빌드합니다

03. 응용 프로그램을 마운트하십시오

04. 개발 서버를 시작합니다

05. 서버 경로를 만듭니다

06. 블로그 게시물을 반환합니다

07. 색인 생성 페이지

08. 블로그 게시물 데이터를 가져옵니다

09. 포스트 요약 표시

10. 컨테이너 스타일

11. & lt; slot & gt;

12. 포스트 미술 소품을 노출시킵니다

13. 블로그 포스트 요약을 표시합니다

14. 블로그 게시물에 링크하십시오

15. 슬러그로 게시물을 가져옵니다

16. POST가 없으면 오류가 없습니다

17. 블로그 게시물을 표시하십시오

18. 대신 HTML을 표시하십시오

19. Page & lt; 타이틀 & gt; 값

20. & lt; 타이틀 & gt;

21. 영구 헤더를 추가하십시오

어떻게 - 가장 인기있는 기사

Jekyll과 블로그를 만드는 방법

오일 페인트로 빛나는 색상을 만드는 방법

대화식 시차 이미지 생성

Photoshop에서 공상 공시 게임 설정 페인트

귀하의 콘텐츠와 함께 Google 랭킹에 영향을 미치는 방법

CINEMA 4D에서 조각하는 방법

디자인 및 콘텐츠 스프린트 실행을 배우십시오

3D 모델링 속도 향상

카테고리