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 이다. 위 예제코드에서는 배열의 각 요소 값들..

특정 버튼을 클릭하여서, Input Element 을 나타나거나 사라지게 하고 나타났을 때, 포커스가 가게하는 코드를 작성해보자. Show Input !! {#if isShow} {/if} 일반적으로 svelte 에서 위와 같이 작성이 가능하다. 버튼을 누르면 toggleShow 함수가 실행이 되고, 해당 함수에 반응성을 가질 수 있는 데이터를 갱신하고, 갱신한 화면이 적용 될때까지 기다리게 tick 함수를 사용해주고 input을 찾는 쿼리를 실행해주고, 찾은 input 을 포커싱해준다, 는게 코드의 내용이다. 다만 여기서, input을 찾는 쿼리를 실행해주고, 찾은 input 을 에서 DOM 전체를 돌며 엘리먼트를 찾는게 생각보다 불필요한 작업이라면 ? 이를 없앨 수 있다면 좋지 않을 까 ? 그를 해결..

Svelte 에서 스타일 유효범위/Hash/전역에 대해서 알아보려고 한다. 먼저 아래와 같은 두개의 코드를 가진 파일이 있다. App Shin Den People Component Shin Den 이 것의 결과는 오른쪽과 같다. Svelte 에서 Style Code 는 해당 컴포넌트 (파일) 내에서만 유효하다. 또한, 개발자 도구를 열어서 요소를 보면 조금더 특이 한 것을 알 수 있다. 위 사진에서 보는 것과 같이 스타일이 적용된 ul 태그에 people 클래스 외에 svelte-1367bgx 라고, 이상하게 적힌 클래스가 있는데 이것이 Style Hash 이다. 이것으로 유효범위를 만들어낸다. 그렇다면 전역으로 영향을 끼치게 하려면 어떻게 해야할까? 이렇게 선택자를 :global 로 감싸주면 된다 ! ..

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..