Code Playground

< h1 > Code Playground </ h1 >

Form 다루기 이제 svelte에서 input 요소들을 어떻게 다루는 지 살펴보도록 하자. - Input Text - AddPersonForm.svelte Add a new person Add Person 먼저 form 태그에 3가지 input 태그를 만들고 각 input에 변수를 binding했다. 그리고 handleSubmit 함수를 form 태그에 submit 이벤트로 등록해주었다. 이 때 지난 번에 소개한 preventDefault라는 Event modifier를 이용하여 form 태그의 기본 동작을 막아주었다. 이제 form 태그 안에 있는 button을 클릭하면 submit 이벤트가 발생하여 handleSubmit 함수가 실행될 것이다. (bind:value는 아래 글에서 자세히 설명했으므로..

이제 Svelte로 Modal을 만들어보려고 한다. Modal 컴포넌트를 만들어서 해당 컴포넌트를 특정 condition에 의해 보여줬다 안보여줬다 toggle할 수 있도록 만들어야 할 것이다. 일단 App.svelte와 동일한 폴더에 Modal.svelte를 만들어보자. Conditional Styles {#if showModal} Sign up for offers! {/if} 위 Modal 컴포넌트는 showModal 변수가 true일 때만 보여진다. 그리고 class:promo={ isPromo }는 바로 conditional styles이다. 즉, 조건에 따라 class name을 줬다 안줬다 할 수 있는 기능이다. class:promo={ isPromo } 라고 하면 isPromo 변수가 tru..

Loops {#each people as person (person.id)} {person.name} {person.age} years old, {person.hairColor} hair {:else} There are no people to show... {/each} svelte에서 loop을 돌며 dom 을 그릴 때는 each block을 사용한다. 중간에 else block을 이용해서 만약에 배열에 데이터가 하나도 없을 경우 보여 줄 dom을 결정할 수도 있다. {#each people as person, index (person.id)} {index + 1} : {person.name} {/each} 이렇게 index를 가져올 수도 있다. {#each people as { name }, inde..

Input & Data binding Hello {name}! {color} jean! update jean color 이렇게 color 변수를 선언한 후에 아래 {color} jean!을 출력하면 화면에 black jean!이라는 단어가 출력된다. ({}는 동적인 값을 넣을 때 사용한다.) color 변수의 값을 버튼을 클릭했을 때 동적으로 바꿔주고 싶다면 클릭 이벤트를 등록하면 된다. Svelte에서 inline 이벤트를 등록하는 방법은 아주 쉬운데, 먼저 script에서 함수를 선언해준 다음, 아래 태그에 on:click으로 등록하면 된다. Svelte에서는 click, mousemove 등 모든 이벤트를 소문자로 등록한다. 이렇게 하면 버튼을 클릭하면 화면에 black jean!이 blue jea..

https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO 나는 주로 유투브 영상을 보면서 공부하는 것을 좋아하는데, 스벨트 관련 정말 괜찮은 시리즈가 있어서 위에 첨부했다. 총 35강인데 한 강의 당 10분이 넘지 않는 짧은 길이라서 틈틈히 짬내서 보면 좋을 듯 하다. 아무튼 이 강의를 쭉 훑으면서 중요한 내용들을 블로그에 정리해보려고 한다. Template Installation 일단 Svelte는 마치 React의 Create-react-app 처럼 기본적인 세팅이 되어 있는 템플릿을 제공하고 있다. 그래서 나와 같은 Svelte Beginner들이 쉽게 설치하고 프로젝트를 시작할 수 있다. degit이라는 ..

요즘 관심가는 기술 중 하나인 스벨트(Svelte)에 대해서 차근 차근 공부해보려고 한다. Svelte(스벨트)란? 스벨트가 뭔지 궁금해서 Svelte 홈페이지에 들어가서 소개문을 읽어보았다. Svelte is a tool for building fast web applications. Svelte는 빠른 웹 어플리케이션을 구축하기 위한 도구이다. It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces. Svelte는 interactive한 유저 인터페이스를 구축한다는 데 있어 React나 Vue와 같은 Ja..