이번 글에서는 Svelte 컴포넌트의 생명 주기에 대해서 알아보도록 하겠다. 컴포넌트 기반의 UI 프레임워크들은 컴포넌트를 효과적으로 관리하기 위해 생명 주기를 적용하고 있으며, 생성부터 소멸까지의 과정에 필요한 작업들을 정의하기 위해 생명 주기 이벤트를 제공한다. 아래는 VueJS의 컴포넌트 생명 주기를 나타낸 것이다. Svelte 역시 컴포넌트 생명 주기에 대한 이벤트들을 제공한다. 단, 다른 UI 프레임워크들과 달리 아직 많이 세분화되지 않았는데 차후에 버전이 올라가면 좀 더 세분화되지 않을까 생각한다. 아래는 Svelte의 생명 주기를 나타낸 것이다. 이제 Svelte에서 제공하는 생명 주기에 대해 알아보자. onMount onMount 이벤트는 컴포넌트가 DOM에 렌더링 된 후에 실행되는 이벤트..

이번 글에서는 바인딩에 대해서 알아보자. 바인딩이란 컴포넌트의 데이터 모델 변수와 HTML 요소 또는 컴포넌트와 연결하는 작업을 말한다. 전통적인 웹 방식에서는 오직 DOM 객체로 요소에 접근하여 value를 설정해야 했지만, 최근의 UI 프레임워크들은 이러한 과정들을 자동으로 수행하여 연결해준다. 양방향 바인딩 Svelte와 같은 반응형 UI 프레임워크들은 컴포넌트들에 데이터를 전달할 때 상위 컴포넌트가 하위 컴포넌트에게 전달하는 하양식 구조를 가지고 있다. ReactJS의 경우 양방향 바인딩을 공식적으로 지원하지 않아 단방향 두 개를 구성하여 비슷하게 흉내를 내는 식으로 구현한다. ReactJS가 이런 엄격한 규칙을 정한 이유는 거대한 프로젝트에서 유지보수성이 용이하다는 큰 장점이 있기 때문이며, 이..

이번 글에서는 Svelte의 이벤트 처리에 대해 알아보자. 이벤트 등록 Svelte는 모든 구성 요소에 이벤트 설정이 가능하며, 아래의 방법으로 이벤트 리스너를 등록할 수 있다. 이벤트 리스너 동작} /> 간단한 사용 예제를 살펴보자. 하나의 태그를 추가하고 태그 내에서 마우스를 움직이면 마우스 커서 좌표를 출력하는 코드이다. The mouse position is {m.x} x {m.y} 실행 결과는 아래와 같다. 어렵지 않게 마우스 이벤트와 이벤트 리스너를 등록하여 원하는 기능을 구현할 수 있다. 간단한 기능이라면 아래와 같이 이벤트 핸들러를 ES6의 화살표 함수를 통하여 구현할 수도 있다. m = {x: e.clientX, y: e.clientY}}> The mouse position is {m.x..

이번 글에서는 Svelte의 논리 문법과 Props에 대해서 알아보도록 하겠다. 분기 처리 프로그래밍을 하다 보면 어느 언어든 반드시 분기 처리를 통하여 상황에 맞게 동작해야 하는 경우가 많다. Svelte에서는 템플릿에 분기 처리를 통하여 조건에 따라 출력을 제어할 수 있다. Svelte에서는 템플릿에 if / else를 지원하며 기본적인 사용 방법은 아래와 같다. 1. if문 사용 방법 {#if 조건식} 조건이 참일 경우 실행할 코드 {/if} 2. if / else문 사용 방법 {#if 조건식} 조건이 참일 경우 실행할 코드 {:else} 조건이 거짓일 경우 실행할 코드 {/if} 3. if / else-if / else문 사용 방법 {#if 조건식1} 조건 1이 참일 경우 실행할 코드 {:else..

이번 글에서는 Svelte의 반응형 문법에 대해 알아보도록 하겠다. Svelte에서 반응형이란 데이터 모델의 상태가 변경되면 이를 인지하여 DOM에서 변경될 부분을 찾아 반영하는 것을 말한다. 이벤트 리스너 등록부터 알아보자. 참고 - 이해를 돕기 위해 데이터 모델이 아닌 변수라는 단어로 설명하였다. 이벤트 연결 이벤트 연결은 특정 컴포넌트 또는 Form이 지원하는 이벤트에 대해 핸들러 함수를 등록하는 것으로, 해당 이벤트가 발생했을 때의 작업을 정의하는 작업이다. 기본 사용 방법은 아래와 같다. 참고 - 핸들러 함수의 이름이 이벤트의 이름과 같다면 아래와 같이 사용 가능 (Ex. Click 이벤트인 경우) ... VueJS에서는 @이벤트 이름="이벤트 핸들러 함수" 형태로 사용하는데, Svelte도 비..

이번에는 Svelte의 기본 문법에 대해서 알아보자. Svelte의 기본 문법은 공식 사이트의 Tutorial에 자세히 나와 있으며 아래의 링크로 접속해서 확인할 수 있다. svelte.dev/tutorial/basics Introduction / Basics • Svelte Tutorial Introduction / Basics a. Basicsb. Adding datac. Dynamic attributesd. Stylinge. Nested componentsf. HTML tagsg. Making an app a. Assignmentsb. Declarationsc. Statementsd. Updating arrays and objects a. Declaring propsb. Default valuesc..

Svelte는 다른 UI 프레임워크와 달리 빌드 과정에서 DOM 변경에 관련된 작업을 처리하기 때문에, 런타임에 관련된 기능을 제공하지 않아 개발 환경을 구성하는 방법이 다른 프레임워크와는 차이가 있다. Svelte는 개발 환경을 구성하기 위해 REPL과 Degit을 이용한 환경 구성 2가지를 소개하고 있다. 이 두 가지 방법을 사용해서 Svelte 개발 환경을 구성해보자. REPL로 개발 환경 구성 REPL이란, Read Eval Print Loop의 약자로 단일 사용자의 입력을 받아 이를 실행한 후 결과물을 리턴하는 단순한 상호작용 프로그래밍 환경을 뜻한다. Svelte는 구조상 CDN을 사용할 수 없기 때문에 공식 사이트에서 REPL 환경을 제공한다. 아래의 링크에서 REPL 페이지로 접속할 수 있..

최근 프런트엔드 프레임워크는 흔히 말하는 3대장인 ReactJS, VueJS, Angular로 3 분할되어있다. 전통적인 웹페이지 개발 방식과 달리 컴포넌트의 개념을 도입해 재사용성과 생산성이 뛰어나고 Virtual DOM을 사용하여 페이지가 동적으로 동작하는 데 있어 강력한 성능을 제공하는 것이 3 대장 프레임워크의 공통적인 장점이다. 그런데 최근에 3 대장 프레임워크에 도전하는 녀석이 나타났다. 우리나라에서는 2년 전부터 알려지기 시작했으며 자신이 더 작고, 더 가벼우며, 더 빠르게 반응하는 진정한 반응형 프레임워크라고 주장한다. 개발자로서 이런 말을 들었는데 궁금하지 않을 수가 없어 이 녀석에 대해 좀 더 자세히 알아보고자 블로그에 하나씩 정리하고자 한다. 웹 프레임워크 3 대장의 자리를 넘보는 컴..