728x90 Svelte3 Svelte로 Todo앱 예제 만들기 프론트엔드 프레임워크를 공부할 때 가장 기본이 되는 Todo앱 만들기를 통해 이제까지 정리했던 사항들을 되짚어보자. 전체적인 구조는 다음과 같다. App.svelte에서 input을 통해 todos 리스트에 항목을 추가 받고 해당 todos 리스트를 Props로 Todo.svelte에 제공하여 아래에 순서대로 출력하도록 한다. 이 때 각 항목들은 id를 가지며 수정, 삭제 기능을 가지고 있다. 입력할 input, button 생성 사용자로부터 새로운 todo를 입력받을 input과 button을 생성하며 이 값을 저장할 변수와 그것을 처리할 함수를 추가한다. {e.key === 'Enter' && createTodo()}} type="text" /> Create Todo {#each $todos as t.. 2021. 8. 17. Svelte 기초 문법 선언적 렌더링 변수 사용 Svelte는 Vue와 비슷하게 {name} 이벤트 바인딩 버튼을 클릭하면 name 변수의 값이 변하는 함수를 만들고 그 함수를 버튼에 바인딩 하려면 on:click={함수} 를 버튼에 입혀주고 함수 이름을 {} 안에 넣어주면 된다. {name} Assign input 변수 바인딩 input 태그에 일반 value를 사용하면 단방향 바인딩이 되므로 변수가 표시는 되지만 사용자의 수정 값이 변수에 반영되지는 않는다. 반면 bind:value 를 사용하면 양방향 바인딩이 되므로 사용자의 수정 값이 변수에 반영되게 할 수 있다. css 적용 vue와 마찬가지로 파일 내에 태그를 사용할 수 있으며 여기에 적용된 스타일은 해당 파일에만 적용된다. 조건문 & 반복문 조건문 toggle 버튼.. 2021. 8. 16. Svelte란?? Svelte??? Svelte는 Rich Harris가 제시한 새로운 접근 방식을 가진 Front-End framework이다. 2016년 1.0 버전, 2018 2.0 버전, 2019년 3.0버전을 출시하였고 3.0버전부터 주목을 받기 시작했다. Vue나 React에 비해서 비교적 늦게 출시되었으나 front framework들을 비교한 한 사이트에서는 아래와 같이 만족도가 제일 높은 프레임워크(실제 동작을 보면 컴파일러에 가깝다)로 꼽히기도 했다. Svelte의 특징 앞 문단에서 Svelte는 기존에 비해 새로운 접근 방식을 지닌 framework라는 언급을 했다. 그렇다면 Svelte는 기존의 Vue, React, Angular와 같은 framework들과 무엇이 다를까? svelte.dev 공식 .. 2021. 8. 13. 이전 1 다음
