웹언어 (191) 썸네일형 리스트형 [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개의 작성 .. [Svelte강좌] 1강 스벨트 개발환경 구축(설치) - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 눌러 클릭하세요! https://youtu.be/kxGsmwVGoO0 1. REPL(Read-Eval-Print-Loop) - Svelte는 공식 사이트에서 REPL을 통해, 별도의 설치 과정이나 컴파일 없이 코딩하고 바로 결과를 확인할 수 있는 서비스를 제공하고 있습니다. - 이 기능은 코딩은 좀 해봤다면 들어 본, CodeSandbox같이 코드만 입력해도 바로 결과가 보입니다. 1) Svelte사이트 접속 - 우선 아래 주소를 클릭해서 Svelte사이트에 접속해주세요. https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building use.. [Svelte강좌] 인트로- 스벨트는 무엇인가? - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/9Pzvu1IKmDc 1. Svelte의 현 위치 - 아직까지 웹프론트엔드 프레임워크의 대세는 react입니다. - 위의 트렌드 그래프에서도 보다시피 주황색 라인인 react조회수가 월등한 것을 확인할 수 있습니다. - 그 다음이 vue, 그리고 angular, svelte 순서로 볼 수 있습니다. - 그럼에도 불구하고 제가 Svelte강의를 열게 된 것은 easy, easy, easy하기 때문입니다. - 웹프론트엔드를 처음 배우거나, 웹퍼블리셔에서 프런트엔드 개발자로 넘어갈 때 React부터 한다면 매우 어렵게 느껴질 것입니다. - 좀 쉬운 Svelte로 웹프론트엔드 프레임워크들을 이런 것이구나를 익히도 다른 언어를.. 이전 1 2 3 4 5 6 7 ··· 24 다음
