Code Playground

< h1 > Code Playground </ h1 >

Form 다루기 이제 svelte에서 input 요소들을 어떻게 다루는 지 살펴보도록 하자. - Input Text - AddPersonForm.svelte Add a new person Add Person 먼저 form 태그에 3가지 input 태그를 만들고 각 input에 변수를 binding했다. 그리고 handleSubmit 함수를 form 태그에 submit 이벤트로 등록해주었다. 이 때 지난 번에 소개한 preventDefault라는 Event modifier를 이용하여 form 태그의 기본 동작을 막아주었다. 이제 form 태그 안에 있는 button을 클릭하면 submit 이벤트가 발생하여 handleSubmit 함수가 실행될 것이다. (bind:value는 아래 글에서 자세히 설명했으므로..

이제 Svelte로 Modal을 만들어보려고 한다. Modal 컴포넌트를 만들어서 해당 컴포넌트를 특정 condition에 의해 보여줬다 안보여줬다 toggle할 수 있도록 만들어야 할 것이다. 일단 App.svelte와 동일한 폴더에 Modal.svelte를 만들어보자. Conditional Styles {#if showModal} Sign up for offers! {/if} 위 Modal 컴포넌트는 showModal 변수가 true일 때만 보여진다. 그리고 class:promo={ isPromo }는 바로 conditional styles이다. 즉, 조건에 따라 class name을 줬다 안줬다 할 수 있는 기능이다. class:promo={ isPromo } 라고 하면 isPromo 변수가 tru..

Loops {#each people as person (person.id)} {person.name} {person.age} years old, {person.hairColor} hair {:else} There are no people to show... {/each} svelte에서 loop을 돌며 dom 을 그릴 때는 each block을 사용한다. 중간에 else block을 이용해서 만약에 배열에 데이터가 하나도 없을 경우 보여 줄 dom을 결정할 수도 있다. {#each people as person, index (person.id)} {index + 1} : {person.name} {/each} 이렇게 index를 가져올 수도 있다. {#each people as { name }, inde..

Input & Data binding Hello {name}! {color} jean! update jean color 이렇게 color 변수를 선언한 후에 아래 {color} jean!을 출력하면 화면에 black jean!이라는 단어가 출력된다. ({}는 동적인 값을 넣을 때 사용한다.) color 변수의 값을 버튼을 클릭했을 때 동적으로 바꿔주고 싶다면 클릭 이벤트를 등록하면 된다. Svelte에서 inline 이벤트를 등록하는 방법은 아주 쉬운데, 먼저 script에서 함수를 선언해준 다음, 아래 태그에 on:click으로 등록하면 된다. Svelte에서는 click, mousemove 등 모든 이벤트를 소문자로 등록한다. 이렇게 하면 버튼을 클릭하면 화면에 black jean!이 blue jea..

https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO 나는 주로 유투브 영상을 보면서 공부하는 것을 좋아하는데, 스벨트 관련 정말 괜찮은 시리즈가 있어서 위에 첨부했다. 총 35강인데 한 강의 당 10분이 넘지 않는 짧은 길이라서 틈틈히 짬내서 보면 좋을 듯 하다. 아무튼 이 강의를 쭉 훑으면서 중요한 내용들을 블로그에 정리해보려고 한다. Template Installation 일단 Svelte는 마치 React의 Create-react-app 처럼 기본적인 세팅이 되어 있는 템플릿을 제공하고 있다. 그래서 나와 같은 Svelte Beginner들이 쉽게 설치하고 프로젝트를 시작할 수 있다. degit이라는 ..

요즘 관심가는 기술 중 하나인 스벨트(Svelte)에 대해서 차근 차근 공부해보려고 한다. Svelte(스벨트)란? 스벨트가 뭔지 궁금해서 Svelte 홈페이지에 들어가서 소개문을 읽어보았다. Svelte is a tool for building fast web applications. Svelte는 빠른 웹 어플리케이션을 구축하기 위한 도구이다. It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces. Svelte는 interactive한 유저 인터페이스를 구축한다는 데 있어 React나 Vue와 같은 Ja..

지난 주부터 회사에서 해결이 안되서 골머리를 앓았던 문제에 대해서 얘기해보려고 한다. 보통의 UI에서 대부분 모달(팝업이라고도 부른다)이 뜨면 모달 뒤에 body 영역을 반투명한 검정색 레이어로 덮어서 모달의 컨텐츠가 더 도드라지게 만든다. 이 반투명한 검정색 영역을 주로 Dim 영역이라고 부른다. 보통 팝업창 내에 컨텐츠가 길어서 스크롤이 있는 경우에는 팝업 내부에만 스크롤이 잘 되게 하기 위해서 Dim 영역 뒤에 있는 body의 scroll은 막는 경우가 많다. 그리고 웹에서는 scroll 막는 것도 쉽게 처리할 수 있다. 바로 팝업이 떴을 때 body 태그에 overflow: hidden을 걸어줘서 scroll을 못하게끔 막아버리는 방법이다. 1. body 태그, overflow: hidden; 코..

이번 주에 회사에서 개발하다가 씨름했던 "비율에 따라 줄어드는 이미지 구현기"를 정리해보려고 한다. 음, 그러니까 주어졌던 요구사항은 이러했다. 우리는 리액트로 개발을 하고 있다. 이미지는 SVG로 주어지며 되도록이면 .svg 파일이 아닌 SVG를 리턴하는 React 컴포넌트로 처리되었으면 한다. 예를 들어서 이미지의 사이즈가 300 * 200이고 이미지를 감싸는 컨테이너 사이즈가 400 * 200이라고 해보자. 이 경우에 이미지의 높이가 200보다 작아진다면 이미지 사이즈는 400 * 200의 비율대로 줄어들어야 한다. 반대로 이미지의 높이가 200보다 커진다면 이미지는 커지면 안되고 양쪽 여백만 늘어나야 한다. 특정 비율대로 줄어들고 늘어나는 이미지를 구현하는 일은 약간의 CSS 트릭을 쓴다면 그렇게..

https://medium.com/swlh/optimizing-react-performance-with-memo-usememo-and-usecallback-11fb34f4a3fa Optimizing React performance with memo, useMemo, and useCallback Optimizing component performance through memoization is one of the most underused techniques in React. Memoization is a somewhat advanced… medium.com - 아래 글은 위 글을 번역한 글입니다. - memoization을 통한 컴포넌트 성능 최적화는 React에서 가장 잘 안쓰이는 기술 중에 하나이다...

Intersection Observer API는 "상위 레벨 Document의 Viewport 또는 부모 요소"와 "타겟 요소" 간 교차 지점의 변화를 비동기적으로 관찰할 수 있는 방법을 제공한다. Intersection Observer가 등장하기 전에는 어떤 요소가 화면에 보여지는지 감지하는 것은 매우 복잡한 일이었다. 따라서 요소의 visibility를 감지하고 이벤트를 주는 것은 사용자가 접근하는 여러 브라우저와 웹 사이트들을 느리게 만드는 원인 중 하나였다. 그러나 웹 기술이 발전하면서 요소 visibility 감지의 필요성이 점점 높아졌고, Intersection 정보들이 필요하게 되었다. 이미지의 Lazy Loading이나 페이지 스크롤 시 컨텐츠 로딩 무한 스크롤 구현 광고들이 실제로 유저에..