Svelte33

• 

  [Svelte]스벨트 생명주기 정리 스벨트 생명주기 Svelte에 각 컴포넌트는 생명주기(LifeCycle)를 거칩니다. 사람이 태어나고 살다가 죽는 과정을 거치는 것처럼 컴포넌트는 DOM에 탑재되고 컴포넌트의 값이 변경되고 더 이상 필요하지 않을 때, DOM에서 제거되는 과정을 거칩니다. Svelte는 다음과 같이 총 4개의 생명주기 함수를 제공합니다. - 컴포넌트에서 변경된 값이 DOM에 반영되기 전에 실행되는 beforeUpdate() 함수 - 컴포넌트가 DOM에 추가될 때, 실행되는 onMount() 함수 - 컴포넌트에서 변경된 값이 DOM에 반영된 후 실행되는 afterUpdate() 함수 - 컴포넌트가 DOM에서 제거될 때, 실행되는 onDestroy() 함수 그리고 생명주기 함수는 아니지만, 특수한 목적으로 사용되는 함수도 존.. Svelte 2022. 8. 9.

• 

  [Svelte]생명주기(Lifecycle) - afterUpdate 함수 afterUpdate 함수 Svelte의 생명주기 함수인 afterUpdate() 함수는 컴포넌트의 변경된 값이 DOM에 적용 후 호출됩니다. 즉, 변경된 값이 DOM에 영향이 있으면 호출되고 영향이 없으면 호출되지 않습니다. 다음 예제는 간단한 소스 코드입니다. num++ 버튼을 클릭하면 변수 numValue의 값을 1씩 증가시킵니다. num++ App: {numValue} [실행 결과] 컴포넌트가 DOM에 추가된 후 afterUpdate() 함수가 최초 한 번 실행됩니다. num++ 버튼 클릭 후 변수 numValue의 값이 1씩 증가할 때마다 변경된 numValue의 값을 웹 브라우저에서 확인할 수 있으며, 콘솔 창에서 afterUpdate() 함수에 작성된 문구가 출력됩니다. 값을 화면에 표시하지.. Svelte 2022. 8. 9.

• 

  [Svelte]생명주기(Lifecycle) - beforeUpdate 함수 beforeUpdate 함수 Svelte의 생명주기 함수인 beforeUpdate() 함수는 컴포넌트의 변경된 값이 DOM에 적용되기 전에 호출됩니다. 즉, 변경된 값이 DOM에 영향이 있으면 호출되고 영향이 없으면 호출되지 않습니다. 다음 예제는 간단한 소스 코드입니다. num++ 버튼을 클릭하면 변수 numValue의 값을 1씩 증가시킵니다. num++ App: {numValue} [실행 결과] 컴포넌트가 DOM에 추가되기 전에 beforeUpdate() 함수가 최초 한 번 실행됩니다. num++ 버튼 클릭 후 변수 numValue의 값이 1씩 증가할 때마다 beforeUpdate() 함수가 호출됩니다. 값을 화면에 표시하지 않을 경우 만약, 다음 소스 코드처럼 변수 numValue의 값을 HTML .. Svelte 2022. 8. 9.

