본문 바로가기

svelte9

Svelte 3 Router https://madfishdev.tistory.com/31?category=855358 시작 Svelte도 React Router와 같은 형태의 Router를 지원한다. 일단 먼저 Svelte 프로젝트를 하나 생성 한다. 위와 같이 svelte project 추가 Svelte typescript 추가 Svelte(Tyepscript) 시작 Svelte(Typescript) 시작 시작 Svelte를 Typescript로 시작하는 방법에 대하여 알아보기로 한다. 다양한 방법으로 Svelte프로젝트를 생성할 수 있지만, 방법의 대부분이 Svelte Template Project를 git에서 가져와서 빌드를 세팅하는 madfishdev.tistory.com 코딩 먼저 Routing을 위해서는 Routing할 .. 2021. 9. 28.
Svelte 글자 바꾸기2 시작 글자 변수를 바꾸어 화면에 표현하는 것을 해봤으니, 이제 내가 직접 타이핑한 글자가 화면에 표현되게 하는 방법에 대하여 알아 보자. 여기서 우리는 바인딩이라는 개념에 대하여 대략 알 필요가 있다. 바인딩? 뭔가 서로 역여 있는게 바인딩이다. 바인딩(Binding)에 대하여 찾아보면 1way, 2way 이런 것들이 나올 것이다. 용어자체는 중요하지 않다. 일단 앞서 해본 것이 일종의 1way 바인딩이다. 코드 내부의 어떤 로직에 의해서 변경된 값 등이 화면상에 출력만 되게 만드는 것이다. 2way 바인딩은 화면상에서 변경한 값이 직접 변수에 할당 되어 변경되고, 반대로 변수를 변경하면 그것이 바로 화면상에도 반영되게 하는 것이다. 예를 들어 text input box에 어떤 값을 쓰면 코드상에 변수도.. 2021. 3. 24.
Svelte로 글자를 바꾸자1 시작 Svelte를 이용하여 동적인 컨텐츠를 만들 수 있는 기초적인 sample을 제작해 보도록 한다. 버튼을 클릭하면, 글자가 바뀌는 예제를 통해서 변수와 UI의 바인딩, 이벤트처리에 대한 기본적인 형태를 파악해 보도록 한다. 일단 Svelte typescript프로 젝트를 생성한다. madfishdev.tistory.com/31?category=855358 Svelte(Typescript) 시작 시작 Svelte를 Typescript로 시작하는 방법에 대하여 알아보기로 한다. 다양한 방법으로 Svelte프로젝트를 생성할 수 있지만, 방법의 대부분이 Svelte Template Project를 git에서 가져와서 빌드를 세팅하는 madfishdev.tistory.com 코딩 /src/App.svelte.. 2021. 2. 22.
Svelte(Typescript) 시작 시작 Svelte를 Typescript로 시작하는 방법에 대하여 알아보기로 한다. 다양한 방법으로 Svelte프로젝트를 생성할 수 있지만, 방법의 대부분이 Svelte Template Project를 git에서 가져와서 빌드를 세팅하는 방식으로 프로젝트를 생성한다. 공식 홈페이지 Svelte 2020. 12. 28.