[Svelte] Svelte의 정의와 개발환경 세팅 (1)

[Svelte란?]

• Svelte(스벨트)는 JavaScript 라이브러리 중 하나로서 React보다 가볍고 Vue.js보다 쉽다는 장점을 가진 최신 프론트엔트 기술이다.
• 스벨트는 JavaScript 코드로 브라우저가 이해할 수 있도록 컴파일을 해주는 컴파일러에 조금 더 가깝다.
• 다시 말해 프레임워크 혹은 라이브러리를 다운로드할 필요가 없다.

 

[Svelte의 구조]

• 스벨트 파일은 주로 아래와 같은 구조로 구성되어 있다.
• script는 상단에 작성되어 JavaScript 또는 TypeScript를 사용할 수 있다.
• style은 CSS 스타일링이 가능하다.

<script>
//자바스크립트 영역
</script>

//마크업 영역

<style>
//css 등의 스타일 영역
</style>

 

[Svelte Kit 개발환경 세팅]

• 이번에는 스벨트를 사용하기 위해 스프링부트 환경에서 스벨트 킷 개발환경을 세팅해보도록 합시다.
• 기존의 스프링부트에서 템플릿에 Thymeleaf 엔진을 적용한 것을 Svelte Kit로 대체할 예정이다.
• 먼저 JavaScript의 Runtime 환경으로 서버 측 어플리케이션을 개발할 때 사용하는 Node.js를 설치한다.
• 설치를 마쳤다면 cmd창을 이용하여 'node -v' 라는 명령어를 통해 버전을 확인한다.
• 스프링부트 프로젝트를 하나 생성하고 스벨트 킷을 세팅하기 위해서는 터미널을 통해 아래 그림과 같이 명령어를 입력하고 설정을 몇 가지 설정을 해야한다.
• 현재 선택된 옵션은 TypeScript를 사용하지 않는 것을 선택했고, 해당 명령어가 실행되면 프로젝트 안에 frontapp이라는 패키지가 새로 생성된다.

npm create svelte@latest frontapp
# app template : Skeleton project
# typeScript : No
# Select additional options : ESLint, Prettier 스페이스바로 체크 나머지 스킵

Svelte Kit 생성

Svelte의 기본 패키징 구조

 

• frontapp 패키지가 생성된 것을 확인했다면 vscode를 통해 frontapp 폴더를 open한다.
• 아래는 frontapp 내의 package.json이라는 파일이 존재하는데 해당 파일 안에는 설치할 것들을 모아두었고, 아직 설치가 된 것이 아니기 때문에 명령어를 통해 설치를 해야한다.
• vscode에서 터미널을 열어 'npm install' 이라는 명령어와 함께 npm(Node Packaged Manager)을 설치한다.
• npm이란 Node.js로 만들어진 패키지를 관리해주는 툴이다. 다시 말해 특정 라이브러리를 추가 및 삭제하는 것을 편리하게 도와준다고 생각하면 좋다.
• 가끔 'npm install' 명렁어를 통해 설치할 때 몇 가지 빠지게되는 경우가 생기기도 하는데, 그럴 땐 'npm install --legacy-peer-deps'를 입력하여 설치를 진행한다.
• 설치가 완료되면 'npm run dev' 명령어를 통해 스벨트킷을 실행하면 된다.
• 스벨트 파일의 기본 확장자 명은 .svelte 이고, 파일들을 보면 앞에 +가 붙혀져 있는걸 볼 수 있는데 이것은 규칙이라고 생각하면 좋다.

# frontapp/ 에서
npm install // npm install 에러나면 npm install --legacy-peer-deps(만약에 안되면 여러번 시도)
# 로컬 서버 실행
npm run dev // Ctrl + C 로 종료 가능

npm run dev 실행

 

npm run dev 실행 후 화면 확인