Vue 에는 내가 단짝이라고 칭한 VueUse 를 기재했었다.
그리고 그 덕분에 VueUse에 관심을 가진 한국 개발자가 늘어났다.
[대충 흐뭇한 짤]
내가 Svelte 삽질하다가 슬럼프가 있었다. 그 틈에 많은 개발자들이 스벨트와 Kit 가지고 열심히 지지고 볶는 글을 많이 올려주었다.
뭐? 리액트 단짝? 일단 react-use 가 있긴 한데 나중에 다시 확인해서 소개하도록 하겠다.
오늘 소개할 것은 Svelte의 안내데스크, svelte-add 다.
왜 안내데스크냐고?
이 녀석의 목적은 Svelte boilerplate 성격이 강하다.
스벨트 프로젝트를 초기화할 때 필요한 라이브러리가 있다면, 이걸 손쉽게 세팅해서 바로 쓸 수 있게끔 해주는 프로젝트다.
그래서 내가 안내데스크라 칭한 거다.
svelte-add
/
svelte-add
Easily add integrations and other functionality to Svelte apps
➕ Svelte Add
This is a community project to easily add integrations and other functionality to Svelte apps. Its goal is to solve the problems with downloading templates to start your app from:
-
You have to want all the functionality a template includes—no more, no less.
Svelte Add has app initializers that let you select the exact integrations wanted:
npm create @svelte-add/kit@latest -
You have to fall back on following a third party tutorial that could be outdated or take a lot of work to add things missing from that template.
Svelte Add's "tutorials" are one step:
npx --yes svelte-add@latest graphql-server -
You have to rely on the maintainer keeping the template updated as the tools it uses change and the official Svelte app template it was built on changes.
Svelte Add's app initializers are always built on top of the latest version of the official Svelte app templates. Of course it…
일단 Svelte 에서 공식으로 제공하는 기본 템플릿을 불러오는 명령어다.
npm init svelte@next my-app
my-app 을 원하는 명칭 넣고 부르면 새 프로젝트 끝이다.
이번엔 svelte-add 에서 제공하는 기본 템플릿을 불러오는 명령어다.
npm init @svelte-add/kit@latest
그러면 안내문이 표시되는데, 안내하는대로 입력하면 프로젝트가 완성된다.
여기서 좋은 게 뭐냐면, 추가할 것들을 선택할 수 있다는 것.
게다가 즐기는 모듈과 같이 바로 프로젝트를 초기화할 수 있다.
npm init --yes @svelte-add/kit@latest -- --with postcss+mdsvex
이렇게 하면 해당 프로젝트에 Svelte Kit가 초기화되면서 postcss 와 mdsvex 모듈이 추가된 새 프로젝트를 초기화해줄 것이다.
mdsvex 가 뭐냐고? 마크다운에 svelte 구문도 쓸 수 있게 해주는 놈.
이게 다가 아니다. svelte-add 의 진가는 프로젝트 관리 중에 일어난다.
이미 초기화가 됐는데 모듈을 추가하고 싶다?
예를 들어 tailwindcss 를 추가하고 싶다면, 간단하게 이렇게 호출하면 된다.
npx svelte-add@latest tailwindcss
초기화할 때는 npm init 어쩌고를 썼지만,
운영 중 추가는 npx를 썼다.
위 명령어만 호출하면 tailwindcss 모듈을 추가하고 관련 초기 세팅을 알아서 해준다.
이 얼마나 기특한 기능이란 말인가!
만약 지원하는 모듈을 알고 싶다면, 공식 Github에서 확인하면 되고.
또한 npm init @svelte-add/kit@latest 에서도 확장 가능한 모듈이 표시되니 여기서도 확인 가능하다.
일단... Svelte 를 vite로 관리하는 프로젝트 중심으로 지원한다.
SvelteKit 가 vite 위주의 관리 체계를 가지고 있기 때문에.
한계이긴 하다. 그리고 Svelte가 공식적으로 Vite 중심으로 움직이기 때문에.
Vite를 선택한 이유가 바로 SSR과 HMR이 잘 지원되기 때문이다.
끗.
Top comments (0)