Develop Note by J.S.

스벨트란? 스벨트는 2016년 출시된 오픈소스 프론트엔드 프레임워크 입니다. 스벨트는 Vue, React와 동일한 기능을 가진 코드를 작성하였을 때 가장 적은양의 코드라인으로 작성이 가능하며, 가상돔 (Virtual Dom)을 사용하지 않는다는 특징이 있습니다. * 동일 로직 비교 // svelte {a} + {b} = {a + b} // react import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setA] = useState(2); function handleChangeA(event) { setA(+event.target.value); } function handl..

1. 개요 Svelte 프레임워크 자체는 Routing 기능을 제공하지 않습니다. 따라서 Svelte를 사용하여 SPA를 구현하고자 한다면 별도의 라이브러리를 설치하여야 하지만 SvelteKit 프레임워크의 경우 Routing 기능이 내장되어 있습니다. 2. Svelte Routing (Feat. svelte-spa-router) // router 모듈 설치 $ npm i svelte-spa-router // route/index.js import Home from './routes/Home.svelte' import Author from './routes/Author.svelte' import Book from './routes/Book.svelte' import NotFound from './rout..

1. Context Api Svelte에서 데이터를 다른 컴포넌트의 공유하는 방법에는 Props, Store, Context Api 를 이용하는 방법이 있습니다. - Props는 상위 컴포넌트에서 하위 컴포넌트로의 데이터 전달 - Store는 별도의 저장소를 두어 다양한 위치에서 해당 저장소에 접근하여 데이터를 핸들링을 할 수 있는 기능입니다. - Context는 특정 컴포넌트 위치에서 Context를 생성하면 해당 컴포넌트 위치 기준 자식, 자손 컴포넌트 범위로 데이터를 공유하는 기능입니다. - 상기 이미지와 같은 컴포넌트 구조에서는 Props를 사용한다면 반복하여 자손 컴포넌트로 Props를 전달하는 번거로움이 발생됩니다. 이때 Context Api를 활용하면 간단하게 원하는 데이터를 공유할 수 있습..

1. 소개 - Svelte 키워드로 구글링을 하는 경우 Svelte, SvelteKit 두 프레임워크에 대한 내용을 접할 수 있습니다. 일반적으로 Svelte라고 하면 프론트엔드 개발을 위한 오픈소스 프레임워크를 뜻하며, SvelteKit은 Svelte를 베이스로한 SSR 기반 프레임워크를 뜻합니다. - Svelte 공식 문서에서의 설치 가이드는 오직 SvelteKit(SSR) 프레임워크 프로젝트 구축에 대한 내용만을 제공하고 있습니다. Svelte에서는 공식적으로 SvelteKit(SSR)을 권장하는 듯 합니다. - 만일 SvelteKit 프로젝트에 SSR 관련된 코드들이 불필요하여 Svelte 프레임워크만을 사용하고 싶다면, Vite 빌드도구에서 프로젝트를 생성하는 방법이 있습니다. 하지만 Svelt..

Lifecycle Svelte Component의 Lifecycle(생명주기)은 BeforeUpdate, onMount, afterUpdate, onDestroy 순서로 동작됩니다. 각 생명주기가 동작되는 시점에, 해당 Hook Methods 내부에서 동작시킬 코드를 정의하여 사용합니다. 1. Lifecycle Hook 1) beforeUpdate - Component 생성 최초, Mount가 실행되기 전에 먼저 실행 - 이후 Component의 변경이 감지되면 beforeUpdate -> afterUpdate 순서로 실행 - 반응성이 있는 데이터를 beforeUpdate Hook 내부에서 사용하면 무한루프에 빠질 수 있기 때문에, 사용해야 한다면 동작 조건을 필히 입력 2) onMount - Compo..

Transition (화면전환 효과) 1. 기본 사용법 fade = true }> fade blur = true }> blur fly = true }> fly slide = true }> slide scale = true }> scale fade 예시 blur 예시 fly 예시 slide 예시 scale 예시 2. Transition Options /** transition option delay : 지정시간 이후 효과 실행 duration : 지정시간 동안 효과 실행 easing : 샘플링된 전환 효과 example > https://svelte.dev/examples/easing docs > https://svelte.dev/docs#run-time-svelte-easing **/ 사용할 transi..

Slot이란? - 공통 레이아웃을 가진 Component에 props 데이터 이외에 마크업을 전달해서 렌더링 시켜야할 때 Slot을 사용할 수 있다. - 형태 : 1) 사용법 // Card.svelte // main.svelte import Card from './Card.svelte'; ... // Card 컴포넌트 내부 Slot에 매핑될 Html 형태의 내용을 입력한다. 안녕하세요. 반갑습니다. 2) 이름이 있는 Slot // Card.svelte //name 속성으로 slot에 이름을 지정 // main.svelte import Card from './Card.svelte'; ... // slot 속성으로 매핑할 slot name을 입력 안녕하세요. 반갑습니다. 청첩장 3) $$slots - 슬롯 ..

Store Store란 Svelte에서 상태관리(state management) 기능을 제공하는 저장소 1) 기본사용법 - 수동 구독 및 수동 리소스 해지 The count is {count_value} - 자동 구독 : subscribe(), unsubscribe()의 일련의 기능을 자동화 하는 방법으로, $ 기호 사용 시 자동으로 처리됩니다. * 주의 사항 : store 변수 정의는 + 2) store의 사용자 정의 method로 구현 // store.js import { writable } from 'svelte/store'; // read, write, delete가 가능한 store 모듈 function createCount() { const { subscribe, set, update } = ..