서론

이 글은 Svelte의 기본 템플릿의 파일들의 구조와 역할을 간단하게 살펴보면서 기록하는 용도이다.

아무래도 공부하면서 하는 것이라 분명히 부족한 글이다.

본론

파일 구조 살펴보기

우선 파일의 구조를 살펴보고자 한다.

• public : 실제 배포될 코드가 위치하는 곳
  • build : 빌드된 Svelte 스크립트 파일이 위치하는 곳. gitignore에 등록되어 있다.
  • favicon.png : 기본 파비콘 파일
  • index.html : 진입 페이지
• src : Svelte의 스크립트가 위치하는 곳
  • App.svelte : svelte 파일
  • global.d.ts : 전역 타입스크립트 인터페이스/타입스크립트
  • main.ts : 스크립트 진입점
• .gitignore : git 추적 제외 파일 목록
• rollup.config.js : 롤업에 대한 설정 파일
• tsconfig.json : 타입스크립트 설정 파일

꽤 간결하게 생성되어 있는 모습을 볼 수 있다. 딱히 더 살펴볼 것도 없어보이는 모습

일부 파일 살펴보기

src/main.ts

import App from './App.svelte';

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

export default app;

위와 같은 간단한 스크립트가 들어있다.

App 컴포넌트를 불러온 다음 public/index.html의 어떤 태그(target)에 그릴지 작성되어 있다.

위 코드대로라면 App은 body태그에 그려질 것이다.

props는 App컴포넌트에 값을 넘겨주는 역할을 한다.

name에 'world'라는 값을 넘겨주고 있다.

src/App.svelte

<script lang="ts">
	export let name: string;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelt tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

App.svelte 파일이다.

script, main, style 세 가지 태그가 눈에 띈다.

Svelte파일은 script, style, html 세 가지 영역으로 구분되어 있는 모습을 볼 수 있으며, 흔하게 알던 기본 html,css,js 문법을 거의 그대로 사용가능해 익숙한 모습을 볼 수 있다.

script

<script lang="ts">
	export let name: string;
</script>

우선 script 부분을 살펴보면 lang이라는 속성에 ts라는 값이 들어가있다. 이것으로 사용하는 개발언어 타입을 명시할 수 있는 것으로 보인다.

다음은 export 구문이다. name은 이전 main.ts 파일에서 props를 통해서 값을 넘겨받을 수 있도록 한다.

html

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelt tutorial</a> to learn how to build Svelte apps.</p>
</main>

main 태그 안에는 평범한 html 태그가 들어있으나 독특한 부분은 {name} 부분이다.

이를 보면 변수에 있는 값을 해당 영역에 출력해주는 것을 볼 수 있다.

style

스타일 부분은 크게 볼 것 없이 그냥 스타일을 다루고 있는 모습이다.