오늘 한 일

  • 오늘 하루는 스벨트와 함께 시작했고 스벨트와 함께 끝냈다.
  • 궁금한 게 있으면 자료를 타고 타고 들어가서 어딘가에서 헤매다가 다시 돌아오길 여러 번 반복했지만 그것도 나름 좋았다.

오늘 배운 것

  • 스벨트 튜토리얼(튜토리얼이 아니더라도 REPL 자체를 제공한다)은 요즘 다른 데서도 흔히 볼 수 있는 형태로 웹사이트에서 REPL(Read-Eval-Print Loop)로 제공하는데, 이런 CodePen 같은 거 이용하다가 .zip 파일로 받아서 압축 푸는 거 말고 로컬에서 그럴싸하게 돌려보고 싶어서 이것저것 찾아 보았다.
 

The easiest way to get started with Svelte

The easiest way to get started with Svelte This'll only take a minute. Rich Harris Aug 7 2017 Svelte is a new kind of framework. Rather than putting a tag on the page, or bringing it into your app with import or require, Svelte is a compiler that works beh

svelte.dev

  • 개인적으로 어떤 프레임워크든 CLI를 이용하는 걸 좋아하는데 스벨트는 svelte-cli가 deprecated 되어서 아쉬웠다. 사용 자체는 가능하지만 변화가 일어나면 바로 반영하지 못해서 프로덕션 환경에서는 비추한단다.
 

GitHub - sveltejs/svelte-cli: Command line interface for Svelte

Command line interface for Svelte. Contribute to sveltejs/svelte-cli development by creating an account on GitHub.

github.com

  • 첫 번째 링크에서 제안하는 REPL을 제외한 또 한 가지 방법은 degit을 이용하는 것이다. git repo의 가장 최근 버전만을 가져오는 것으로, 히스토리는 포함하지 않으므로 git clone보다 빠르고 가벼운 수단이라고 한다. npx degit user-name/repo-name으로 사용할 수 있다.
 

GitHub - Rich-Harris/degit: Straightforward project scaffolding

Straightforward project scaffolding. Contribute to Rich-Harris/degit development by creating an account on GitHub.

github.com

  • 그런데 이렇게 하면 말 그대로 템플릿으로서 가져오는 것이기 때문에 번들러는 이미 Rollup으로 지정되어 있다. 나는 이유는 모르겠고 그냥 왠지 sso의 Vue3에서 사용한 Vite를 적용하고 싶었다. 그러러면 npm init @vitejs/app으로 직접 프로젝트명을 지정하고 프레임워크를 선택하면 아래 링크와 같은 스캐폴딩이 적용된 프로젝트를 새로 생성할 수 있다. 물론 타입스크립트로도 가능하다.
 

Vitejs (forked) - StackBlitz

 

stackblitz.com

  • Rollup과 Vite를 비교하면 어떤지 자료를 찾아보고 싶었는데 마땅한 게 눈에 띄지 않았다. Vite가 빠르다는 얘기는 있지만 둘의 수치나 이런 걸 비교한 건 딱히. 나중에 시간 내서 Rollup 공식문서도 읽어보고 둘을 비교해 봐야겠다.
 

rollup.js

 

rollupjs.org

 

Why Vite | Vite

Why Vite The Problems Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of "bundling": using tools that crawl, process and co

vitejs.dev

+ Recent posts