BH] Svelte 튜토리얼 - 1편 (Trello)

[BH] 안녕하세요. 

 

Svelte를 사용하여 Trello를 만들어볼 거예요.

 

이번에 Svelte 선택한 이유는!!!!!

없습니다. 그냥 해보고 싶어서 하는거예요

 

1.설치

먼저 Svelte를 설치합니다.

{원하는 경로} 선택 ex) c:\dev
> npx degit sveltejs/template svelte-app
> cd svelte-app
> npm i
> npm run dev

접속 http://localhost:5000/ 기본 포트는 5000입니다.

 

SCSS 추가

npm i sass

npm i rollup-plugin-scss

설치가 완료되면 rollup.config.js 추가해줍니다.

 

rollup.config.js

import scss from "rollup-plugin-scss";

export default {
  ...
  plugins: [
    ...
    scss({
      sourceMap: true,
      sass: require("sass"),
    })
  ]
};

만약 vscode로 코드 작성중이신 분들이라면!!!

추가되는것이 있습니다.

 

설치

npm i svelte-preprocess

svelte.config.js 파일 생성 및 작성

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({
    sass: {
      sync: true,
      implementation: require("sass"),
    },
  }),
};

 

alias 추가

요거를 사용하는 이유는 경로를 좀 더 편하게 읽기 위해서 입니다.

ex) ../../../ -> ~path/

npm i @rollup/plugin-alias

 

rollup.config.js

export default {
  ...
  plugins: [
   ...
    alias({
      entries: [{ find: "@", replacement: "src/" }],
    }),
  ],
  ...
};

 

Image Loader 추가

 

프로젝트에서 이미지를 사용할 일이 있어서..

npm i @rollup/plugin-image

 

rollup.config.js

export default {
  ...
  plugins: [
   ...
    image()
  ],
  ...
};

 

.prettierrc 추가

{
  "svelteSortOrder": "scripts-markup-styles",
  "svelteStrictMode": true,
  "svelteBracketNewLine": false,
  "svelteAllowShorthand": false,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 180
}

svelteSortOrder // 파일에 각 태그 위치 입니다. script - html - style 순으로 보여지게 되어요. 변경도 가능하답니다.

npm i prettier-plugin-svelte

 

 

 

 

여기까지 세팅 끝~

 

다음에 봬요!

감사합니다.