웹사이트 개발을 위해서 Svelte 라는 프론트엔드 웹프레임워크를 배워보려 한다. React 나 Vue.js 와 같이 널리 알려진 프레임워크들은 가상 DOM 을 사용하는 반면에, Svelte는 실제 DOM을 반영하는 방식이다. 빌드시점에 Vanilla JS 로 컴파일하여 속도가 빠르고 간편하다는 장점이 있다.
docker 이미지 설치
보통은 특정 버전의 docker node 이미지를 받아 개발환경을 만들곤 하는데, 시간이 계속 지나면 지날수록 새로 배포되는 라이브러리들이 호환되지 않아서 node 이미지를 다시 받아야 하는.. 그런 상황이 반복되곤 했다. 이번에는 조금 달리 최근 LTS 버전으로 이미지를 설치해봤다.
참고로 bullseye 는 데비안 OS 이미지를 선호해서 그정도만 선택했다.
$ docker pull node:lts-bullseye
svelte 프로젝트 생성
아래부터 설명하는 부분은 사실 svelte 문서를 따라한 것 뿐이다. my-app 이라는 이름으로 프로젝트를 하나 만든다.
$ npm create svelte@latest my-app
실행을 하고 나면, 몇가지 질문을 받게 되는데, 프로젝트 유형만 SvelteKit demo app 만 선택하고 나머지는 선택하지 않거나 추가하지 않았다.
$ npm create svelte@latest my-app
Need to install the following packages:
create-svelte@5.0.5
Ok to proceed? (y) y
create-svelte version 5.0.5
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ SvelteKit demo app
│
◇ Add type checking with TypeScript?
│ No
│
◇ Select additional options (use arrow keys/space bar)
│ none
│
└ Your project is ready!
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
Next steps:
1: cd my-app
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
npm notice
npm notice New minor version of npm available! 9.6.7 -> 9.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
npm notice Run npm install -g npm@9.8.1 to update!
npm notice
프로젝트 실행방법
위에 있는 로그에 보면 다음 할 일을 잘 알려주고 있다. 프로젝트에 접근한다.
$ cd my-app
그리고 관련 package 를 설치하도록 install 작업을 실행한다.
$ npm install
added 56 packages, and audited 57 packages in 24s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
그 다음에 원래라면, npm run dev 으로 실행하면 되는데, 지금 docker 로 개발환경을 셋팅하다보니, 추가로 설정할 부분이 더 있다. docker 이미지 밖의 host pc 에서 접근이 가능하려면, 0.0.0.0 으로 host 설정을 해야 한다.
// package.json
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"dev": "vite dev --host 0.0.0.0", // --host 옵션 추가.
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"svelte": "^4.0.5",
"vite": "^4.4.2"
},
"type": "module"
}
마지막으로 서버를 실행하면 아래와 같이 프로젝트가 실행된 결과를 볼 수 있다. 앞으로 하나씩 튜토리얼을 따라가면서 배울 수 있는 기반은 마련 되었다.
> npm run dev
