Svelte33

• 

  [Svelte]await 블록 및 Promise 처리 Svelte에서 Promise 처리 이번 포스팅은 Svelte에서 제공하는 await 블록을 사용하여 Promise를 처리하는 방법을 소개합니다. JSON 구조의 데이터를 Response 하는 jsonplaceholder 사이트를 이용하여 스벨트 애플리케이션에서 API 요청할 것이며 다음 사진처럼 버튼을 클릭하면 Response 받은 JSON 데이터를 웹 페이지에 출력합니다. 순서 1. 버튼 생성 및 API 요청 먼저, HTML 영역에 버튼을 생성합니다. 그리고 버튼을 클릭하면 jsonplaceholder API에 데이터를 요청(request) 하기 위해 script 영역에 fetch() 함수를 사용합니다. script 영역에 toDoList라는 변수는 response 받은 데이터를 할당받는 배열입니다... Svelte 2022. 7. 17.

• 

  [Svelte]스벨트에서 반복문 사용하는 방법 지난 포스팅에서는 Svelte에서 반복문을 수행할 수 있는 {#each} 문에 대해 알아보았습니다. [Svelte]반복문 #each 반복 렌더링 배열처럼 순회할 수 있는 항목을 순회하여 각 요소를 HTML 요소에 렌더링 하는 것을 반복 렌더링이라고 말합니다. 예를 들어, 카테고리 항목들이 배열로 구성되어 있는 경우 배열을 developer-talk.tistory.com 이번 포스팅에서는 스벨트에서 반복문을 수행하는 몇 가지 팁을 소개합니다. 예제 1. 객체로 구성된 배열 가장 기본적인 방법부터 소개하겠습니다. 배열의 요소가 객체로 구성된 경우 점 표기법 또는 대괄호 표기법으로 객체의 프로퍼티를 접근할 수 있으며, 별칭 뒤에 쉼표를 추가하여 인덱스를 추출할 수 있습니다. {#each list as item.. Svelte 2022. 7. 16.

• 

  [Svelte]반복문 #each 반복 렌더링 배열처럼 순회할 수 있는 항목을 순회하여 각 요소를 HTML 요소에 렌더링 하는 것을 반복 렌더링이라고 말합니다. 예를 들어, 카테고리 항목들이 배열로 구성되어 있는 경우 배열을 순회하여 HTML 요소에 렌더링 할 수 있습니다. {#each category as list} {list.name} {/each} [실행 결과] Svelte에서 반복문은 {#each 배열 as 요소}로 시작하며 {/each}로 끝납니다. 이번 포스팅을 통해 Svelte에서 반복문을 사용하는 다양한 예제들을 알아보겠습니다. Svelte의 반복문 Svelte에서 반복문을 시작하려면 #{each}를 사용하고 반복문을 종료하려면 {/each}를 사용합니다. {#each}문은 JavaScript의 for..in 루프와 유사한.. Svelte 2022. 7. 16.

• 

  [Svelte]if 조건문 조건부 렌더링 React, Svelete, Angular 등 특정 조건에 따라 HTML 요소를 표시하거나 표시하지 않아야 하는 경우가 있습니다. 특정 조건에 따라 HTML 요소를 표시하는 것을 조건부 렌더링이라고 말하며 Svelte에서도 조건문 블록을 사용하여 조건부 렌더링을 구현할 수 있습니다. {#if num === 0} num은 0입니다. {:else if num < 0} num은 0보다 작습니다. {:else} num은 0보다 큽니다. {/if} if문 Svelte에서 조건문은 {#if 조건문}으로 시작하며 {/if}로 끝납니다. 다른 프로그래밍 언어와 유사하게 동작합니다. {#if 조건문} {/if} 다음 예제는 num이 0인 경우 "num은 0입니다."라는 문구가 HTML 영역에 렌더링 되고 .. Svelte 2022. 7. 16.

• 

  [Svelte]모듈 콘텍스트(module context) 모듈 콘텍스트(module context) 스벨트의 모듈 콘텍스트는 컴포넌트의 내부에 작성된 코드를 공유하는 방법입니다. 컴포넌트가 모듈 컴포넌트라는 것을 명시하기 위해서는 script 태그의 context 속성에 "module"이라는 값을 할당합니다. 만약 script 태그에 context 속성을 명시하지 않는 경우 해당 컴포넌트는 인스턴스 콘텍스트입니다. 다음 예제를 통해 모듈 콘텍스트에 대해 이해해봅시다. App.svelte 파일에는 script 영역이 두 개입니다. 첫 번째 script 영역에는 num이라는 변수가 존재하며 두 번째 script 영역에는 첫 번째 script 영역에 선언된 변수 num의 값을 증가시키는 add() 함수가 존재합니다. [App.svelte] num: {num} + [.. Svelte 2022. 7. 11.

• 

  [Svelte]리액티브 구문(Reactive statements) 리액티브 구문(Reactive statements) 리액티브 구문은 JavaScript 문법을 특별하게 다루는 스벨트의 기능이며, 리액티브 구문에서 참조하고 있는 변수 중 어떤 것이라도 그 값이 바뀌면 실행됩니다. 다음 예제는 + 버튼을 클릭하면 상태 num의 값이 1 증가하고, - 버튼을 클릭하면 1 감소합니다. 리액티브 구문을 사용하여 상태 num의 값이 변경될 때마다 num의 값을 콘솔에 출력합니다. {num} num++}>+ num--}>- [실행 결과] Chrome 개발자 도구의 콘솔 창에서 상태 num의 값이 변경될 때마다 콘솔에 출력되는 것을 확인할 수 있습니다. 스벨트의 $: 스벨트는 JavaScript의 레이블( : )을 사용하여 상태 종속성을 기반으로 상태가 변경되면 즉시 실행할 수 있.. Svelte 2022. 7. 8.

• 

  [Svelte]상태와 이벤트(state and event) 상태(state) 다음 예제처럼 script 태그 내부에서 상위에 선언되는 변수들 중 HTML 요소가 참조하는 변수들은 컴포넌트의 상태(state)라고 말합니다. 상태는(state)는 특정 이벤트가 동작함에 따라 값이 변경될 수 있으며, 화면에 표시되는 값이 달라질 수 있습니다. [App.svelte] {num} + - script 태그 내부 상위에 선언된 변수 num은 h1 태그에서 사용되므로 상태(state)입니다. + 버튼을 클릭하면 num의 값이 1 증가하고 - 버튼을 클릭하면 num의 값이 1 감소합니다. 상태를 html 영역에서 사용하기 위해서는 중괄호( { } ) 사이에 상태명을 작성하면 되고 상태의 값을 변경하기 위해서는 이벤트 핸들러 함수에서 상태의 값을 변경합니다. 이벤트(event) .. Svelte 2022. 7. 8.

• 

  [Svelte]svelte 컴포넌트 및 구성요소 이번 포스팅에서는 svelte 컴포넌트 및 구성요소에 대해 설명합니다. svelte 파일은 상태와 특정 이벤트가 발생한 경우 로직을 정의하기 위해 JavaScript 코드를 작성하는 script, 상태 또는 버튼을 화면에 표시하기 위한 HTML, HTML을 꾸며주는 CSS로 구성됩니다. svelte 컴포넌트의 구성요소 스벨트의 컴포넌트는 React와 달리 클래스나 함수 또는 객체 리터럴로 만들어지지 않으므로 React 개발자에게는 다소 생소할 수 있습니다. Angular, Vue, React와 같은 JavaScript 프레임워크를 사용하지 않고 고전적인 방법으로 웹 화면을 구현해봤던 경험이 있는 개발자에게는 Svelte가 친숙할 수 있겠네요. 아무튼 svelte 파일에는 위에서 언급했듯이 script, .. Svelte 2022. 7. 8.

• 

  [Svelte]VSCode에서 스벨트 시작하기 Visual Studio Code를 사용하여 스벨트를 시작하기 전에 아래 항목들이 설치되어있어야 합니다. - Visual Studio Code - NodeJS 1. 터미널 활성화 후 svelte 설치 VSCode에서 터미널 활성화 후 아래 명령어를 입력합니다. npx degit sveltejs/template svelte-start-app svelte-start-app는 Svelte 프로젝트 이름입니다. 설치가 완료되면, 다음 그림처럼 설치가 완료되었다는 문구가 출력됩니다. 바탕화면에 설치된 svelte-start-app 프로젝트를 불러옵니다. 2. 프로젝트 이동 설치된 프로젝트로 이동합니다. cd 프로젝트명 3. 라이브러리 설치 프로젝트에 필요한 라이브러리를 설치하기 위해 npm install 명령어를.. Svelte 2022. 7. 7.