본문 바로가기

분류 전체보기54

[Svelte] tick Svelte의 tick 함수는 다른 라이프 사이클 함수와는 달리 컴포넌트가 처음 초기화될 때만 호출되는 것이 아니라 언제든지 호출될 수 있습니다. tick 함수는 promise를 반환하며, 이 promise는 보류 중인 모든 상태 변경 사항이 DOM에 적용되는 즉시 (변경 사항이 없으면 즉시) 해결됩니다. Svelte에서 컴포넌트 상태를 업데이트하면 DOM은 즉시 업데이트되지 않습니다. 대신 다음 마이크로 태스크(microtask)까지 기다렸다가 다른 컴포넌트를 포함하여 적용해야 할 다른 변경 사항이 있는지 확인합니다. 이렇게 하면 불필요한 작업을 방지하고 브라우저가 더 효율적으로 작업을 일괄 처리할 수 있습니다. 다음 예시를 통해 이 동작을 확인할 수 있습니다. 텍스트 범위를 선택하고 탭 키를 누르십.. 2024. 4. 4.
[Svelte] beforeUpdate and afterUpdate 이번 시간에는 Svelte 컴포넌트의 라이프 사이클 함수인 beforeUpdate와 afterUpdate를 사용하는 방법에 대해 알아보겠습니다. beforeUpdate와 afterUpdate란? beforeUpdate : 컴포넌트의 DOM이 업데이트되기 직전에 실행되는 함수입니다. afterUpdate : 컴포넌트의 DOM이 데이터와 동기화된 후에 실행되는 함수입니다. 두 함수는 상태 기반의 방식으로는 구현하기 어려운 작업을 명령형으로 수행하는 데 유용합니다. 예를 들어, 요소의 스크롤 위치 업데이트와 같은 작업이 포함됩니다. 예시: 자동 스크롤 기능 추가하기 이 예시에서는 가상의 대화 상대인 Eliza 챗봇을 다루고 있습니다. Eliza와 대화할 때, 채팅 창을 계속 스크롤해야 해서 불편합니다. 이 문.. 2024. 4. 3.
[Svelte] onMount Svelte 컴포넌트는 생성되어 DOM에 추가될 때부터 시작하여 제거될 때 끝나는 라이프사이클을 가지고 있습니다. 이 라이프사이클 동안 특정 시점에 코드를 실행할 수 있는 몇 가지 함수들이 존재하며, 가장 많이 사용하는 함수 중 하나는 onMount입니다. onMount 함수는 컴포넌트가 처음으로 DOM에 렌더링 된 후 실행됩니다. 이번 예제에서는 canvas 요소를 애니메이션 처리하기 위해 gradient.js에 정의된 paint 함수를 사용합니다. 1. onMount 함수 import 먼저 svelte에서 onMount 함수를 import합니다. 2. 컴포넌트 마운트 시 콜백 함수 정의 다음으로 컴포넌트가 마운트 될 때 실행되는 콜백 함수를 정의합니다. 위 코드에서: onMount 함수는 컴포넌트가 .. 2024. 4. 1.
[Svelte] Textarea inputs Svelte에서는 요소를 사용하여 텍스트 영역을 만들 수 있습니다. 이 텍스트 영역은 사용자가 여러 줄의 텍스트를 입력할 수 있는 공간을 제공합니다. 데이터 바인딩과 양방향 동기화 Svelte는 bind:value 지시자를 통해 텍스트 영역의 내용과 변수를 양방향으로 바인딩할 수 있게 해줍니다. 위 코드에서 : : 텍스트 영역을 나타내는 HTML 요소입니다. bind:value={value} : value 변수와 텍스트 영역의 내용을 양방향으로 바인딩합니다. 즉, 사용자가 텍스트 영역에 텍스트를 입력하면 value 변수의 값이 업데이트되고, value 변수의 값이 변경되면 텍스트 영역의 내용이 업데이트됩니다. 약식 구문 사용 변수명과 바인딩 속성 이름이 같은 경우에는 약식 구문을 사용할 수도 있습니다. .. 2024. 3. 29.
[Svelte] Select multiple Svelte에서 기존 체크박스를 사용하여 여러 값을 선택할 수 있지만, 때로는 드롭다운 목록을 사용하여 사용자가 한 번에 여러 옵션을 선택하도록 하는 것이 더 효율적일 수 있습니다. 이를 위해 Svelte는 태그에 multiple 속성을 사용합니다. 다중 선택 드롭다운 만들기 {#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour} {flavour} {/each} multiple 속성 추가 : 먼저 Svelte 컴포넌트에서 엘리먼트를 찾아 multiple 속성을 추가합니다. 배열 변수 바인딩 : bind:value 디렉티브를 사용하여 선택된 값들을 저장할 배열 변수와 태그를 연결합니다. 예시 코드에서 flavours 변수.. 2024. 3. 27.
[Svelte] Group inputs Svelte에서는 여러 개의 입력 요소를 하나의 값으로 묶어서 다루는 경우가 종종 있습니다. 예를 들어 아이스크림 주문 시 스쿱 수를 라디오 버튼으로 선택하거나, 좋아하는 아이스크림 맛을 여러 개 선택할 수 있는 체크박스를 사용할 수 있습니다. 이러한 상황에서 Svelte는 bind:group 지시자를 제공하여 그룹 입력 처리를 간편하게 해 줍니다. bind:group 사용법 그룹을 위한 변수 정의 : 라디오 버튼이나 체크박스 그룹을 나타낼 변수를 정의합니다. 이 변수는 그룹 내 선택된 값(들)을 저장합니다. bind:group 사용 : 각 입력 요소에 bind:group 지시자를 사용합니다. 이 지시자는 입력 요소와 그룹 변수를 연결합니다. value 속성은 각 입력 요소의 고유한 값을 나타냅니다. 라.. 2024. 3. 26.
반응형

티스토리툴바