SvelteKit 시작.

잡소리

웹개발, 윈도우 개발만 하다가, 모바일 개발만 하다가, 코인 개발만하다가, IoT개발만 하다가, 서버 개발하다가

지금은 웹/앱 개발을 해보려 합니다.

 

앱에 대한 수요가 아직도 많고, 고사양 프로세싱을 할땐 어쩔 수 없이 앱 개발을 해야하지만,

최근엔 브라우저의 많은 sdk지원이나 서버의 자원을 이용해서 연산해주는 프로세스가 발달하다보니 

앱이 거의 필요없고, 웹으로 된 앱이 많이 쓰이는 추세입니다.

 

한국은 이상하게 대형 개발사들이 spring으로 자리잡으면서

왠만한 백엔드 개발자들이 spring을 많이 하려는 추세이며 밀고나가려고 합니다. 

"spring이 편하다, 대형 서비스에서 대응하기 좋다"라는 말들이 많지만

내가 java를 썩 달갑게 반기지 않기 때문에 spring은 역시 하지 않으려 합니다.

 

React도 최근 많은 회사에서 사용하고

React-Native도 있어서 같은 프레임워크 기반으로 네이티브 안드로이드 앱이나 아이폰 앱을 개발한다고 하는데...

솔직히 리엑트 네이티브 쓸꺼면 그냥 앱을 만들지 말라고 추천하고 싶습니다.

초반엔 쉬워보이지만 나중엔 기술적 한계가 들어나기 때문에 어중간한 하이브리드 같은 개발을 할빠엔 

네이티브 개발을 하는게 낫다고 생각합니다.

 

아무튼, 나는 항상 시장의 추세보다는 쉽고 재밌어 보이거나 기존의 문제점들을 해결된것들을 좋아하기 때문에

이번 프로젝트의 웹앱 개발은 2020년 정식 웹프레임워크를 발행한 SvelteKit(스벨트킷)으로 해보려 합니다.

 

 

 

 

 

 

SvelteKit의 기본 지식

 

스벨트킷은 Svelte(스벨트)를 사용하기 위한 프레임워크이고.

프레임워크는 규칙에 맞춰서 폴더를 만든다거나, 파일명에 따라서 동작하게 만들어주는 프로그램이라고 보면됩니다.

 

스벨트는 웹 화면을 렌더링 하는 용도로 사용됩니다. 

웹은 화면만 있어야 되는게 아닌, 세션처리, 화면이동(라우팅), 보안 처리, 등등이 필요합니다. 

이러한 작업을 스벨트킷이 하게 됩니다.

 

스벨트킷의 장점은

1. SSR(Server Side Rendering, 서버 측 렌더링) 입니다.

보통 웹 페이지는 페이지 이동시 깜빡이거나, 화면을 그리는 작업을 클라이언트의 브라우저에서 하게 됩니다. 

스벨트를 이용하면 기존과 동일한 방식(static)을 사용할 수도 있지만, 

사용자의 사이트 사용 피로도를 감소 시키기위해, SSR을 이용하곤 합니다.

 

2. 빌드최적화가 쉽습니다. 

vite(비트)를 이용하여, 필수 코드만 로딩되도록 최적화 작업을 해줍니다. 

 

3. HMR(Hot Module Replace)를 지원해줍니다.

주로 다른 프로그래밍에서 많이 쓰이는 말로 '핫 리로드(hot reload)'라고 하는 기능입니다. 

개발을 하다가 저장만 하면, 보고 있는 웹 페이지가 자동으로 리로드 되며 개발이 반영되어 있는걸 말합니다.

이 기능은 로컬에서 쉽게 와닿습니다

 

4. 배포가 쉽습니다.

대부분 프론트엔드를 배포할때는 설치되는 서버의 환경과 맞춰줘야 합니다.

스벨트킷에서는 Adapter 개념을 이용해서 서버와 스벨트킷 사이의 환경을 이어줍니다.

 

공식적으로 지원하는 어댑터는 목록입니다.

- CloudFlare, CloudFlare-Workers

- Netlify

- Node

- Vercel

특히나 Vercel(베르셀)을 써봤는데, 배포가 정말 정말 쉽습니다....

 

5. 파일기반 라우팅

웹에서 화면 이동을 하면 주로.  웹 주소를 변경하는 방식을 이용합니다.

예를 들어 네이버날씨 'https://weather.naver.com' 에서 네이버날시 뉴스 화면으로 이동하고 주소를 보면 'https://weather.naver.com/news' 로 이동되는 것처럼 말입니다.

이럴때 대부분의 서버는 코딩을 통해서 클라이언트가 원하는 주소를 파악하곤합니다.

하지만, 스벨트킷에서는 폴더구조를 이용해서 화면을 컨트롤합니다.

별거 아닌거 같지만, 개발하다보면 이 방식이 정말 직관적이고 편리합니다.

 

 

 

 

 

 

 

 

스벨트킷 프로젝트 시작 전 세팅

스벨트킷은 node 모듈을 사용합니다. 

그래서 nodejs와 npm 설치는 필수입니다.

 

