Nuxt 사용자가 Sapper(svelte)에 대한 액세스를 시도합니다.

※ 이 글은 다음 판본에 따라 작성되었습니다.

$ node -v
v12.18.3
$ npm -v
6.10.3
$ npx -v
6.14.10
$ json-server -v
0.16.3

이 글은 웹 크루즈 Advent Calendar 2020 21일째 글이다.
Sapper는 프런트엔드 프레임워크 Svelte를 확장하고 서버에서 구현된 어플리케이션 및 정적 코드 생성기를 개발하는 데 필요한 설정을 미리 포장한 프레임워크입니다.React에서 말하는 Nextjs와 Vue.js의 Nuxt에 있습니다.js와 같은 위치의 프레임워크가 되다.공식적으로는'Sapper is a Next.js-style frame work'라고 부른다.그나저나 Sapper 이름의 유래는'Svelte APP makER'다.
최근에는 넥스트에서 일할 때도 있었고 Svelte와 Vue에 비해 문법과 기법은 비교적 간단했다.또한 문법도 Vue와 비슷하기 때문에 Vue 사용자라면 Svelte의 학습 원가가 비교적 낮아 포착하기 쉽다.또한 Svelte 자체는 프레임이라기보다는 컴파일러가 구축할 때 plain의 자바스크립트 코드를 더 정확하게 토해낸다.따라서 어느 정도 구축할 때 잘못된 기대감과 리액트나 뷰보다 더 좋은 기준 결과가 발견될 수 있다는 게 개인이 앞으로 쓰고 싶은 프레임 중 하나입니다.

Sapper 프로젝트 만들기

Sapper 프로젝트는 다음 명령을 통해 프로젝트를 만들고 필요한 소프트웨어 패키지를 설치하며 개발 서버를 시작할 수 있습니다.

$ npx degit 'sveltejs/sapper-template#webpack' <プロジェクト名>
$ cd <プロジェクト名>
$ npm install
$ npm run dev

npm run dev의 경우 다음과 같은 느낌으로 기본 포트 번호 3000이 상승합니다.

$ npm run dev

> [email protected] dev /Users/xxx/workspace/simple_bcc
> sapper dev

✔ server (3.9s)
✔ client (4.1s)
> Listening on http://localhost:3000
✔ service worker (327ms)

일어서서 브라우저에 표시하면 다음과 같은 느낌으로 브라우저에 표시됩니다.

귀여워.

Nuxt 및 디렉토리 구조 비교

항목의 디렉토리 구조는 다음과 같습니다.

<プロジェクトRoot>.
├── README.md
├── node_modules (※省略)
├── package-lock.json
├── package.json
├── scripts
│   └── setupTypeScript.js
├── src
│   ├── ambient.d.ts
│   ├── client.js
│   ├── components
│   │   └── Nav.svelte
│   ├── node_modules(※省略)
│   ├── routes
│   │   ├── _error.svelte
│   │   ├── _layout.svelte
│   │   ├── about.svelte
│   │   ├── blog
│   │   │   ├── [slug].json.js
│   │   │   ├── [slug].svelte
│   │   │   ├── _posts.js
│   │   │   ├── index.json.js
│   │   │   └── index.svelte
│   │   └── index.svelte
│   ├── server.js
│   ├── service-worker.js
│   └── template.html
├── static
│   ├── favicon.png
│   ├── global.css
│   ├── logo-192.png
│   ├── logo-512.png
│   └── manifest.json
└── webpack.config.js

routes는 Nuxt의 페이지와 맞나 봐요.디렉터리__sapper__를 만들면 구축된 내용이 출력됩니다.루스 안에서.파일 및.js 파일이 있습니다. 상응하는 단점에 각각 접근하면 svelte 템플릿을 생성하거나 js를 실행합니다.components 및 static 디렉토리는 Nuxt 디렉토리와 동일한 역할을 합니다.
server.js는 서버 쪽에서 처리하는 입구점처럼 코드를 읽으면 기본값polka과 같은 웹 서버를 설정합니다.

fetch

클라이언트 측 렌더링이면fetch는 기본적으로 호출할 수 있지만 서버 측의 렌더링에서는 js 파일이fetch를 준비하지 않았기 때문에node-fetch를 사용할 필요가 있습니다.svelte 파일의 경우fetch는this에 기본적으로 설치되어 있기 때문에 직접 사용할 수 있습니다.

<h1> BCC </h1>

