저장소

목적 fabric.js 와 svelte를 사용하여 이미지 에디터를 만들어 보았는데 그 과정을 정리할 필요성을 느끼게 되었다. 이 포스팅에서는 svelte는 제외한 typescript위주로 각각 기능의 제작과정을 정리할 예정이다. 이번 포스팅에서는 간단하게 input file change 또는 드래그 앤 드롭으로 에디터에 사용할 이미지를 캔버스에 넣어보도록하자 Interface CustomCanvas interface CustomCanvas extends fabric.Canvas { imageSize?: { width: number height: number } cornerSize?: number imagePath?: string } 우선 fabric의 기본으로 정의된 member이외의 별도의 데이터를 추..

fabric.js 2023. 3. 19. 13:55

추후 포스팅할 fabric js를 사용하여 이미지 에디터를 제작하던중 타입스크립트 에러가 출력되었다 🤔 뭔가 이상하니 document를 살펴보자 fabric js의 document에서는 다음과 같이 사용할 수 있다고 나와있다 타입이 지정되어 있지 않은지 확인하기 위해 @types/fabric을 살펴보니 interface IAllFilters 의 하위의 각각 Blur와 HueRotation이 별도로 선언되어있지 않았다 타입이 누락된 이유는 모르겠지만 자료형이 정의되고 패키지가 업데이트된 것이 반영되지 않아서 빠졌을 수도 있고, 단순 누락되었을 수도 있다 타입스크립트를 사용할때 패키지 내부에 포함되어있지 않고 @types로 추가되는 ts디펜던시는 많은 개발자가 기여하여 만들어진 경우가 대부분이다 그에 대한 ..

카테고리 없음 2023. 3. 19. 13:49

javascript에서 import 하여 이미지를 불러오거나 input file에서 이미지를 업로드 할 때 file이 아닌 이미지의 정보를 일부 활용하고 싶을때가 있다 그럴때 우선 readfile을 활용하여 파일을 읽은 뒤, new Image()로 이미지의 정보에 접근하여 활용하는 방법이다. 이때 각각 동작을 비동기로 처리하고 한번에 후처리 하도록 하였다 new FileReader() 우선 파일을 read 함수를 만들어준다 async function readFile (file: File) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = async (event) => resolve(event..

카테고리 없음 2023. 3. 19. 13:47

배열을 전달하여 sample데이터 생성하기 1. 함수의 첫번째 parameter(data)는 Object 형태의 n개의 값을 전달한다 2. 두번째 prarmeter(option)는 Object을 전달한다 3. count(생성갯수), duplicate(중복여부), maximum(숫자생성 최대값), floor(반올림) // 함수에 사용될 임의값 const tier = ['IRON','BRONZE'...] const users = ['pellentesque','dignissim'...] (a) loop가 될 배열을 선언해준다 count가 전달되지 않으면 기본값은 10으로 한다 function generator (d, o) { const result = new Array(o?.count ? o?.count : ..

카테고리 없음 2023. 3. 19. 13:45

map, reduce key: {value1, value2}를 배열로 변환하기 조건: Object key 안에 value 구조를 가진 데이터가 있다 목적: 해당 값을 배열로 변환 const tier = { BRONZE: {count: 545, price: 952} DIAMOND: {count: 870, price: 848} GOLD: {count: 176, price: 133} IRON: {count: 357, price: 175} MASTER: {count: 379, price: 95} Platinum: {count: 109, price: 439} SILVER: {count: 580, price: 563} } 변환은 다음과 같이 한다 Array const result = _.map(tier, (valu..

lodash 2023. 3. 19. 13:43