• 

  [Svelte]생명주기(Lifecycle) - onDestroy 함수 onDestroy 함수 Svelte의 생명주기 함수인 onDestroy() 함수는 컴포넌트가 DOM에서 제거될 때 호출됩니다. 컴포넌트가 DOM에서 제거될 때 실행되어야 하는 소스 코드 또는 함수를 인자로 전달합니다. 다음 예제는 "Child 컴포넌트 활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 활성화되고 "Child 컴포넌트 비활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 비활성화됩니다. Child 컴포넌트가 DOM에서 제거될 때, 생명주기 함수인 onDestroy() 함수가 호출되면서 콘솔에 문구를 출력합니다. [부모 컴포넌트 - App.svelte] handleClick(true)}> Child 컴포넌트 활성화 handleClick(false)}> Child 컴포넌트 비활성화 {.. Svelte 2022. 8. 8.

• 

  [Svelte]생명주기(Lifecycle) - onMount 함수 onMount 함수 Svelte의 생명주기 함수인 onMount()는 컴포넌트가 DOM에 추가될 때 호출됩니다. 컴포넌트가 DOM에 추가될 때, 최초 한 번만 실행해야 하는 작업을 작성할 수 있습니다. onMount() 함수는 주로 아래 작업을 처리하기 위해 사용됩니다. - API 요청하여 데이터 가져오기 - 데이터 처리하기 - DOM 요소 접근하기(포커싱 처리 등...) 다음 예제들을 통해 onMount() 함수 사용 방법을 알아봅시다. 예제 1. API 요청 다음 예제는 jsonplaceholder API에서 제공하는 데이터를 가져와서 화면에 표현합니다. {#each toDoList as toDo} {toDo.id}. {toDo.title} {/each} onMount() 함수에서 async 키워드를.. Svelte 2022. 8. 8.

• 

  [Svelte]7가지 이벤트 수정자 이벤트 수정자 Svelte에서 이벤트 리스너는 다음 방식으로 추가할 수 있습니다. 함수 선언문 함수 표현식 화살표 함수 { console.log('익명 함수'); console.log(event); }}> 익명 함수 DOM API 내부적으로 addEventListener() 함수가 호출됩니다. addEventListener() 함수에는 세 가지 매개변수가 존재합니다. - 첫 번째 매개변수는 이벤트 타겟(해당 이벤트가 동작하는 타겟) - 두 번째 매개변수는 리스너(해당 이벤트가 동작하면 호출되어야 하는 함수) - 세 번째 매개변수는 option(이벤트 수정자)으로 생략 가능 Svelte에서 addEventListener() 함수에 이벤트 수정자를 전달하기 위해서는 on 지시자를 사용합니다. preventD.. Svelte 2022. 8. 8.

• 

  [Svelte]DOM 적용 후 실행되는 tick 함수 tick 함수 svelte에서 제공하는 tick() 함수는 props 또는 state가 DOM에 적용되자마자 Promise 객체를 반환합니다. 쉽게 설명하자면, script 영역에 선언된 변수의 값이 변경된 후 컴포넌트 또는 DOM 요소가 DOM에 바로 적용되지 않습니다. 추가적으로 처리해야 하는 작업이 필요한지 체크 및 적용 후 DOM에 적용합니다. 따라서, 추가적으로 처리해야 하는 작업이 필요한지 체크하는 과정에서 DOM 요소를 접근하는 경우 여러 문제가 발생합니다. 예를 들어, 다음과 같이 "input 태그 활성화" 버튼을 클릭하면 조건문에 의해 input 태그가 활성화됩니다. input 태그 활성화됨과 동시에 input 태그와 바인딩된 변수를 사용하여 포커싱 처리하려고 했으나 TypeError가 .. Svelte 2022. 8. 8.

• 

  [Svelte]input 태그 포커싱 처리 input 태그 포커싱 Svelte에서 특정 컴포넌트 렌더링 후 또는 특정 조건에 의해 input 태그를 포커싱 처리하는 작업이 필요할 수 있습니다. 예를 들어, "input 태그 활성화" 버튼을 클릭하면 input 태그 활성화됨과 동시에 포커싱 처리되어야 합니다. isInputElementView = true}> input 태그 활성화 isInputElementView = false}> input 태그 비활성화 {#if isInputElementView} {/if} [실행 결과] "input 태그 활성화" 버튼을 클릭하면 input 태그가 활성화되지만, 포커싱 처리되지 않습니다. 방법 1. bind:this Svelte에서 제공하는 bind 지시자에 this를 적용하면, DOM 요소를 참조할 수 있습니.. Svelte 2022. 8. 5.

• 

  [Svelte]Action과 use 지시자 Action과 use 지시자 Svlete에서 DOM 요소가 DOM에 추가될 때 실행되는 함수를 액션(Action)이라고 합니다. 주로 DOM 요소의 속성을 변경하는 경우 사용됩니다. 예를 들어, 특정 DOM 요소를 포커싱 처리하거나 style을 적용하는 작업에서 액션을 사용할 수 있습니다. DOM 요소에 액션을 적용하기 위해서는 use 지시자를 사용합니다. use 지시자에는 DOM에 추가될 때 실행되는 함수를 지정하고 함수의 인자로 DOM 노드가 전달됩니다. 예제 1. input 태그 포커싱 및 placeholder 다음 예제는 "input 태그 활성화" 버튼을 클릭하면, input 태그가 DOM에 그려지면서 포커싱 및 placeholder가 설정되어야 합니다. "input 태그 비활성화" 버튼을 클릭하.. Svelte 2022. 8. 5.

• 

  [Svelte]문자열을 HTML로 표현 문자열을 html로 표현 Svelte 컴포넌트에서 문자열 형태의 html을 HTML 영역에 표시하면, 문자열이 출력됩니다. {markup} [실행 결과] Svelte에서 문자열 형태의 html을 html로 표현하고 싶다면, 컴포넌트의 HTML 영역에서 @html 문법을 사용합니다. {@html markup} [실행 결과] 다음 소스 코드는 textarea에서 입력받은 문자열을 html로 표현합니다. {@html strValue} [실행 결과] 크로스 사이트 스크립트 공격자가 웹 애플리케이션의 취약점을 이용하여 악성 html, javascript 코드를 삽입하여 비정상적인 기능을 수행하도록 하는 공격 기법입니다. textarea에 악성 html 코드를 삽입하여 웹 애플리케이션이 비정상적으로 동작할 수 있는.. Svelte 2022. 8. 5.

• 

  [Svlete]스토어 데이터 세션 스토리지(sessionStorage)에 저장 스토어 데이터 세션 스토리지에 저장 Svelte의 스토어는 서로 관계없는 컴포넌트 간에 데이터를 공유할 수 있다는 장점이 존재하지만, 웹 페이지를 새로고침 하면 스토어의 모든 데이터가 소실됩니다. 다음은 스토어 numValue의 데이터를 변경하는 과정을 보여줍니다. 새로고침 버튼을 클릭하면 스토어 numValue의 데이터가 유지되지 않고 초깃값 1로 설정됩니다. 따라서, 웹 페이지를 새로고침 했을 때마다 스토어의 데이터를 유지할 필요가 있습니다. 스토어의 데이터를 유지하기 위해 JavaScript에서 제공하는 세션 스토리지(sessionStorage)를 사용합니다. 세션 스토리지 세션 스토리지는 현재 브라우저에 데이터를 저장할 수 있는 웹 스토리지입니다. 새로고침 후에도 세션 스토리지에 등록된 데이터가 .. Svelte 2022. 8. 5.

• 

  [Svelte]사용자 정의 스토어 구현 방법 사용자 정의 스토어 쓰기 가능 스토어, 읽기 전용 스토어, 상속 스토어 외에도 사용자가 스토어를 정의할 수 있습니다. 사용자 정의 스토어는 컴포넌트에서 스토어의 값을 변경하는 set() 함수와 update() 함수를 직접 호출하지 않고 사용자 정의 스토어에서 호출합니다. 스토어의 값을 변경하는 복잡한 계산식이 존재하는 경우 또는 데이터 검증 후 스토어의 값을 변경해야 하는 경우 컴포넌트가 아닌 사용자 정의 스토어에서 코드를 구현할 수 있습니다. 사용자 정의 스토어 구현 방법을 설명하기 전에 사용자 정의 스토어를 사용하지 않은 소스 코드를 살펴봅시다. ExampleStore.js 파일에는 쓰기 가능한 numValue 스토어가 존재합니다. [스토어 - ExampleStore.js] import {writab.. Svelte 2022. 8. 5.