Den`s blog

오늘은 Custom Button 을 만들어보고자 한다. UI를 만들다 보면, 컴포넌트를 만들텐데 만들고자 하는 서비스에 따라서 Custom Component 를 만들고자 하는 니즈가 생길 것이다. 오늘은 Custom Button 을 만들기 위한 핵심 기능 두가지를 알아보고자 한다. 1. $$restprops Element 들이 가지는 기본 속성들이 있고, 더 나아가 UI Library 를 사용하다 보면 그 곳에서 활용할 수 있는 props/속성 들이 있을 것이다. 예를 들어, attraction Library 를 보면, Button 에서 filled, outline 등 여러가지 속성을 활용할 수 있는 데, Library 그대로 사용하는 것이 아닌 Custom 을 하고자 한다면 어떻게 해야 할까. 아래 코..

오늘은 Svelte 를 typescript 그리고 svelte materialUI 설치까지 진행해보고자 한다. 1. Svelte 설치 하기 명령어를 통해 svelte project 를 설치하면 끝 ! npx degit sveltejs/template your-project cd your-project 그런 다음 package 설치해주고, 실행해 보자. npm i npm run dev 하고 나면 (보통 8080 포트) localhost:8080 에서 아래 화면을 볼 수 있다. 이렇게 설치~실행까지 완료해 보았다. 2. Typescript 설치 나는 typescript 를 좋아하기 때문에 svelte 에 ts 를 적용하고자 한다. 이미 프로젝트에서 준비가 다 되어 있는 상태이기 때문에 아래 명령어를 입력해주..

Svelte 에서는 React, Vue 와 달리 인라인 핸들러를 권장/지향하고 있다. React, Vue 에서 인라인 핸들러를 지양하는 이유는 렌더링이 될 때마다 인라인 함수도 재정의가 되어 메모리를 잡아먹기 때문이라고 하고 있다. 그러나 Svelte 는 Virtual DOM 을 사용하지 않을 뿐더러, 컴파일러 자체이기 때문에 그에 따른 메모리 불이익이 없다고 한다. 또 다른 이유로는 인라인 사용시에 할당 연산자 (=) 를 사용하지 않아도 데이터 갱신이 이루어진다. (코드가 짧아진다 !) let people = [ { name: 'Den', age: 31 }, ]; function add(person) { person.age += 1; people = people; // $$invalidate(0, pe..

배열의 항목을 보여주고, 삭제하는 코드에 대해서 보도록 하자. Delete First Fruit ! {#each fruits as fruit} {fruit} {/each} 위와 같이 작성이 된다. 이 부분에 대해서 자세히 알아보고자 하는데, 여기서 단점이 있다. 배열의 내용이 바뀌고 할당연산자를 통해서 화면이 갱신되게 되는데 아래 동영상을 보면, 하나를 삭제할때마다 li 태그 반복내용이 전체가 바뀌게 된다. 어찌보면 당연하지만, 비효율적이다. 삭제되지 않은 것들은 새로 렌더링할 필요가 없으니 ..! 그럼 굳이 새로 렌더링 하지 않으려면 어떻게 해야 할까 ? key 를 활용하면 된다 ! Key Key 는 고유하면 되고, 추천되는 것은 String과 Number 이다. 위 예제코드에서는 배열의 각 요소 값들..

LifeCycle 얘기할 때 tick 이 거론되기도 하는데, 나는 이걸 lifeCycle 에 넣어야 하나~ 애매하긴 하다. tick 에 대해서 알아보자. 1. Svelte 에서의 반응성 Svelte 에서 반응성을 갱신하기 위해서는 할당연산자 (=) 를 사용해야 한다. 즉 변수에 값이 새로 대입되면 화면이 갱신된다는 것이다. 아래와 같은 코드가 있다고 보자 Are you {name} 화면에는 처음에 Are you man 이 표기가 돼있을텐데, 이곳을 클릭하면 Are you man ? 으로 바뀌게 된다. h1 부분을 클릭하면 handler 가 작동되고 그 안에서 name 에 새로운 스트링을 할당 하게 되면서 반응성을 가지게 되고 화면이 갱신되게 된다. 그러면 로그를 찍는 부분 (console.log) 에서 ..

Svelte LifeCycle 은 아래와 같다. 이 중, onMount 와 onDestroy 에 대해서 알아보고자 한다. onMount 는 간단하게 설명하면 Component 가 연결될 때 (화면에 보일때) 라고 생각하면 되고, onDestroy 는 연결이 해제될때, 정확하게는 해제(분리)되기 직전이라고 생각하면 된다. 백문이 불여일견, 코드로 보도록 하자! {toggle = !toggle}}>toggle {#if toggle} {/if} Something 위 와 같이 App 파일에서 toggle Boolean 값에 따라 Something 컴포넌트를 사용하는 간단한 프로그램이 있다. Toggle 버튼을 누를 때마다 Something 글자가 나타났다, 사라졌다를 반복할텐데 이 간단한 프로그램으로 onMou..

Svelte 에서 event 다루는 방법을 간단하게 알아보고 modifier 에 대해서도 알아보도록 한다. Click me 위의 코드는 버튼 클릭 시 마다 alert 창이 뜨게 된다. 그런데, 이를 한 번만 하고 싶은 경우가 있을 텐데, 보통은 변수로 따로 길게 처리를 진행해주어야 하는데 svelte 에서는 간단하게 처리가 가능하다. Click me once 를 추가하면서 딱 한번만 실행이 가능해진다, 참 여러군데 처리가 가능해보인다. 다른 modifier 에 대해서도 알아보자 preventDefault 핸들러 처리 전에 event.preventDefault() 를 실행해준다 stopPropagation event.stopPropagation()을 호출하여 이벤트가 다음 요소에 도달하지 못하게 합니다. ..

Svelte Tutorial 을 하나 씩 진행 중에 있는데, Keyed each blocks 라는 부분이 있고 해당 튜토리얼에 대해 포스팅을 하고자 한다. Svelte 에서 each 는 {#each 로 시작한다. Remove first thing {#each things as thing} {/each} initial current 이렇게 된 경우 첫 화면은 아래와 같이 구성이 된다. 여기서 버튼을 클릭하면 맨 첫번째 칸이 모두 지워질 것이라 예상했다, 그러나 결과는 달랐다. 결과는 왼쪽과 같이 initial 은 노랑색이 사라졌고 current 는 dark blue 가 사라졌다. current 만이 우리가 원하는 방식으로 동작한 것이다. 그렇다면 initial 은 왜 이렇게 동작이 되었을까? 바로 comp..

Clicked {count} {count === 1 ? 'time' : 'times'} 버튼을 클릭 시 마다 count 가 증가하고 그게 버튼에 반영돼 변하는 코드이다. 해당 개념은 React 던 Svelte 건 조금이라도 해보면 익숙할 것이다. 여기에서 더 나아가 count 가 변화할때마다 다른 변수가 변화하게 할 수 있다 Clicked {count} {count === 1 ? 'time' : 'times'} {count} doubled is {doubled} $: 를 활용하면 (신기하게도 JS에 유효한 문법이라고 한다) count 가 변경될때마다 double 도 변경되고 이에 따라 맨 아랫줄 p 도 변경이 된다. 더 나아가 뭉쳐있기도 가능하고 조건도 달 수 있다. Clicked {count} {cou..

React 에서도 Component 를 사용하고, 당연히 Svelte 에서도 Component 를 사용한다. 프론트엔드 프레임워크에서 가장 기본적으로 볼 수 있기 때문에 포스팅을 먼저 진행해본다. 내가 React를 Deep 하게 해보진 않아서 모르는 걸 수도 있는데, component 를 만들고 가져다 쓴다고 하더라도 스타일이 적용되지는 않더라, 또한 html 코드 자체를 rendering 해야 하는 경우도 있는데 이때는 @html이 필요하다. This is a paragraph {@html string} This is another paragraph. 이렇게 되면 내 생각에는 p 로 들어가기 때문에 스타일이 같이 적용될거라 생각했는데, Nested.svelte 에서 넘어온것은 먹히지 않더라 또한 내포되..