웹언어 (193) 썸네일형 리스트형 [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개라는 의미로 삼항 연산자라고 부르지만, 실제로는 조건문입니다. - 조건식.. [Svelte강좌] 3강 State(상태값) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. 1. 기본개념 - https://youtu.be/m7wrjrUf4oE 2. 확장개념 - https://youtu.be/o8sYNrUD6QM 1. State(상태 값)란? - State란 컴포넌트가 어떤 값을 관리할 때 사용하는 것을 말합니다. - 상태 값은 컴포넌트로 표현할 값의 상태나 목록이 되기도 하며, 이벤트를 통해 발생된 마우스나 키보드의 데이터도 상태 값이 될 수 있습니다. 즉, 프런트엔드를 구성하는 모든 데이터가 상태 값입니다. - 리액트(React)에서는 useState()라는 함수를 통해 값을 관리하는데, 스벨트(Svelte)는 자바스크립트에서는 변수처럼 사용하고, 마크업에서는 중괄호({ })를 사용하여 상태 값을 표현합니다. 1) 텍.. [Svelte강좌] 2강 컴포넌트 - 기본사용법 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/zM29Sf0ncck 1. src 폴더 파일 구조 - 지난 강좌에서 Svelte 설치 폴더 구조를 확인했습니다. - 여기에 src폴더에 있는 2개의 파일 구조를 보도록 하겠습니다. 1) App.svelte - [ App.svelte ]는 최상위 컴포넌트 파일입니다. - Svelte에서는 컴포넌트 확장자가 [ js ]가 아닌 [ svelte ]으로 된다는 것을 잘 기억해주시면 됩니다. ## 설치된 처음 코드 보기 Hello {name}! - 처음엔 간단히 이렇게 작성되어 있습니다. ## 컴포넌트 구역 확인하기 //script 영역 //markup 영역 //style 영역 - 컴포넌트는 3가지 구역으로 나눕니다. 3개의 작성 .. 이전 1 2 3 4 5 6 7 ··· 25 다음
