Frontend 검색 결과

118 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 자바스크립트 로컬 스토리지(localStorage) 사용 하기

🌈 자바스크립트 로컬 스토리지 사용 방법 로컬 스토리지(localStorage) 는 사용자의 컴퓨터에 저장되기 때문에 로컬 저장소라고 한다. 또한 로컬 스토리지는 세션 스토리지(sessionStorage) 와 비슷하지만, 로컬 스토리지의 데이터는 명시적으로 제거하지 않는 이상 자동으로 사라지지 않으나 세션 스토리지의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다. 그리고 로컬 스토리지에 저장된 데이터는 페이지의 프로토콜별로 구분된다. 예를 들어, HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 로컬 스토리지에 저장된다. 로컬 스토리지의 데이터는 키와 값의 쌍으로 이루어져 있다. 로컬 스토리지의 값으로 가능한 것은 DOMString의 형태뿐이며, 객체와 마찬..

2023. 1. 27. 14:51

Frontend/JavaScript

[Vite] 번들링 없는 프론트 빌드 Vite란 무엇일까?

🌈 Vite 란 무엇일까? 이미 프론트엔드 개발 생태계는 웹팩을 중심으로 한 개발 환경과 배포 시스템이 견고하게 구축되어 있지만, 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 비트(Vite)라는 도구가 새롭게 나오게 되었다. 비트(Vite)는 Vue의 창시자 Evan You에 의해 개발되었고, 프론트앤드의 주요 프레임워크 커뮤니티에서 주목받고 있는 도구이자 자바스크립트 네이티브 모듈(ESM) 을 기반으로 한 개발 도구이다. 1️⃣ 자바스크립트 네이티브 모듈 (ESM) ESM은 모듈화 문법인 import, export를 브라우저에서 자체적으로 실행할 수 있는 모듈 방식을 의미한다. 만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생한다. // app..

2023. 1. 24. 22:33

Frontend/Svelte

[Svelte] 스벨트의 특수한 컴포넌트 (Dynamic, Recursive)

🌈 스벨트의 특수한 컴포넌트 정리 스벨트에서 제공하는 특수한 컴포넌트에는 동적(Dynamic) 컴포넌트와 재귀(Recursive) 컴포넌트 그리고 윈도우 객체를 다룰 수 있는 윈도우 컴포넌트, 교차(Cross) 컴포넌트가 있다. 1️⃣ 동적(Dynamic) 컴포넌트 분기를 통해 다른 컴포넌트를 보여주어야 할 때 스밸트의 동적 컴포넌트를 이용하여 코드를 쉽게 작성할 수 있다. Toggle Display 2️⃣ 재귀(Recursive) 컴포넌트 재귀 컴포넌트는 each문에서 트리 구조의 렌더링시 사용한다. {#each familyStructure as familyMember} {/each} 아래 코드에서 트리 구조를 표현하기 위해 each에서 재귀 컴포넌트(svelte:self)를 사용하였다. {member..

2023. 1. 22. 15:21

Frontend/Svelte

[Svelte] 스벨트 모션 사용하기(tweened, spring)

🌈 스벨트 모션 사용 방법 스벨트에서 사용할 수 있는 모션의 종류에는 tweened와 spring이 있다. 1️⃣ tweened tweened는 값이 변경될 때 적용될 애니메이션의 저장소이다. 또한, tweened는 숫자, 날짜, 숫자와 날짜를 값으로 가지는 객체와 배열에 애니메이션을 추가할 수 있다. ◾ 결과 2️⃣ Spring 예시 참고 : Svelte Tutorial :: Spring stiffness ({coords.stiffness}) damping ({coords.damping}) 3️⃣ 정리 애니메이션 저장소는 컴포넌트 전용 저장소가 합리적이다. 왜냐하면 컴포넌트 내부에 애니메이션을 적용할 값이 있을 경우 tweened나 spring 저장소에 해당 값을 저장하면 즉시 해당 애니메이션을 사용할..

2023. 1. 21. 11:13

Frontend/Svelte

[Svelte] 스벨트의 읽기 가능 스토어란? (Readable Stores)

🌈 스벨트의 읽기 가능한 스토어 (Readable Stores) 읽기 가능한 스토어는 쓰기 가능한 스토어와 달리 외부에서 값을 변경할 수 없다. 읽기 가능한 스토어의 값 변경은 오직 내부에서만 가능하다. 1️⃣ Store 생성 쓰기 가능한 스토어가 writable을 통해 생성된 것과 비슷하게 읽기 가능한 스토어는 readable을 통해 생성한다. /* timer_store.js */ import { readable } from 'svelte/store' export const timer = readable(0); 2️⃣ readable 메서드 및 스토어의 값 변경 readable은 writable 스토어와 달리 두 번째 인수를 가지며 두 번째 인수는 함수이다. 또한 이 함수는 한 개의 인수를 갖는데, 이..

2023. 1. 20. 14:32

Frontend/Svelte

[Svelte] 스벨트의 쓰기 가능 스토어란? (Writable Stores)

🌈 스벨트의 쓰기 가능한 스토어 (Writable Stores) 스벨트의 스토어에는 두 가지 종류가 있으며, 쓰기 가능한 스토어와 읽기 가능한 스토어이다. 먼저 이번 포스팅에서는 쓰기 가능한 스토어에 대해 정리해 보려고 한다. ◾ 쓰기 가능한 저장소(writable) ▫ 쓰기 가능한 저장소를 생성하려면 특정 함수를 호출해야 한다. ▫ 저장소는 javascript에서 사용하므로 어느 컴포넌트에서나 불러올 수 있다. ▫ 저장소를 불러온 컴포넌트에서는 두 가지 작업을 할 수 있다. ⅰ) subscribe - 저장소의 데이터가 바뀔 때마다 이를 전달받은 컴포넌트가 변화에 반응하는 것(ex.데이터 출력) ⅱ) set, update - 데이터를 저장소에 설정(set)하거나 업데이트(update)할 수 있다. 1️⃣..

2023. 1. 19. 21:49