Svelte와 vite로 CSR 개발 환경 세팅

Svelte는 웹 애플리케이션 개발 프레임워크입니다.

직관적이고 쉬운 문법을 가지고 있는 Svelte로 만든 SSR 기반 프레임워크가 SvelteKit 입니다.

최근에 Svelte에 관한 공식 문서를 보다가 한가지 이상함을 느낌적이 있습니다.

Svelte 공식 문서를 보는데, 이상하게 설치는 SvelteKit을 알려주고 있습니다.

공식적으로 CSR(Client Side Rendering)인 Svelte보다 SSR(Server Side Rendering)을 사용하라는 말인것 같네요.

그런데 저는 최근에 오직 CSR을 위해 Svelte를 사용하고 싶었습니다.

그것은 크롬 익스텐션 때문입니다.

크롬 익스텐션은 SSR은 당연히 사용할리 없고.. CSR만 쓰고 싶은데 왜 설치 방법은 따로 없는거지..?

하고 보니 요오즘 최신 번들러! vite를 이용하여 설치하면 금방 해결될 일이었습니다.

Vite로 CSR기반 Svelte 시작하기

저는 npm을 사용하고 있어서, 가볍게 아래 코드를 입력하여 새 프로젝트를 만듭니다.

npm create vite@latest

그러면 어떤 프레임워크를 쓸거냐고 선택권을 주는데, 사뿐히 Svelte를 선택해줍니다.

여기서 SvelteKit을 선택하면 말짱 도루묵이 되어버립니다.

입맛에 맞는 언어를 선택합니다. 저는 상남자라 JavaScript를 선택했습니다.

그런 다음 터미널에 아래 내용을 입력하면, 프로젝트로 이동하고 라이브러리 설치 후, 실행할 겁니다.

  cd vite-project
  npm install
  npm run dev

잘 돌아가는군요.

프로젝트 디렉토리를 보면 아래와 같이 기본 세팅 되어 있는데, 개발을 하는 영역은 src 내부입니다.

그런데 내부 코드를 자세히 보시면 App.svelte가 있습니다.

브라우저는 svelte 확장자는 모릅니다. 그래서 html, css, js로 바꿔주어야 합니다.

만약 github page와 같은 곳에 이 Svelte로 만든 프로젝트를 올리고 싶다면 빌드를 하여 html, css, js를 추출해야 할 것입니다.

vite가 바로 이 Svelte를 번들링하고 빌드도 할 것입니다.

터미널에 가볍에 아래의 내용을 입력해봅니다.

npm run build

그럼 dist 파일 안에 빌드 된 파일들이 남게 됩니다.

이는 오직 웹 브라우저를 위한 html, css, js 만 남게 됩니다. (+이미지 등 리소스 파일들)

이제 이 빌드파일을 nodejs, 번들러 등이 프로젝트를 실행할 수 없는 환경에서 배포해서 실행시켜줍니다.

대표적으로 github page나 firebase hosting 등이 있는 것 같습니다.

저는 이제 이걸로 크롬 익스텐션 개발에 적용해볼 예정입니다.

위는 SvelteKit에서 빌드한 내용입니다.

한번 빌드해서 내부를 보시면 아시겠지만, 복잡하고 필요없는 서버 로직까지 함께 있습니다.

그래서 처음엔 SvelteKit으로 어찌 해보려다가 포기했습니다 ^_^

단순하지만 많이 쓰는 지식. 메모 겸 공유하기 위해 남깁니다!

[Sveltekit] 버튼 hover시 +page.server.js 실행을 막는 법 (0)	2024.06.17