Code Playground

< h1 > Code Playground </ h1 >

이제 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; 코..

MaxSliceSum A non-empty array A consisting of N integers is given. A pair of integers (P, Q), such that 0 ≤ P ≤ Q < N, is called a slice of array A. The sum of a slice (P, Q) is the total of A[P] + A[P+1] + ... + A[Q]. Write a function: function solution(A); that, given an array A consisting of N integers, returns the maximum sum of any slice of A. For example, given array A such that: [3, 2, -6..

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

Dominator An array A consisting of N integers is given. The dominator of array A is the value that occurs in more than half of the elements of A. For example, consider array A such that [3, 4, 3, 2, 3, -1, 3, 3]. The dominator of A is 3 because it occurs in 5 out of 8 elements of A (namely in those with indices 0, 2, 4, 6 and 7) and 5 is more than a half of 8. Write a function function solution(..

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에서 가장 잘 안쓰이는 기술 중에 하나이다...