svelte

08_Svelte_Stores

Stores 애플리케이션 상태가 애플리케이션의 컴포넌트 계층 내에 모두 속하지 않습니다. 관련 없는 여러 컴포넌트 또는 일반 JavaScript 모듈에서 액세스해야 하는 값이 있을 수 있습니다. Writable stores Svete에서는 Store가 있습니다. Store는 단순히 Store 값이 변경될 때마다 이해 관계가 있는 파트에게 알릴 수 있는 subscribe 메소드를 가진 객체입니다. App.svelte에서 count는 저장소이며, count.subscribe 콜백에서 count_value를 설정합니다. stores.js 탭을 클릭하여 count의 정의를 확인합니다. 쓰기 가능한 저장소이며, subscribe 외에도 메서드를 set 및 update 메서드가 있습니다. 이제 Incrementer..

07_Svelte_Lifecycle

Lifecycle 모든 컴포넌트는 생성될 때 시작되고, 삭제될 때 종료되는 라이프사이클이 있습니다. 해당 라이프사이클 동안 중요한 순간에 코드가 실행할 수 있는 몇 가지 기능이 있습니다. onMount 가장 자주 사용하는 항목은 onMount 이며, 컴포넌트가 DOM에 처음 렌더링된 후에 실행됩니다. 앞서 요소를 렌더링한 후 상호 적용해야 할 때 잠시 접했을 것입니다. 네트워크를 통해 일부 데이터를 로드하는 onMount 핸들러를 추가합니다. SSR(Server-side Rendering)으로 인해 컴포넌트를 초기화하는 동안 라이프사이클 기능을 호출하는 것도 중요하지만, 어디에서 호출하는지는 중요하지 않습니다. 그래서 만약 우리가 원한다면, utils.js에서 interval 로직을 헬퍼 함수로 추상화할..

06_Svelte_Bindings

Bindings Text Inputs 일반적으로 Svelte의 데이터 흐름은 하향식입니다. 상위 컴포넌트는 하위 컴포넌트에 props를 설정할 수 있고, 컴포넌트는 요소에 특성을 설정할 수 있찌만, 그 반대의 경우는 설정할 수 없습니다. 어떤 경우에는 이 규칙을 어기는 것이 유용할 수 있습니다. 이 컴포넌트의 요소를 예로 들어보면, name 값을 event.target.value로 설정하는 on:input 이벤트 핸들러를 추가할 수 있지만, 다소 상용적입니다. 대신, bind:value 지시문을 사용할 수 있습니다. 즉, name 값이 input 값을 업데이트할 뿐만 아니라 input 값을 변경하면 이름이 업데이트됩니다. Hello {name}! Numeric Inputs DOM에서는 모든 것이 문자열입..

05_Svelte_Events

Events DOM Events 앞서 살펴본 바와 같이, 요소에 대한 모든 이벤트를 on: 지시문을 사용하여 작성할 수 있습니다. The mouse position is {m.x} x {m.y} Inline Handlers 이벤트 핸들러는 인라인으로 선언할 수 있습니다. The mouse position is {m.x} x {m.y} 여기서 따옴표는 선택 사항이지만 일부 환경에서는 구문 강조 표시에 매우 유용합니다. 일부 프레임워크에서는 성능상의 이유로, 특히 루프 내부에서 인라인 이벤트 핸들러를 사용하지 않는것이 좋습니다.하지만 Svelte에서는 적용되지 않습니다. 컴파일러는 당신이 어떤 형태를 선택하든 항상 옳은 일을 할 것입니다. Event Modifiers DOM 이벤트 핸들러는 동작을 변경하는 ..

04_Svelte_Logic

Logic HTML에는 조건이나 루프와 같은 논리를 표현할 수 있는 방법이 없습니다. Svelte는 다음과 같은 마크업을 제공합니다. If Blocks Svelte에서는 조건부로 마크업을 렌더링하기 위해 if 블록으로 래핑합니다. {#if user.loggedIn} Log out {/if} {#if !user.loggedIn} Log in {/if} Else Blocks 상호 배타적인 두 조건에는 다른 블록을 사용하여 이 컴포넌트를 약간 간소화 할 수 있습니다. {#if user.loggedIn} Log out {:else} Log in {/if} Else-if Blocks else if와 함께 여러 조건을 'chained'할 수 있습니다. {#if x > 10} {x} is greater than 10..

03_Svelte_Props

Props Declaring props 지금까지 내부 상태(주어진 컴포넌트 내에서만 값을 액세스)만을 다뤘습니다. 실제 애플리케이션에서는 한 컴포넌트에서 하위 컴포넌트로 데이터를 전달해야 합니다. 이를 위해 일반적으로 'props'로 줄여진 속성을 선언해야 합니다. Svelte에서는 export 키워드로 이 작업을 수행합니다. 마치 `$:` 처럼, 처음에는 이질감이 느껴지실 수 있습니다. JavaScript 모듈에서는 일반적으로 이러한 방식으로 내보내기가 작동하지 않습니다. 일단 이렇게 작성하다 보면 익숙해지실거에요!😂 Default Values Svelte는 props의 기본값을 쉽게 지정할 수 있습니다. 이제 answer prop이 없이 두 번째 구성 요소를 추가하면 다시 기본값으로 돌아갑니다. Sp..

02_Svelte_Reactivity

Reactivity Assignments Svelte의 줌심에는 DOM을 애플리케이션 상태와 동기화(예: 이벤트에 대한 응답)할 수 있는 강력한 반응 시스템이 있습니다. 강력한 반응 시스템이 있다는 것을 증명하려면 이벤트 핸들러를 연결해야 합니다. 그리고 함수 안에서 값을 변경할 수 있는 코드를 추가합니다. Clicked {count} {count === 1 ? 'time' : 'times'} Declarations Svelte는 컴포넌트의 상테가 변경되면 DOM을 자동으로 업데이트합니다. 컴포넌트 상태의 일부분은 다른 부분(예: firstname 및 lastname에서 파생된 전체 이름)에서 계산한 후 변경될 때마다 다시 계산해야 하는 경우가 많습니다. 이 경우를 위해 리엑티브한 선언을 합니다. let..

01_Svelte_소개

Introduction Basics SVELTE의 공식 사이트의 튜토리얼에서는 사이트 방문과 함께 작고 빠른 웹 애플리케이션을 구축하기 위한 모든 것을 배울 수 있다고 합니다. 또한, API docs와 예제를 모아둔 링크, 60초 빠른 시작을 참고할 수 있습니다. 그래서 SVELTE이란? SVELTE은 빠른 웹 애플리케이션을 구축하기 위한 Tool 입니다. 이는 Reactjs나 Vuejs 프레임워크와 유사하게 원할한 Interactive User Interface를 구축하기 쉽다는 목표를 가집니다. 하지만 SVELTE은 애플리케이션 코드를 런타임에서 해석하지 않고 Build 시 JS로 앱을 변환합니다. 즉, 프레임워크의 추상화에 대한 성능 비용을 지불하지 않으며, 애플리케이션을 처음 로드할 때 어떤 패널..

00_Svelte_시작

Sevlte 본 내용은 SVELTE에 대한 이해를 위해 공식 사이트에서 제공하는 튜토리얼을 번역한 내용입니다. 다음, SVETLE을 통해 간단한 프로젝트를 몇개 진행해볼 예정입니다.