Svelte 설치, 프로젝트 생성

Svelte 설치

Svelte 공식 홈페이지 에서 설치방법 및 예제들을 모두 확인할 수 있습니다.

Svelte • Cybernetically enhanced web apps

 

svelte templage app 설치

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

 

 

npm run dev 를 통해 localhost로 앱 실행이 가능합니다.

npm run dev

 

추가적인 기능들도 설치 하였습니다. FontAwsome(fa), 라우팅 기능 ( routes ), 스토어 기능 ( store )

 

앱 구조

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

작성할 코드들은 src 폴더에 작성을 하면 됩니다.

src 폴더에 App.svelte 와main.js가 기본적으로 생겨있습니다.

App.svelte는 사용하는 컴포넌트들을 담는 가장 첫번째 컴포넌트로서 모든 컴포넌트의 부모 컴포넌트라고 보시면 됩니다.

main.js는 가장 먼저 실행되는 javascript파일로 js 및 서비스의 시작점이라고 생각하시면 됩니다.

이 main.js의 가장 큰 역할 중에 하나는 이 App.js를 index.html 파일에 위치시키고 서비스를 시작하는 기능이되겠습니다

 

 

svelte는 아주 단순하게는 요약하면 state와 state를 바라보는 component 그리고 이 둘이 서로 영향을 주고 받으면서 화면을 그려 구성해 가는 것이라고 이해될 것입니다.

(state는 말그대로 컴포넌트의 어떤 상태를 나타내거나 컴포넌트에 표시할 데이터 혹은 데이터의 집합이라고 기억하시면 되겠습니다.)

 

 

 

참고

https://freeseamew.gitbook.io/svelte/3./main.js-app.js

https://svelte.dev/