웹언어/Svelte (12) 썸네일형 리스트형 [Svelte강좌] 11강 Bindings - Each Block - 오쌤의 니가스터디 1. Each Block 바인딩(Binding)이란? - 바인딩은 상태 값과 그 값을 제어하는 요소와의 결합을 의미합니다. - 보통 데이터를 입력하는 다양한 폼(input, select, textarea 등)과 함께 사용됩니다. - 하지만 다른 요소들에도 사용할 수 있습니다. - 이번에는 each block 관련으로 보고자 합니다. - each block은 반복 로직에서 사용합니다. 그러다 보니 다양한 작업들을 합니다. - 지난 강좌에서 select태그의 옵션 태그때문에 사용은 했었습니다. - 워낙 each block은 많이 사용하기 때문에 다시 정리하고 넘어가도록 하겠습니다. - 이번 강좌에서는 간단한 버킷리스트를 제작해보도록 하겠습니다. 1) 마크업 구조 확인하기 - svelte의 바인딩기능이 아직 .. [Svelte강좌] 10강 Bindings - textarea, select요소 - 오쌤의 니가스터디 1. 바인딩(Binding)이란? - 바인딩은 상태 값과 그 값을 제어하는 요소와의 결합을 의미합니다. - 보통 데이터를 입력하는 다양한 폼(input, select, textarea 등)과 함께 사용됩니다. - 지난 강좌에서는 input요소들만 봤는데, 이번에는 select태그와 textarea태그의 바인딩을 보도록 하겠습니다. ## 문법 - 보통 위의 형태로 작성한다고 보면 됩니다. 1) textarea value 바인딩 - textarea태그 요소는 여러 줄 입력상자입니다. - 원래 HTML에서는 입력되는 값은 태그 사이에 텍스트 컨텐츠를 통해 작성했습니다. 안녕하세요 - 의 한 줄 입력상자인 text처럼 value속성을 통해 값을 바인딩 시켜줍니다. - 그래서 bind:value로 작성하면 됩니다.. [Svelte강좌] 9강 Bindings - input요소 - 오쌤의 니가스터디 1. 바인딩(Binding)이란? - 바인딩은 상태 값과 그 값을 제어하는 요소와의 결합을 의미합니다. - 보통 데이터를 입력하는 다양한 폼(input, select, textarea 등)과 함께 사용됩니다. - svelte는 양방향 바인딩을 이용해서 동시에 값이 변경되게 처리됩니다. - 지난 [ 7강 if block ]에서 입력 상자에 값을 입력하면 반환되는 것을 [ keyup ] 이벤트를 통해 강제로 발생시켰는데, 사실 그렇게 작업할 필요가 없이 svelte는 바인딩이 잘 되어 있습니다. - 바인딩은 다른 요소와 컴포넌트에도 가능하지만 이번 강좌에서는 form관련 바인딩만 보도록 하겠습니다. ## 문법 - 보통 위의 형태로 작성한다고 보면 됩니다. 1) input text value 바인딩 - 입력상.. [Svelte강좌] 8강 Logic - each blocks - 오쌤의 니가스터디 1. each block(반복 블록) - 컴퓨터 프로그램을 이루는 요소 중 대표적인 구문이 바로 조건문과 반복문입니다. - 기본적으로 HTML은 위에서 말한 두 구문이 없지만, 자바스크립트는 두 구문을 가지고 있습니다. - 지난 강좌에서는 조건문을 봤고, 이번 강좌에서는 반복문을 보도록 하겠습니다. - 반복은 컴퓨터가 제일 잘하는 일입니다. 마크업 영역에서 정말 반복할 일이 많습니다. - 예를 들어, 쇼핑몰 같은 경우 상품이 정말 많죠? 그리고 넷플릭스도 보면 영상 관련 정보가 정말 많습니다. - 하지만 HTML은 조건문과 마찬가지로 반복문을 처리할 수 있는 기능이 없습니다. - svelte에는 그래서 [ each block]을 사용합니다. 1) 기본 each block - 기본적인 반복 구문부터 확인해.. [Svelte강좌] 7강 Logic - if blocks - 오쌤의 니가스터디 1. if block(논리 블록) - 컴퓨터 프로그램을 이루는 요소 중 대표적인 구문이 바로 조건문과 반복문입니다. - 기본적으로 HTML은 위에서 말한 두 구문이 없지만, 자바스크립트는 두 구문을 가지고 있습니다. - 반복 관련은 다음 강좌에서 보고, 이번 강좌에서는 조건문 관련만 보도록 하겠습니다. - svelte에서는 마크업 영역에서 조건을 사용할 수 있는 [ if block ]이라는 것을 제공합니다. 1) if block - [ if block ] 중 기본적인 구문입니다. - 조건이 true일 경우에만 마크업 영역을 표시합니다. ## 문법 {#if 조건} {/if} ## 코드 보기 - 이번 코드는 버튼을 토글 상태로 만들겠습니다. [로그인/로그아웃] - 보통 홈페이지들이 로그인을 하면 로그인한 정.. [Svelte강좌] 6강 Svelte Props - 오쌤의 니가스터디 1. Props - [props]는 [properties]를 줄임말입니다. - 부모 컴포넌트가 자손컴포넌트에게 전달해주는 값이라고 생각하면 편합니다. 1) Props 기본 사용방법 - 부모컴포넌트는 기본적으로 만들어져 있는 [ App.svelte ]로 사용하겠습니다. - 자손컴포넌트인 [ Child.svelte ]는 새 문서를 만들어서 사용해주세요. ## 코드 보기 - Child.svelte 이름 : { user } 나이 : { age } 취미 : { hobby } - 자손 컴포넌트에서 사용한 상태값은 export 를 통해서 부모컴포넌트로 상태값을 내보내줍니다. ## 코드 보기 - App.svelte - 부모 컴포넌트인 [ App.svelte ]로 자손 컴포넌트를 import 를 통해 불러 옵니다. - .. [Svelte강좌] 5강 Svelte Event - 오쌤의 니가스터디 1. Svelte 이벤트 문법 - 이벤트(event)는 자바스크립트가 명령을 주는 시점을 말합니다. - 보통 마우스를 클릭했을 때, 키보드를 눌렀을 때, 스크롤바를 움직일 때와 같이 ~했을 때가 이벤트입니다. 1) 이벤트 문법 ## Svelte 이벤트 기본 사용방법 on:이벤트명 = { 이벤트함수 } - 처음 강좌부터 사실 클릭이벤트를 사용해 봤습니다. 이번 강좌에서는 이벤트를 디테일하게 배워보도록 하겠습니다. 2) 이벤트의 종류 - Svelte 확장 플러그인을 통해 [ on: ]만 작성해도 사용 가능한 이벤트가 쫙~ 뜹니다. - 이벤트가 엄청 많은 것이 확인됩니다. 하지만 저것은 모두 자바스크립트 관련 이벤트가 대부분이기 때문에 그쪽에서 공부가 잘 되어 있다면 어렵지 않습니다. 그래도 꼭 기억하면 좋을.. [Svelte강좌] 4강 Reactivity(반응성) - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/E9dlYwCcOfs ** 이번 강좌에서는 Svelte의 Reactivity(반응성)에 대해서 알아보겠습니다. 반응성이란 값이 변할 때 별다른 호출 없이 값이 같이 변하는 것을 말합니다. 당연한 말같이 들리겠지만, 다른 프레임워크를 통해 이 기능을 쓰려면 훨씬 더 복잡한 코드를 씁니다. 하지만 Svelte는 간단히 사용이 가능해집니다. 거기에는 [ $: ]라는 반응성 코드가 있습니다. 1. 삼항연산자를 통한 마크업에서의 반응성 - 일단 삼항연산자가 무엇인지 보도록 하겠습니다. ## 삼항연산자 문법 조건식?참표현식:거짓표현식; - 연산되는 피연산자가 3개라는 의미로 삼항 연산자라고 부르지만, 실제로는 조건문입니다. - 조건식.. 이전 1 2 다음
