분류 전체보기 검색 결과

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

Frontend/JavaScript

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

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

2023. 1. 24. 22:33

Backend/Node.js

[Node] Koyeb으로 서버 무료로 배포하기 (헤로쿠 대체 플랫폼!!)

❔ Koyeb 이란 2022년 11월 28일부로 헤로쿠(Heroku)의 서비스가 유료로 전환되었다. 따라서 헤로쿠의 프리티어를 대체할 플랫폼을 찾던 중 Koyeb을 발견하여 사용법을 정리할 겸 포스팅하게 되었다. Koyeb은 배포를 위해 두 가지 방법을 제공한다. 첫 번째 방법은 도커 이미지를 통해 배포하는 것이고, 두 번째 방법은 깃허브와 연동하여 repository를 선택하여 배포하는 방법이다. 또한, 깃허브를 통해 배포할 경우에는 브랜치에 커밋할 때 자동으로 deploy가 되는 편리함을 제공한다. 👨‍💻 계정 및 앱 생성 Koyeb에 접속하여 계정 생성 후 앱 생성을 진행한다. ◾ 계정 생성은 github 아이디로 할 수 있으므로, github 아이디와 연동한다. ◾ 계정 생성이 완료되면 아래와 같..

2023. 1. 23. 23:51

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