Svelte Tutorial

Svelte를 사용할 일이 생겨서 학습을 위해 Svelte 공식 사이트의 Tutorial을 진행하면서 학습한 내용을 정리한 시리즈 입니다.이런 식으로 공식 사이트 옆에 학습하면서 실습해볼 수 있는 좋은 환경이 구성되어 있지만 내가 글을 쓰면서 한번 더 기억하기 위한 글

2. Reactivity 2-1. Assignments Svelte의 핵심은 이벤트에 반응하는 것처럼 DOM과 변수의 동기화 상태를 유지하기 위한 강력한 반응형 시스템입니다. 위의 코드처럼 Svelte는 DOM이 업데이트해야 함을 알려주는 코드를 갖고 이 할당을 수행

그동안 주어진 컴포넌트 안에서만 사용 가능한 내부 변수만 다뤘는데 'props'로 외부에서 데이터를 받아서 사용할 수 있습니다.export를 통해 외부에서 받아올 props를 선언할 수 있습니다.사실 JS에서는 export를 이런식으로 사용하지는 않습니다.export할

원래 HTML에서 조건문이나 반복문같은 Logic을 표현할 수 없지만, Svelte에서는 가능합니다.위의 예시처럼 {2. HTML에서 if문을 활용해서 조건부 랜더링을 할 수 있습니다.반복문으로 List의 Data를 보여주고 싶을 때, HTML에서 each\` bloc

Svelte에서 Event를 어떻게 사용할 수 있는지 알아봅니다.앞에서 얘기했듯 on:을 통해 이벤트를 처리할 수 있습니니다.on:뒤에 HTML Element에 추가하고 싶은 이벤트 핸들러의 이름을 지정해주고 함수를 넣어줍니다.5-1의 예제의 함수를 inline에서도

Svelte에서 데이터 흐름이 보통 Top-Down으로 부모 컴포넌트가 자식 컴포넌트에게 props로 데이터를 넘겨주는 방식인데, bind를 통해 다른 데이터 흐름을 구현할 수 있습니다.이런 코드에서 name의 변화에 따라 input의 내용이 변하게 됩니다. (App

모든 컴포넌트는 Lifecylce을 갖고 있습니다. 몇몇 함수를 통해 Lifecycle마다 실행할 코드를 작성할 수 있습니다.onMount는 컴포넌트가 DOM에 처음 랜더된 후 넘겨진 콜백함수를 실행합니다.Data를 fetch할 때 Server-Side-Renderin