한빛미디어

개발자인만큼 옛날부터 모바일 청첩장은 직접 만들겠다는 로망이 있었는데요!

 

현업에서 Svelte를 이용해서 앱을 만들고 있는 만큼, Svelte로 모바일청첩장을 만들어보았습니다.

스벨트 앤 새퍼 인 액션 (한빛미디어) 책을 많이 참고했어요!

 

스벨트라는 프레임워크를 처음 들어보는 분들도 많을 것 같은데요!

요새 떠오르는 웹 프론트엔드 프레임워크 입니다.

 

스벨트의 장점!

왜 스벨트를 써야하는가!

 

 

스벨트는 컴파일되기 때문에 꼭 필요한 코드만 번들에 넣습니다. 리액트같은 경우엔 프레임워크에 필요한 여러 기본적인 코드들이 다같이 들어갑니다. 그래서 같은 앱이라고 한다면

스벨트로 만든 앱은 9.7KB

뷰는 41.8KB

리액트+리덕스는 193 KB

라고 합니다. (Conduit라는 앱을 만들고 비교하였습니다.)

 

이것만 보아도 스벨트는 정말 작죠?

 

 

2. 코드를 적게 사용합니다.

이건 스벨트를 배울때부터 알 수 있습니다. 한마디로 스벨트만을 위한 코드가 거의 없다고 보면 됩니다. 리액트 같은 경우에 (제 기준) 쓸데없이 기본적으로 써야하는 코드들이 많습니다. 스벨트는 그런것들을 다 제외시키고 정말 필요한 코드만 작성하게 되어있습니다.

 

위에서 언급한 앱의 코드를 비교해보면

스벨트는 1,116줄

뷰는 2,076줄

리액트+리덕스는 2,050줄

입니다.

 

반정도 적은걸 알 수 있습니다.

 

 

 

3. 가상 DOM 없이 반응성을 제공합니다. 그래서 더 빠릅니다.

리액트는 가상DOM을 사용하여 가상DOM과 실제DOM을 계속해서 비교하고 달라진 부분만 업데이트 하는 식으로 웹페이지가 구성됩니다. 스벨트는 가상DOM을 사용하지 않고 상태를 업데이트 할 수 있습니다.

 

이 외에도

스벨트가 가장 메모리를 덜 차지하고,

컴포넌트 생성이 매우 쉽습니다. (컴포넌트를 만들 때 필요한 기본적인 코드가 거의 없습니다. 클래스 등의 개념조차 필요하지 않습니다.)

상태관리가 정말 간편하며, 애니메이션도 손쉽게 만들 수 있습니다.

 

이 이유만으로도 Svelte를 사용하는 이유가 충분하지 않나요?

얼른 스벨트가 유명해져서 저도 더 몸값이 높은 개발자가 되고 싶습니다.

 

스벨트 앤 새퍼 인 액션은

위의 내용을 다 아우르면서

컴포넌트를 어떻게 정의하는지,

블록 구조 ({#if}, {#each} 등 ), 컴포넌트간의 통신, 스토어 (상태관리), 애니메이션, 라우팅, 디버깅, 테스팅 및 배포까지 다룹니다.

그리고 스벨트 기반 프레임워크인 새퍼까지 다루게 됩니다.

 

 

그래서 Svelte and Sapper in action을 참고하여

청첩장을 Svelte로 만들어 보았습니다!

 

 

Component 예시

별거 없지만 세로 간격을 조정하기 위해 Space라는 빈 요소를 만들었는데요,

(Space.svelte)

<script> export let value;</script><div class="space" style="height:{value}rem"></div>

value 값을 넘겨주면 그 rem만큼 간격이 벌어집니다.

 

Space 컴포넌트를 호출할 때에

<Space value=3></Space>

이런식으로 호출을 하면 됩니다.

 

 

어쨌든 저는 Svelte를 이용해서 저만의 청첩장을 거의 3시간 안에 만들었습니다!

업체에서 만들면 며칠내로 삭제되는데 이건 평생! 가지고 있을 수 있는 청첩장인데다가

사진도 무한대로 넣을 수 있어서 40장 넘게 넣었어요ㅎㅎㅎ

 

어떤가요~

Svelte에 대한 흥미가 더 생기지 않으셨나요?

제가 처음 Svelte를 시작할 때에는 교재도 없고 강의도 없어서 공식문서로만 공부를 했는데, 한빛미디어에서 이렇게 책을 내주셔서 여러분은 더 쉽게 배우실 수 있겠네요!!!!

 

스벨트에 관심이 생기신 분들은 꼭! 이 책을 참고하셔서 시작해보세요!

어떤 웹페이지든 정말 쉽게 만드실 수 있습니다. ㅎㅎㅎ