[Svelte] svelte 설치방법

개요

svelte는 2016년 출시한 오픈 소스 프론트엔드 웹 프레임워크입니다. 기존의 React나 Vue 등 널리 알려진 웹 프레임워크와 달리 가상 DOM을 사용하지 않으며, 빌드 단계에서 구성요소를 컴파일 하여 성능이 향상되었습니다.

특징

1. 실제 DOM을 사용하는 컴파일러
   svelte는 바로바로 실제 DOM을 반영합니다. 앱을 실행 시점이 아닌 빌드 시점에서 바닐라 자바스크립트 번들로 컴파일하여 속도가 빠르고 따로 라이브러리를 배포할 필요가 없습니다.

2. document.querySelector 등의 함수로 실제 DOM에 접근 및 조작이 더 용이합니다.

3. React, Vue 등에 비해 훨씬 적은 양의 코드로 동일한 결과물을 만들 수 있으며, 가독성이 좋습니다.

Svelte 설치

1. svelte 설치

   npx degit sveltejs/template .
   typescript를 사용하려면 아래 명령어를 추가로 수행
   node scripts/setupTypeScript.js

2. 패키지 설치

   npm install

3. 실행

   npm run dev

파일 구조

svelte
│   └── public
│        ├── favicon.png
│        ├── global.css
│        └── index.html
├── scripts
├── src
│   ├── App.svelte
│   └── main.js
├── package.json
└── rollup.config.js

react와 별반 다를게 없습니다.
src 하위에 코드를 적어내려가야 하는데, App.svelte는 모든 컴포넌트가 모이는 부모컴포넌트입니다.

main.js 에서는 public 하위의 index.html의 body에 App.svelte

main.js

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;

SCSS 설치

npm i --save-dev svelte-preprocess sass

scss 적용

rollup.config.js 파일 설정

• sveltePreprocess는 다음과 같은 전/후처리기들을 지원합니다.
• Babel
• TypeScript
• CoffeeScript
• Pug
• PostCSS / SugarSS
• Sass(SCSS)
• Less
• Stylus
• globalStyle
• replace

import   from 'svelte-preprocess';

export default {
  //...
  plugins: [
    //...
    svelte({
		//...
		preprocess:sveltePreprocess({}),
	}),
  ]
}

SCSS 적용

test.svelte

<style lang="scss">
	//...
</style>

prettier 설치

npm i --save-dev prettier-plugin-svelte prettier

프로젝트 root에 .prettierrc 파일 생성

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  //... 기타 옵션
}

Babel 설치

js 최신 문법을 사용하면서도 빌드된 결과물을 구형 브라우저에서도 호환되게 보여주기 위해서 Babel 설정이 필요합니다.

npm i --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining

rollup.config.js

plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			},
			preprocess:sveltePreprocess({
				babel: {
					presets: [
					  ["@babel/preset-env", {
						loose: true,
						modules: false,
						targets: { esmodules: true, },
					  }],
					],
				  },
				plugins: ["@babel/plugin-proposal-optional-chaining"],
			}),
		}),
  //...
  ]

//tailwind 오류나서 추후 재진행

tailwindCSS 설치

npm install -D tailwindcss postcss autoprefixer

tailwindCSS 적용

아래 명령어를 수행하면 루트에 tailwind.config.js가 생성된다.

npx tailwindcss init -p

tailwind.config.js

const production = !process.env.ROLLUP_WATCH;
module.exports = {
  purge: {
    content: ["./src/**/*.svelte"],
    enabled: production, // disable purge in dev
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
};

rollup.config.js

svelte({
  preprocess: sveltePreprocess({
    sourceMap: !production,
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  }),
  ...
}),

확장앱 설치

Svelte for VS Code 찾아서 설치