MacOS 환경에서 설치방법

아래 명령어를 차례대로 치면서 설치하고, 설치 확인하기.
터미널에 명령어를 적으시면 됩니다.

윈도우에서 설치방법은 직접 찾으시기 바랍니다.

# 홈브류 설치 (https://brew.sh/index_ko)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 홈브류를 이용한 node, npm 설치
brew install node

# node, npm 설치 확인
node -v
npm -v

 

 

 

 

 

스벨트킷 프로젝트 만들기

스벨트킷은 npm을 이용해서 프로젝트를 생성합니다. 

# 프로젝트 만들기
npm create svelte@latest app-name

명령어 해석

"create svelte" 스벨트 프로젝트를 만들기

"@latest" 마지막버전으로

"create svelte@latest" 마지막 버전으로 스벨트 프로젝트 만들기.

"app-name" 이름이 app-name인 프로젝트.

"create svelte@latest app-name" 프로젝트 이름이 app-name이고 스벨트 마지막 버전으로 프로젝트 만들기.

 

 

만드는 과정에서의 선택지

스벨트킷 5.0.2 버전의 경우 화면 입니다.

 

1. 프로젝트 템플릿 선택

앞서서 프로젝트 만들기 명령어를 실행했고,

이 프로젝트가 어떤 프로젝트로 만들었으면 좋겠는지 선택하는 화면입니다.

일반적으로 기본 세팅만 되어 있는 2번째 선택지인 'Skeleton project'를 선택하지만

처음 스벨트킷을 테스트 해보는 입장에서 데모라도 해봐야 하니, 1번 선택지인 'SvelteKit demo app'을 선택해 보겠습니다.

방향키로 이동하며, 엔터로 선택합니다.

 

2. 타입 확인

스벨트킷은 기본적으로 node를 사용하기 때문에 js(자바스크립트)로 개발하게 됩니다.

타입을 확인하기 위해서 타입스크립트를 사용할거냐는 질문인데, 

데모 체험을 할 것이기 때문에 어떤것이든 선택하셔도 됩니다.

저는 No로 선택해보겠습니다.

 

3. 추가 옵션

방향키로 이동이 가능하며, 스페이스바로 선택이 가능합니다.

확정할땐 엔터를 입력해주세요.

 

 

위 과정을 거치면, 빠르게 프로젝트가 생성됩니다.

저는 프로젝트 이름을 TestDemo로 만들었습니다.

 

생성되었지만, 실행 가능한 상태가 아니기 때문에 다음 과정을 진행해야 합니다.

# 생성된 폴더로 이동
cd TestDemo

# 노드 모듈 설치
npm install

명령어를 입력하면, 프로젝트에 미리 세팅된 node 라이브러리들이 다운로드(설치) 됩니다.

 

 

 

 

 

 

프로젝트 실행

아래 명령어를 통해서 프로젝트를 실행해 봅니다.

# 프로젝트 실행
npm run dev -- --open

"npm run dev"

npm run 명령어를 이용해서 dev 명령어를 실행하라는 뜻입니다.package.json파일에 있는 script인 'dev'가 실행됩니다.

dev 명령어는 'vite dev' 명령어를 실행하라고 하네요.

vite(비트)를 이용해서 개발(dev)용 서버를 시작해라 라는 뜻입니다.

 

"--open"

후에 메인화면을 실행해라 라는 의미 입니다.

컴퓨터에 있는 브라우저의 새로운 탭에 메인화면이 실행됩니다.

 

 

실행화면

 

 

 

 

홈화면 소스

<script>
	import Counter from './Counter.svelte';
	import welcome from '$lib/images/svelte-welcome.webp';
	import welcome_fallback from '$lib/images/svelte-welcome.png';
</script>

<section>
	<h1>
		<span class="welcome">
			<picture>
				<source srcset={welcome} type="image/webp" />
				<img src={welcome_fallback} alt="Welcome" />
			</picture>
		</span>

		to your new<br />SvelteKit app
	</h1>

	<h2>
		try editing <strong>src/routes/+page.svelte</strong>
	</h2>

	<Counter />
</section>

<style>
	section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 0.6;
	}

	h1 {
		width: 100%;
	}

	.welcome {
		display: block;
		position: relative;
		width: 100%;
		height: 0;
		padding: 0 0 calc(100% * 495 / 2048) 0;
	}

	.welcome img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		display: block;
	}
</style>

src/routes/+page.svelte

 

html 처럼 마크업 단위로 되어 있으며,

자바스크립트 구간을 <script></script>로 다루고 있고,

화면의 html 구간을 <section></section>으로, 

화면을 꾸며주는 css 구간을 <style></style>로 나눠놓는 방식이 참 인상적입니다.

 

사실 파일명이 더 인상적인데, 이 방식에 대해서는 다음 게시글에서 찾아뵙겠습니다.

 

 

 

 

 

 

 

 

끝

이번 게시글은 간단하게 스벨트킷에 대해서 알아보고

프로젝트 생성부터 실행까지 해보았습니다.

 

다음 게시글에서는 프로젝트 구조에 대해서 이야기 해보겠습니다.