스벨트킷(SvelteKit) 프로젝트 구조 - 03

이번 글에서는 이전 강좌에서 만들어본 간단한 SvelteKit 애플리케이션의 파일과 폴더 구조에 대해 하나씩 살펴보도록 하겠습니다. 이미 "Hello World" 애플리케이션을 생성하고 실행하는 방법을 배웠으니, 이제 그 프로젝트 안에 포함된 파일들이 어떤 역할을 하는지 간단히 알아보겠습니다.

프로젝트 디렉토리 구조 살펴보기

먼저, VS Code에서 "Hello World" 프로젝트를 열면, 루트 디렉토리에는 아래 그림과 같이 폴더들과 파일들이 보일 것입니다. 

 

---

1. package.json 파일

이 파일은 Node.js 프로젝트에서 매우 중요한 역할을 하며, 프로젝트의 의존성(Dependencies) 및 실행 스크립트를 정의합니다.

• 의존성: SvelteKit과 Svelte 관련 패키지가 여기에 나열되어 있습니다. 
• 빌드 도구: Vite를 빌드 도구로 사용하고 있으며, 이는 매우 빠르고 강력한 도구입니다. 또한, ESlint와 Prettier도 포함되어 있습니다. 이 두 가지 도구는 코드 품질을 유지하는 데 큰 도움이 됩니다. ESLint는 코드에서 오류나 경고를 찾아내고, Prettier는 코드 포맷을 통일시켜 가독성을 높입니다.
• 스크립트: 프로젝트에서 제공하는 주요 스크립트는 다음과 같습니다.
  • dev: 개발 모드로 애플리케이션을 실행합니다. 즉시 리로드 기능을 지원하여 코드를 변경하면 바로 결과를 볼 수 있습니다.
  • build: 프로덕션 배포를 위해 애플리케이션을 빌드합니다.
  • preview: 빌드된 애플리케이션을 미리보기 모드로 실행합니다.
  • lint: 모든 파일을 린트합니다. 코드 스타일 규칙을 검토해 줍니다.
  • format: 모든 파일을 포맷팅합니다.
• 모듈 형식: package.json 파일에는 "type": "module" 설정이 있습니다. 이를 통해 프로젝트 내의 JavaScript 파일들은 모듈로 동작하며, import와 export 키워드를 사용할 수 있습니다.

---

2. package-lock.json 파일

package-lock.json은 의존성 관리의 핵심 파일 중 하나입니다. 이 파일은 의존성 트리를 정확히 기록하여 동일한 패키지 버전이 모든 환경에서 일관되게 설치되도록 도와줍니다.

---

3. 기타 파일

• .gitignore: Git에서 관리하지 않을 파일들을 지정하는 파일입니다. 보통 node_modules 폴더나 빌드 결과물들이 여기에 나열됩니다.
• .npmrc: npm 설정 파일로, 프로젝트별 npm 설정을 관리합니다.

---

4. svelte.config.js 파일

이 파일은 SvelteKit 프로젝트의 설정 파일입니다. 초보자에게는 복잡하게 느껴질 수 있지만, 간단히 설명하자면 주로 배포 시 사용할 어댑터(adapter)를 설정하는 부분이 이 파일에 포함됩니다. SvelteKit은 다양한 환경에 맞춰 배포할 수 있는 어댑터를 지원하므로, 필요에 따라 이 파일을 수정할 수 있습니다.

---

5. vite.config.js 파일

SvelteKit 프로젝트는 실제로 Vite라는 빌드 도구 위에 구축되어 있습니다. vite.config.js 파일은 이 Vite의 설정 파일로, 플러그인 추가 및 환경 설정을 위해 사용됩니다. 만약 프로젝트에 추가적인 기능이 필요하다면, 여기에서 Vite 관련 설정을 수정할 수 있습니다.

---

폴더 구조

이제 폴더 구조에 대해 살펴보겠습니다.

---

6. .svelte-kit 폴더

이 폴더는 SvelteKit에서 개발 모드나 빌드 스크립트를 실행할 때 자동으로 생성됩니다. 일반적으로 이 폴더는 컴파일된 결과물이나 중간 파일들을 담고 있습니다.

---

7. node_modules 폴더

node_modules 폴더는 프로젝트의 모든 의존성을 담고 있는 폴더입니다. 이 폴더는 npm install 명령어를 실행할 때 자동으로 생성되며, 프로젝트에서 사용되는 모든 패키지가 이곳에 설치됩니다.

---

8. static 폴더

이 폴더는 프로젝트의 정적 파일들을 담고 있습니다. 여기에는 이미지, 파비콘, robots.txt 파일 등이 포함됩니다. 정적 파일들은 URL을 통해 직접 접근이 가능하며, 변경되지 않는 파일들을 저장하는 데 유용합니다.

---

9. src 폴더

src 폴더는 프로젝트의 핵심 파일들이 들어있는 폴더로, 라우트, 페이지, 컴포넌트 등이 여기에 포함됩니다. 이 폴더는 SvelteKit 애플리케이션의 실제 코드가 작성되는 곳이라고 보면 됩니다.

---

10. routes 폴더

이 폴더는 라우팅 기능을 담당합니다. SvelteKit에서는 파일 기반 라우팅을 사용하기 때문에, routes 폴더 내의 파일이 각각의 페이지로 매핑됩니다. 예를 들어, +page.svelte 파일은 기본 페이지를 나타내며, 브라우저에서 localhost:5173에 접속하면 이 파일의 내용이 표시됩니다.

---

11. app.html 파일

app.html은 SvelteKit 애플리케이션의 기본 HTML 템플릿 파일입니다. 이 파일에서는 전체 페이지 구조가 정의됩니다. 기본적인 HTML 구조를 설정하는 곳이라고 이해하시면 됩니다.

---

마무리

이제 SvelteKit 프로젝트 구조와 각 파일의 역할을 대략적으로 파악하셨을 것입니다. 모든 파일과 설정이 어떻게 애플리케이션에 기여하는지 이해하면 프로젝트를 더 쉽게 확장할 수 있을 것입니다.