{#each posts as post}
  <div>
    <div class="post_user"> 投稿者: { post.user_name } (投稿日: {post.posted_at})</div> <hr>
    <div class="comment"> { post.comment } </div>
  </div>
  <br>
{/each}

<script context="module">
  export async function preload({}) {
    const response = await this.fetch("bcc.json");
    const contents = await response.json();

    if (response.status !== 200) {
      this.error(status, "エラーが発生しました。")
    }
    console.log(contents.posts)
    return contents
  }
</script>
<script>
  export let posts
</script>
<style>
  .post_user {
    font-size: 80%;
  }
  .comment {
    font-size: 120%;
  }
</style>

이런 느낌이에요.
다른 서버 쪽의fetch에 node-fetch가 설치되어 있습니다

$ npm install --save node-fetch

api.js 등을 따로 준비해야 합니다. 프로세스를 준비하는 것이 고객 측인지 서버 측인지 똑같은 처리를 분리해야 합니다.(app.js 파일의 위치는 어디에 설정해야 정답인지 모르겠지만,real-world에서 src내nodemodules에 설정되어 있기 때문에 이 방법을 답습했다.)

const fetch = process.client ? window.fetch : require('node-fetch').default
export default fetch

그런 다음 <프로젝트 이름>/src/routes/hogehoge를 입력합니다.json.js 파일을 구성한 후

import fetch from 'api.js';

export async function get(req, res, next) {
  const result = await fetch("http://localhost:3001/posts", { method: "GET" })
  console.log(result)
  const body = await result.json()
  res.writeHead(200,  {
            'Content-Type': 'application/json'
    });
  res.end(JSON.stringify({ posts: body }))
}

localhost:3000/hogehoge.json에 GET 요청을 보내면fetch에서 API 호출 결과가 되돌아옵니다.
이 부근의 클라이언트와 서버 측의 처리는 헷갈리기 쉬워서Nuxt와 마찬가지로 어렵다...

감상

살짝 부딪힌 과제감.

제가 조사가 부족했는지 실제 업무에서 사용할 때 다음과 같은 몇 가지를 좀 신경 썼습니다.(2020년 12월 21일 기준)

axios/proxy 라이브러리를 원합니다1

PC/SP에서 렌즈(Dynamic Serving)를 나누고 싶다.2

IE 대응3 ※ IE 대응에 대해서는 legacy 옵션에 따라 기존 브라우저에 대응하는 코드를 뱉을 수 있습니다.@myLifeAsaDog선생님이 가르쳐 주셨어요.(주석란 참조, 2020년 12월 22일 16시 보충)

는 넥스트에 비해 인터넷상의 자료(비공식 문서)가 적다.송이경(신지현):뭐,이건 후발주자니까 어쩔 수 없지.

장점

로컬 개발 환경을 쉽게 구축할 수 있습니다.

Svelte 코드를 쓸 수 있습니다.

CoC(Convention over Configuration)의 디자인 사상을 계승했다.

공식 문서는 어느 정도 완전하다.

Nuxt/Vue를 사용하면 입문 문턱이 매우 낮다.

끝맺다

Vue.js보다 더 간단하기 때문에 i/css를 위주로 인코딩하면 입문하는 JS 프레임워크로서 쉽게 접할 수 있을 것 같아요.
특히 복잡한 로컬 개발 환경을 설정하지 않아도 Sapper 측은 거의 준비할 수 있다.

참고 문헌

Svelte Sapper에서 Hello World를 진행하도록 하겠습니다.

JavaScript UI 컴파일러:Svelte 및 Solid 비교

sveltejs/realworld: Svelte/Sapper implementation of the RealWorld app

폴카의 설치를 수정하면 대응할 수 있을 것 같습니다. 여기polka sapper api proxy example에 샘플이 있습니다.하지만 직접 설치하는 것보다 프로그램 라이브러리로 실현하고 싶어요...  ↩
이것도 상술한 바와 같이 폴카의 맞춤형 제작을 통해 대응할 수 있다.Nuxt의 경우 이쪽 기사Nuxt의 루트는 컴퓨터와 스마트폰을 통해 전환된다를 참고하여 PC/SP 번역을 했습니다.  ↩
뭐, 지금은 IE 같은 말이지만 일하려면 아직 대응해야 할 일이 많아...Nuxt의 modern 속성이 좋습니다.IE 주위의 문제를 거의 회피할 수 있다.  ↩