개발, 심리, 투자 그리고 일상의 생각 나눔
Svelte의 특징이라고 할 수 있는 bind를 활용해서 값이나 객체를 바인딩을 할 수 있습니다. 어떤 경우에 bind를 사용할 수 있는지 Svelte bind 사용 방법을 알아보겠습니다. Svelte bind 사용법 개요 스벨트 튜토리얼의 내용을 바탕으로 Svelte의 bind 사용법을 설명해 드리겠습니다. 이 문서에서는 input form 엘리먼트에 바인딩을 적용하는 방법을 알아보도록 합니다. Input Element Text Type(bind:value) 다음과 같이 해 주면, … Read more
SvelteKit으로 개발하면서 현재 경로에 따라 스타일링을 해야 하는 경우가 있습니다. 그러려면 현재 경로를 알 수 있어야겠죠. 그럼 sveltekit에서 현재 url 경로 구하는 방법을 확인해 보겠습니다. 오랫동안 SvelteKit이 1.0 출시를 못하고 있었는데, 2022년 12월 14일부로 1.0 출시를 했습니다. 1.0 출시 이전에는 처리하는 방법이 바뀌기도 했었는데, 이제 1.0 출시를 했으니, 어느정도 안정이 됐다고 볼 수 있겠네요. page … Read more
SvelteKit이 지난 12월 14일 1.0 출시를 했습니다. 기존에는 아무래도 1.0 출시 이전이라 페이지 라우팅 방식에 변경이 있었습니다. 이제는 1.0 출시를 했으니 안정이 좀 됐다고 봐도 괜찮을 것 같습니다. 그럼 SvelteKit 라우팅 +page, +layout 사용 방법을 알아보겠습니다. SvelteKit 라우팅 방식의 변경 기본 라우팅 페이지를 index.svelte로 사용했던 적이 있었습니다. 하지만, 현재는 +page.svelte를 인덱스 페이지로 사용하고 있습니다. __layout.svelte도 … Read more
이번에 처음 접하게 된 SvelteKit을 활용하여 전기요금 계산기를 만들었습니다. Svelte는 지금까지 개발해 왔던 React, Vue, Angular를 돌아보지 않게 만들 정도의 작품이라는 생각이 듭니다. Svelte에 대한 감탄은 그만하고, 전기요금 계산기에 대해 간단히 설명드릴게요. 누진요금 계산원리 어떤 원리로 누진요금이 계산되는지, 그리고 각 단계별로 계산되는 누진 요금도 확인할 수 있습니다. 기후환경요금과 연료비 조정액에 대한 계산까지 모두 살펴보실 수 … Read more
Svelte 컴포넌트에 HTML TAG를 그대로 전달해 주고 싶은 경우 있으시죠? 그럴 때엔 slot tag를 이용해 주시면 됩니다. slot tag를 사용하여 tag 전달하는 방법 컴포넌트 안에 들어갈 내용을 props를 통해서 전달하지 않고 그대로 tag를 모두 전달하고 싶다면, slot을 사용하면 됩니다. 예를 들어, 버튼을 하나 만든다고 가정해 보겠습니다. main.svelte에서 Button 컴포넌트를 이용하는 경우를 두 가지 살펴보겠습니다. props … Read more
저도 Svelte를 처음으로 접해 보았습니다. 대체 얼마나 대단하길래 다들 난리인건지 말입니다. Svelte 프로젝트 생성 방법 소개합니다. Svelte란? Svelte는 React나 Vue 같은 js 개발 프레임워크입니다. 사실 프레임워크라 하는 게 맞을지 모르겠지만, 무엇보다도 Svelte의 가장 큰 특징은 가상 DOM을 사용하지 않고 VanillaJS로 컴파일해 낸다는 것입니다. 그래서 배포를 위한 빌드를 했을 때 js 용량이 상당히 줄어듭니다. 웹 페이지 … Read more