본문 바로가기
반응형

Svelte15

npm update/upgrade 방법 npm 버전이 낮아서 업데이트를 하는데 추후 사용을 위해 기록해 둔다. 먼저 현재 npm 버전을 확인하도록 하자. npm -v -g 옵션을 이용하여 npm 을 최신 버전으로 올릴 수 있다. npm install -g npm 2022. 5. 9.
Svelte - 고유키를 통한 데이터 변경 확인 Svelte는 데이터가 추가되거나 삭제되었을 때에만 새롭게 화면을 렌더링 되는데, 현재 화면의 데이터가 변경되었다는 것을 인식시켜, 새롭게 랜더링하는 작업을 고유키를 통해서 설정이 가능하다. 여기에 고유키라는 값을 설정하여 해당 값이 변경된것을 확인할 수 있다. 아래와 같이 items를 구성할 경우 고유키를 설정하지 않을 경우 데이터 변경 유무를 확인 할 수 없는 필드가 발생할 수 있다. {#each items as {id, title, content}, i} title, content {/each} 고유키는 () 소괄호를 이용해서 고유키를 설정할 수 있는데, 바로 {#each items as {id, title, content}, i 부분에 ()를 이용해서 고유키를 설정할 값을 지정하자. 예제에서는 데.. 2022. 4. 26.
Svelte - TypeScript 사용하기 TypeScript는 클래스 기반 객체 지향 프로그래밍 지원과 같은 JavaScript의 새로운 기능을 지원한다. Svelte에서도 TypeScript를 기본적으로 사용이 가능하다. 아래와 같이 TypeScript를 script 구문에 지정해서 사용하면 된다. Svelte의 기본 Template인 github의 sveltejs/template를 이용하면, Javascript를 사용하는 기준으로 템플릿이 작성되어 있는데, TypeScript로 변환할 수 있는 방안이 템플릿안에 제공되는데 scripts 폴더 안에 setupTypeScript.js이다. 아래와 같이 명령을 실행하면, 템플릿 구조가 TypeScript를 사용하는 것으로 변경된다. node scripts/setupTypeScript.js App... 2022. 4. 13.
SVELTESTRAP - Bootstrap 5, Svelte에서 사용하기 CSS를 많이 직접 작성해서 만드는 방법도 있지만, CSS Framework로써, 사전에 구성된 디자인 스타일을 이용하면 보다 손쉽게 화면을 구성할 수 있어서 기존에 필자 역시 웹 개발에 자주 사용하였다. 이번 Svelte를 진행하면서 기존 방식으로 활용할 수 있지만, Svelte에 최적화 된 BootStrap 버전인 SvelteStrap 에 대해서 얘기해 보고자한다. SvelteStrap은 Bootstrap 와 완벽하게 호환하여 Svelte에서 손쉽게 Bootstrap을 사용할 수 있도록 도와준다. 이를 사용하기 위해서 설치하는 방법은 npm을 이용해서 손쉽게 설치할 수 있다. 설치 npm install sveltestrap 이제 css 사용을 위해 main.js에 css를 import 시키도록 하자... 2022. 4. 2.
Svelte URL 파라미터 사용 특정 검색 내용을 페이지로 넘겨서 지속적으로 제공하고자 하는 경우 URL 파라미터를 이용하게 되는데, Svelte역시 이를 활용할 수 있다. svelte-spa-router를 사용하여 어떻게 URL 파라미터를 사용할 수 있는지 알아보자. GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3 Svelte에서 SPA를 구성하는 방법은 아래 링크에서 확인하기 바란다. Svelte - SPA routes 설정 (asecurity.dev) SPA 구성을 완료하고 이제 URL 파라미터를 사용하고자 한다면, 사용하고자 하는 페이지에 svelte-spa-router에서 제공하는 querystring 을 이용하여 구성할 수 있다. The curr.. 2022. 3. 31.
Google Font 사용/적용하기 Google에서는 웹 개발에 사용할 수 있는 다양한 폰트를 무료로 제공하고 있다. 오늘은 해당 폰트를 사용하는 방법에 대해서 간단히 정리해보도록 하겠다. 구글 폰트를 사용하기 위해서는 먼저 구글 폰트 사이트로 접속을 한다. Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 접근을 하게 되면 현재 Google에서 이용할 수 있는 폰트를 확인할 수 있으며, 보통은 자주 사용하는 폰트에 대해서 검색을 통해서 확인 할 수 있지만, Sort 기능을 이용해서 최신 Trend에 맞는 폰트라거나, 최신(Newest)등을 선택해서 정렬과 Ca.. 2022. 3. 31.
반응형