가장 빨리 만나는 스벨트 | 11장 ~ 끝

스토어 사용하기

스토어는 스벨트 애플리케이션에 속한 컴포넌트끼리 데이터를 자유롭게 공유하는 방법중 하나입니다. 스벨트로 작성한 애플리케이션에 포함된 각각의 컴포넌트들은 subscribe 함수를 사용하여 애플리케이션 전체에 공유된 스토어 데이터의 변화를 감지할 수 있습니다. 따라서 이 subscribe 함수에서 추가적인 동작을 정의한다면 데이터 공유뿐 아니라 애플리케이션 전체가 일관성을 가지고 움직이게 할 수 있습니다. 

 

리덕스의 스토어처럼 구독 해놓고 그 값이 변경되면 사용하고 있는 컴포넌트에서 자동으로 업데이트한다. 

 

스토어 때문에 스벨트에서 변수명 사용시 주의해야할 것이 있습니다. $스토어명 형태의 사용이 예약되어 있기 때문에 일반 변수명을 $로 시작하여 사용하면 안됩니다. 

 

스벨트 스토어는 writable과 readable을 제공합니다. 

 

모션

스벨트는 UI와 바인됭된 데이터 값이 변경될 때 UI를 부드럽게 화면에 표시되도록 도와주는 모션(motion)기능을 제공합니다. 스벨트의 모션은 스토어를 반환합니다. 우리가 코드를 통하여 스토어의 값을 특정 값으로 변경하면 모션은 스토어의 값을 점진적으로 변경하여 화면에도 부드럽게 보이게 합니다. 코드에서 스토어 값을 0에서 1로 변경하면 모션은 초깃값 0과 변경할 값 1사이의 중간 값들을 발생시켜서 발행합니다. 그러면 일반 스토어처럼 subscribe가 최종 값으로 한 번 호출되는 것이 아니라 모션 옵션 설정에 의해서 여러 번 그리고 점진적으로 호출되어 동작합니다. 사용자의 이벤트에 의해서 화면 변경이 일어나면 한 번에 변경되는게 아니라 순차적으로 슬라이드되듯이 화면에 보이게 됩니다. 

 

핵심은 스토어와 똑같이 사용했지만 내부에서는 여러번 값을 변경해준다 입니다. 

 

<script>
  import { tweened } from "svelte/motion"
  import { cubicIn } from "svelte/easing"

  const progress = tweened(0, {
    duration: 1000,
    // easing: cubicIn,
  })

  progress.subscribe((v) => console.log(v))
</script>

<progress value={$progress} />
<button
  on:click={() => {
    $progress = 0
  }}>0%</button
>
<button
  on:click={() => {
    progress.set(0.5)
  }}>50%</button
>
<button
  on:click={() => {
    progress.set(1)
  }}>100%</button
>

<style>
  progress {
    width: 100%;
  }
</style>

 

이게 재밌는게 스벨트는 모션기능을 라이브러리단에서 지원을 해준다. 뭔가 이건좀 신기한것 같다. 마치 framer-motion이 react에 내장되있는 뭐 그런건가..

 

easing은 시간에 따라 값이 변하는 방법을 미리 구현한 패키지입니다. spring은 스토어를 반환하는 함수로 계속 변경되는 값을 자연스럽게 보이기 위해 사용합니다. 

 

이외에도 transition, animation 기능도 제공하는등 아주 흥미롭게 읽었다. 

 

라우팅이란?

웹 애플리케이션에서 화면 간 이동은 각 화면이 가진 URL 링크를 타고 이동합니다. 고전적인 웹 애플리케이션은 URL이 변경될 때 혹은 화면 변경이 필요할 때마다 브라우저는 서버에 모든 화면 구성에 필요한 리소스들과 데이터를 요청했습니다. 하지만 최근 웹 애플리케이션은 최초 URL로 서버에 접근시 브라우저에서 동작할 JS, HTML, CSS등을 한번에 받은 뒤 URL 별 기능 또는 화면 네비게이션을 클라이언트 측에서 처리하고 데이터나 이미지등만 서버에 요청합니다. 이런 방식의 애플리케이션을 SPA(Single Page Application)이라고 합니다. SPA에서 화면 전환 및 화면 전체의 내비게이션을 관리하는 것을 라우팅 또는 라우터라고 합니다. 개발자는 URL에 매칭되는 화면을 어떻게 구성할 것인가 고민해야 합니다. 이럴 때 스벨트킷에서 제공하는 라우팅을 사용합니다.

 

스벨트 킷

스벨트는 프론트엔드 개발 프레임워크입니다. 어떤 앱도 프론트엔드 기능만으로는 사용자에게 완벽한 기능을 제공할 수 없으므로 대부분의 프론트엔드 앱은 백엔드 시스템의 지원을 받아야 합니다. 스벨트 킷은 이렇게 스벨트에 특화된 백엔드 개발 방법을 제공하여 스벨트를 풀스택 개발 도구로 만들어줍니다. 

 

array.sort와 랜덤 정렬

배열의 내장함수 sort는 배열 안의 요소들을 정렬하는 함수입니다. 이 정렬을 위해서 sort 함수는 파라미터로 함수를 받습니다. 사용법은 다음과 같습니다. 

let arr = [1,5,3,2,4]
arr.sort((a, b) => {
	return a - b 
})

 

sort 함수에 파라미터로 넘겨주는 함수는 보통 무기명 함수로 작성합니다. 자바스크립트는 정렬이 완성될 때까지 이 무기명 함수를 호출합니다. 호출할 때 배열의 두 개 요소를 무기명 함수에 넘겨서 호출합니다.  이 때 우리는 오름차순으로 정렬하려면 첫 번째로 넘겨받은 a 요소에서 b 요소를 뺀 결괏값을 반환하면 됩니다. 반대로 내림차순으로 정렬하려면 b - a를 반환하면 됩니다.