SpringBoot + Svelte 프로젝트 생성하기 (1)

Intellij에서 SpringBoot 프로젝트 생성

Intellij > File > New > New Project

Gradle 관련 오류가 발생하면 Springboot와 Gradle 버전 충돌일 수 있으니
gradle > wrapper > gradle-wrapper.properties에서 Gradle 버전을 수정한다.

 

SpringBoot 프로젝트 내부에 Svelte 생성

0. SpringBoot 내부에 frontend 디렉토리 생성

 

1. Svelte 프로젝트 생성

degit을 통한 github 저장소를 clone하여 사용한다.
Svelte에도 공식 CLI가 있긴 했는데 지금은 더 이상 사용하지 않고,
공식 홈페이지에서도 예시로 주어진 템플릿 코드를 clone하여 사용하라고 설명하고 있다.

 

degit이란?

npm으로 git 저장소를 쉽게 다운로드 받을 수 있도록 만든 Node.js 패키지

 

 

[1] degit 설치 (전역에 설치)

npm install -g degit

 

[2] 템플릿 코드 clone

// npx degit sveltejs/template {폴더명}
npx degit sveltejs/template frontend

 

[3] 패키지 설치

npm install

 

💡Svelte 구조 살펴보기

폴더/파일	설명
node_modules	설치된 패키지가 위치한 폴더
public	빌드 결과가 위치한 폴더
scripts	Typescript 설정 파일이 위치한 폴더
src	실제 프로젝트 코드가 들어갈 폴더
package.json	설치된 패키지 정보가 들어 있는 파일
rollup.config.js	rollup 설정 파일

기본 템플릿에서 기본 자바스크립트 번들러로 Webpack이 아니라  Rollup이라는 라이브러리를 쓰고 있다.
Webpack과 Rollup의 장단점
웹팩을 이용한 템플릿

 

2. TypeScript 적용

Javascript를 사용하는 기준으로 템플릿이 작성되어 있는데, TypeScript로 변환할 수 있는 방안이 템플릿안에 제공한다.

scripts 폴더 안에 setupTypeScript.js이다.

node ./scripts/setupTypeScript.js

App.svelte 파일에 들어가 보면, script 선언에 ts로 TypeScript가 지정되어 있는것을 알 수 있다.

이제 프로젝트에 필요한 모듈을 설치하면, 기본적으로 사용할 준비가 완료된다.

npm install

 

 

 

참고)

Svelte로 만드는 Todo List - 1

스벨트 개발환경 구축

Svelte-TypeScript-사용하기