입문

최근에 앞부분 부근에서'svelte','sapper'라는 단어를 자주 듣는다.
어떤 물건일까요?조금 신경 쓰여 만져보았습니다. 비망록 기사를 겸용하도록 허락해 주십시오.

svelte가 뭐예요?

'날씬하다'는 뜻의 이름처럼 경량, 고속
기준은 React 35배, Vue입니다.js의 50배 속도인 것 같습니다.

표준에서는 Typescript/SCSS와 같은 메타언어가 지원되지 않습니다.

을 컴파일한 후 svelte 파일을 html/Javascript/css로 변환합니다.

뭐 공부 해요?

svelte를 사용하여 웹 응용 프로그램을 만드는 프레임워크

vue.js에서 말하는 Nuxt.js 같은 거?

는 SSR(서버 측면 렌더링)을 제공합니다.

튜토리얼/라이브러리

자습서와 저장소는 다음과 같습니다.

svelte

사이트 제목

튜토리얼

Git 저장소

튜토리얼만 해도 재밌어!

sapper

사이트 제목

Git 저장소

설치

샘플 항목 만들기

Sapper의readme에서 말한 바와 같이npx를 사용하여 설치합니다.
(npx의 설정 방법은 여기에서 언급하지 않습니다.)
여기서 만든 이름은 sapper_sample 입니다.

% npx degit "sveltejs/sapper-template#rollup" sapper_sample
npx: 32個のパッケージを4.152秒でインストールしました。
> cloned sveltejs/sapper-template#rollup to sapper_sample

상기 명령을 실행하면 다음 디렉터리 그룹을 예시 항목으로 만듭니다.

% tree .
.
├── README.md
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── package.json
├── rollup.config.js
├── src
│   ├── client.js
│   ├── components
│   │   └── Nav.svelte
│   ├── 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
    ├── great-success.png
    ├── logo-192.png
    ├── logo-512.png
    └── manifest.json

10 directories, 29 files

다운로드 종속성

정부readme에서 보듯이 다음 명령을 통해 의존관계를 다운로드합니다.

cd sapper_sample
npm install 

개발 서버 시작

% npm run dev

> sapper dev

✔ server (995ms)
✔ client (1.0s)
✔ service worker (21ms)
> Listening on http://localhost:3000

페이지 표시

방문http://localhost:3000하면 멋쟁이 아저씨
상쾌한 웃음으로 나를 맞이하다.

마지막

제1탄으로 svelte/sapper의 설치/환경 설정을 진행하였다.
(거의 readme를 보면 알 수 있다...)
다음부터는 샘플 항목을 실제로 만지작거리며 행동/문법 등을 확인하고 싶습니다.
샘플 프로젝트의 시작은 정말 간단하기 때문에, 관심 있는 사람은 어쨌든 시도해 보세요!

함께 일할 네트워크 엔지니어를 모집하고 있습니다!

부동산 SHOP NAKAGETS는 당사의 서비스를 제작할 파트너를 모집하고 있습니다.
자세한 내용은 문의하시기 바랍니다Wantedly.
당신의 왕림을 삼가 기다리겠습니다!