재주껏 하는 Front-End(29)
-
5. 논리 문법 / Props
이번 글에서는 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..
2020.09.04 -
4. 반응형 문법
이번 글에서는 Svelte의 반응형 문법에 대해 알아보도록 하겠다. Svelte에서 반응형이란 데이터 모델의 상태가 변경되면 이를 인지하여 DOM에서 변경될 부분을 찾아 반영하는 것을 말한다. 이벤트 리스너 등록부터 알아보자. 참고 - 이해를 돕기 위해 데이터 모델이 아닌 변수라는 단어로 설명하였다. 이벤트 연결 이벤트 연결은 특정 컴포넌트 또는 Form이 지원하는 이벤트에 대해 핸들러 함수를 등록하는 것으로, 해당 이벤트가 발생했을 때의 작업을 정의하는 작업이다. 기본 사용 방법은 아래와 같다. 참고 - 핸들러 함수의 이름이 이벤트의 이름과 같다면 아래와 같이 사용 가능 (Ex. Click 이벤트인 경우) ... VueJS에서는 @이벤트 이름="이벤트 핸들러 함수" 형태로 사용하는데, Svelte도 비..
2020.09.02 -
3. 기본 문법
이번에는 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..
2020.09.01 -
2. Quick Start Guide + VS Code 개발 환경 구성
Svelte는 다른 UI 프레임워크와 달리 빌드 과정에서 DOM 변경에 관련된 작업을 처리하기 때문에, 런타임에 관련된 기능을 제공하지 않아 개발 환경을 구성하는 방법이 다른 프레임워크와는 차이가 있다. Svelte는 개발 환경을 구성하기 위해 REPL과 Degit을 이용한 환경 구성 2가지를 소개하고 있다. 이 두 가지 방법을 사용해서 Svelte 개발 환경을 구성해보자. REPL로 개발 환경 구성 REPL이란, Read Eval Print Loop의 약자로 단일 사용자의 입력을 받아 이를 실행한 후 결과물을 리턴하는 단순한 상호작용 프로그래밍 환경을 뜻한다. Svelte는 구조상 CDN을 사용할 수 없기 때문에 공식 사이트에서 REPL 환경을 제공한다. 아래의 링크에서 REPL 페이지로 접속할 수 있..
2020.08.27 -
1. Svelte 소개 - 컴파일 방식의 UI 프레임워크
최근 프런트엔드 프레임워크는 흔히 말하는 3대장인 ReactJS, VueJS, Angular로 3 분할되어있다. 전통적인 웹페이지 개발 방식과 달리 컴포넌트의 개념을 도입해 재사용성과 생산성이 뛰어나고 Virtual DOM을 사용하여 페이지가 동적으로 동작하는 데 있어 강력한 성능을 제공하는 것이 3 대장 프레임워크의 공통적인 장점이다. 그런데 최근에 3 대장 프레임워크에 도전하는 녀석이 나타났다. 우리나라에서는 2년 전부터 알려지기 시작했으며 자신이 더 작고, 더 가벼우며, 더 빠르게 반응하는 진정한 반응형 프레임워크라고 주장한다. 개발자로서 이런 말을 들었는데 궁금하지 않을 수가 없어 이 녀석에 대해 좀 더 자세히 알아보고자 블로그에 하나씩 정리하고자 한다. 웹 프레임워크 3 대장의 자리를 넘보는 컴..
2020.08.26