스벨트 VSCode에서 실행하는 방법, 폴더 구조에 대해서 간략하게 알아보기📚

안녕하세요! 오늘은 스벨트(Svelte) 애플리케이션이 실행되는 과정과 구조에 대해 정리해보도록 하겠습니다. 😊 스벨트 프로젝트의 흐름을 이해하면 더욱 효율적으로 개발할 수 있답니다!

1. VSCode에서 스벨트 프로젝트 시작하기 🚀

스벨트를 시작하기 위해서 VSCode를 사용할 수 있는데요! 아래는 스벨트 프로젝트를 생성하고 실행하는 절차입니다:

1.1. 스벨트 프로젝트 생성하기

1. 먼저 빈 폴더를 하나 만들어주세요.
   • ➕ cd 명령어를 통해 만들던, 파일탐색기에서 만들던 상관없지만 cd명령어로는 한글 폴더명이 잘 안되는 것 같아서 저는 파일탐색기에서 그냥 폴더 만드는 편이에요
2. 만든 빈 폴더를 VSCode를 열고, 터미널을 띄웁니다.
3. 먼저 폴더를 하나 만들어주고, 빈아래 명령어를 입력하여 스벨트 템플릿을 다운로드합니다:

npx degit sveltejs/template my-svelte-project

• 여기서 my-svelte-project는 생성할 프로젝트의 이름입니다. 다른 이름을 원하신다면 자유롭게 바꿔주셔도 되고,  

npx degit sveltejs/template ./

• 위와 같이 상대경로로 설정하면 현재 디렉토리에 스벨트 템플릿을 다운로드해서 가져올 수 도 있어요. (귀찮으니 저는 이 방법을 추천합니다)

1.2. 패키지 설치

• 각자 개발환경이 다 다르기 떄문에 템플릿에서는 node 모듈이 포함되어있지 않아요.
• 필요한 의존성을 설치하기위해 아래 명령어를 입력해주세요.

  npm install
  

• 설치가 다 됐다면 위 사진처럼 node 모듈이 생겼죠?

1.4. 개발 서버 실행

• 마지막으로, 아래 명령어로 개발 서버를 실행합니다:

  npm run dev

• 그러면 브라우저가 자동으로 열리며 localhost:(숫자) 경로에서 스벨트 애플리케이션을 확인할 수 있습니다!

2. 스벨트 실행 과정 🌀

스벨트 템플릿을 다운받으면 바닐라 JS도 있고, svelte도 있고, html도 있는데 .. 애플리케이션은 어떻게 실행될까요? 다음은 간단한 흐름도입니다.

2.1. index.html 파일 로드

• 브라우저가 index.html 파일을 로드합니다. 이 파일은 웹 애플리케이션의 진입점으로, HTML 파일인데요.
• 아래에 보면 <script defer src='/build/bundle.js'></script>가 있어요.
• bundle.js는 스벨트 애플리케이션의 컴파일된 자바스크립트 코드입니다! 이를 통해 우리가 svelte를 자바스크립트로 작성해서 빌드할 수 있게 되는거에요.

2.2. main.js 실행

• index.html에서 참조한 bundle.js가 로드되면, main.js 파일이 실행됩니다.
• main.js에서는 App.svelte를 가져와서, HTML의 <div id="app"></div>에 해당 컴포넌트를 마운트합니다.
• 이를 통해 스벨트 애플리케이션이 실제 사용자에게 표시되기 시작하고, 상호작용할 수 있게 됩니다

import App from './App.svelte';

const app = new App({
    target: document.getElementById('app')
});

export default app;

2.3. App.svelte 컴포넌트의 렌더링

• App.svelte에서 정의된 HTML, CSS, JavaScript 코드가 실행되며, 필요한 데이터와 상태가 정의됩니다.
• 스벨트는 이렇게 컴포넌트 내부의 데이터 변화를 자동으로 감지하여 UI를 업데이트합니다.

요약하자면:

• index.html은 애플리케이션의 기본 구조 및 스크립트를 포함하고 있으며,
• bundle.js는 스벨트로 작성된 애플리케이션 코드를 자바스크립트로 변환한 결과물로, 실제로 실행되는 코드입니다.

3. 스벨트 파일 구조 📂

스벨트 프로젝트의 주요 파일 구조는 다음과 같습니다:

• index.html: 웹 애플리케이션의 HTML 구조를 정의하고, 스크립트를 로드하는 진입점입니다.
• main.js: 애플리케이션의 시작점으로, 스벨트 컴포넌트를 DOM에 마운트합니다.
• App.svelte: 애플리케이션의 주요 UI 컴포넌트로, 데이터, 스타일, 템플릿이 함께 포함되어 있어 완전한 구성 요소로 동작합니다

데이터 흐름 이해 💡

• main.js에서 App.svelte를 가져와서 사용합니다.
• 이는 자바스크립트에서 스벨트 파일을 직접 읽을 수 없기 때문에  App.svelte 파일이 컴파일된 후 생성된 자바스크립트 코드를 가져와 실행하는거에요!
• 애플리케이션의 데이터 및 상태는 App.svelte 안에서 관리되므로, 컴포넌트의 재사용성과 코드 관리가 용이합니다.