# 앱 구조 설명 : main.js, App.js, 폴더구조

### 1) 기본 구조

설치 폴더 기본 구조

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

이제 src 폴더를 보도록 하겠습니다. 이제부터 여러분이 작성할 대부분의 코드는 src 폴더 아래에 작성이 될 것입니다.

이 src 폴더에 기본적으로 생성되는 파일은 App.svelte 와main.js가 있습니다. App.svelte는 사용하는 컴포넌트들을 담는 가장 첫번째 컴포넌트로서 모든 컴포넌트의 부모 컴포넌트라고 보시면 됩니다. 그리고 main.js는 가장 먼저 실행되는 javascript파일로 js 및 서비스의 시작점이라고 생각하시면 됩니다. 이 main.js의 가장 큰 역할 중에 하나는 이 App.js를 index.html 파일에 위치시키고 서비스를 시작하는 기능이되겠습니다.

* App.svlete

```
<script>
export let name;
</script>

<style>
h1 {
	color: purple;	
}
</style>

<h1>Hello {name}</h1>
```

svelte파일에는 script, css, html 을 필요에 따라 구성해 사용할 수 있습니다.

* main.js

```
import App from './App.svelte'

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

export default app
```

main.js 는 App을 불러와 target을 이용해 만들어진 앱을 배치시켜 실행시킵니다.

그리고 public 폴더의 global.css 에 스타일을 지정해 두면 스타일이 전역으로 설정되므로 공통으로 사용되는 css를 이곳에 설정해 두면 편리합니다.



[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>

