전체 글
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을 통해 간단한 프로젝트를 몇개 진행해볼 예정입니다.
토마토 - [백준 7576번]
토마토 - 백준 7576번 문제 철수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림과 같이 격자 모양 상자의 칸에 하나씩 넣어서 창고에 보관한다. 창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토의 인접한 곳은 왼쪽, 오른쪽, 앞, 뒤 네 방향에 있는 토마토를 의미한다. 대각선 방향에 있는 토마토들에게는 영향을 주지 못하며, 토마토가 혼자 저절로 익는 경우는 없다고 가정한다. 철수는 창고에 보관된 토마토들이 며칠이 지나면 다 익게 되는지, 그 최소 일수를 알고 싶어 한다. 토마토를 창고에..