꾸준히 공부하는 개발자

이미지를 axios로 blob 데이터로 받아와 dom에 직접 image를 생성 후 그 dom을 클릭하여 a tag의 href를 클릭한 효과를 만들어 다운 받는다. axios({ url: decodeURIComponent(url), method: 'GET', responseType: 'blob' }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', `${item.id}.jpg`) document.body.appendChild(link) link.c..

dblp.xml 파일을 받아와 이제 파싱을 할 차례이다. xml을 파싱하는 모든 라이브러리를 사용해 봤는데, 나는 console.dir 을 어떤식으로 사용하는지를 모르겠어서 시중에 가장인기있는 xml2js 이런 모듈들은 이상하게도 작동하지않아 인기가없는 react-xml-parser를 사용하였다. 이런건 사용하면안된다... const XMLParser = require('react-xml-parser'); const xml = new XMLParser().parseFromString(dblpString); // Assume xmlText contains the example XML 참 간단하다.

dblp.xml 이라는 대용량을 한번에 읽어오려다 보니 읽어 지지가 않았다. 그래서 선임분이 stream을 사용하라고 하여 검색을 해보았다. 비동기로 작동하는 것을 보고 Promise 를 반환하는 식으로 하여 동기적으로 처리할라고 하였다. const asyncXML = (xml) => { //xml은 url return new Promise((resolve, reject) => { let result = []; (async () => { const fetchedResource = await fetch(xml) const reader = await fetchedResource.body.getReader() reader.read().then(function processText({done, value}) {..

import Bluebird from 'bluebird' const handlerFile = await Bluebird.map(data, item => new Bluebird(async (resolve, reject) => { setTimeout(async () => { try { if (item.mainImages) await uploadToS3(item, 'mainImages', 'images', null, 'products') setLoadingCount(prevCount => prevCount + 1) } catch (e) { setLoadingCount(prevCount => prevCount + 1) item.mainImages = [] console.log(e) } try { if (item..

큰 이미지를 규격에 750 사이즈를 맞춰 잘라 앱에 효율적으로 보이게끔 하고 싶어서 jimp내의 crop이라는 함수를 사용했다. crop(x,y,w,h) 으로 사진 왼쪽위가 0,0 기준이다. 또 이미지가 잘려서 리턴되는게 아니라 원본이 이미지가 바뀌는 거라서 처음에 깊은복사로 cloneDeep을 사용했지만, 너무 무거워서 찾아보니 img.clone() 을 이용하니 한결 가벼워졌다. export const cutImages = async (options, data) => { const cutImage = await Promise.all(options.data.images.map(async (image) => { let imageArray = [] if (image.rawFile) { const rawFil..

rawfile을 비율에 맞게 resize 할 일이 생겨 jimp 라는 모듈을 사용하게 되었다. const imageResize = async (rawFile, strictSize) => { const resizeImage = await Jimp.read(rawFile.preview) let {width, height} = resizeImage.bitmap if (width > strictSize && width > height) { height = strictSize / width * height width = strictSize } else if (height > strictSize && height > width) { width = strictSize / height * width height = s..

react admin 을 사용중 엑셀을 받으면 blob 으로 와서 이 엑셀을 읽는데 삽질을 꽤 많이 했다. 이런 blob 형식으로 읽는거는 처음이였으며, 경로로 읽는건 안되길래 검색도중 XMLHTtpRequest로 읽는 것을 보고 바로 적용해 보았더니 읽혀서 사용했다. 아직 blob, local, 통신방식을 나 자신은 잘 이해하지 못한것같아 나중에 공부하는 포스팅을 올리겠다. params = "blob:localhost:3000/asfasfsdfsad" // 이런식이였던 것 같다. const asyncRequestExcel = (params) => { return new Promise(function (resolve, reject) { const excelUrl = params.data.excel.src..

프론트에서 데이터를 받아와 버튼을 누르면 직접 엑셀을 만들어 엑셀을 다운로드 받아야 할 일이 생겼다. 구글링을 하던 도중 좋은 오픈소스를 발견하여 해결하였다. const data = [[],[],[]] R) range.s.r = R; if (range.s.c > C) range.s.c = C; if (range.e.r < R) range.e.r = R; if (range.e.c < C) range.e.c = C; const cell = {v: data[R][C]}; if (cell.v == null) continue; const cell_ref = XLSX.utils.encode_cell({c: C, r: R}); if (typeof cell.v === 'number') cell.t = 'n'; else..