이번에 프로젝트를 진행하면서 crypto를 사용할 일이 있었는데.. crypto라는 모듈은 기본적으로 node에서 제공중이라고 해서 이걸 사용하려고 했다. (처음에는 crpyto-js 라이브러리를 설치해서 하려고 했는데, 이 친구 비대칭키는 지원 안한다고 해서 안함..) 근데 막상 import해서 사용하려고 하니 다음과 같은 에러가 발생했다. Module not found: Error: Can't resolve 'crypto' / webpack

dom-to-image.js 라이브러리란? 웹페이지의 DOM요소를 이미지로 변환하도록 도와주는 라이브러리 dom-to-image.js를 사용하게 된 계기 이전에도 DOM을 이미지로 변환하여, PDF 형태로 추출한 적이 있다. 그때는 html2canvas + jsPdf 라이브러리 조합으로 기능을 구현했었는데... 링크 참조 이번에 똑같은 기능을 구현 할 일이 있어서 그냥 되겠지.. 라고 생각해서 구현을 했는데 왠 걸? 스타일이 깨지는 상황이 발생했다.. 그래서 왜 그런건지 좀 알아보았는데, 대충 내가 생각하는 원인은 아래와 같았다. 1. html2canvas가 지원하는 css 속성이 제한적이다. html2canvas 라이브러리의 스타일 적용과 관련하여 검색을 조금 하면 다른 사람들도 조금 문제가 있다는 듯..

결론 우선 결론을 적어둘테니, 샘플코드 안볼 사람은 아래 3개만 기억하자. 1. 배열을 리턴받아야 하는 상황(리턴값이 여러개인 경우)에는 Filter함수를 사용한다. 2. 단일 데이터를 리턴 받아야 하는 상황(리턴값이 1개인 경우)에는 Find함수를 사용한다. 3. 단 대용량 데이터가 아닌 경우에는 Filter, Find 함수간의 성능 차이는 거의 없다. 오히려 Filter가 빠르다. (웹브라우저 엔진이나 성능에 따라 결과값은 바뀔 수 있다.) 4. 개발시 실데이터로 양쪽의 함수를 테스트 해보고 성능이 빠른 쪽을 사용하도록 한다.(중요!!!) Find함수와 Filter함수는 어떻게 다를까? Find함수과 Filter함수 양쪽 다 Array를 지원하는 javascript 내장함수로 조건에 맞는 값을 리턴해..

서론 이번에 프로젝트를 하면서 프로미스 배열을 처리하는데 몸에 배어있는 습관처럼 map함수를 사용해서 프라미스를 처리 했다.. 그래서 정리를 했다. map함수, forEach함수, Promise.all함수가 어떻게 다른지 조금 알고 싶었다.. 그걸 알아야 상황에 맞게 어떤 함수를 사용할 지 생각을 할 수 있으니까... 기왕 하는김에 for.. of문법도 같이 정리해보았다. 각 함수들의 샘플코드 공통 샘플코드 const promise1 = async () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("통신 성공1"); }, 2000); }); }; const promise2 = async () => { return ne..

javascript에서 로직의 수행시간을 측정하는 방법 console.time, console.timeEnd()함수를 사용하는 방법 정적 console.time()메서드는 작업에 소요되는 시간을 추적하는 데 사용할 수 있는 타이머를 시작합니다. 각 타이머에 고유한 이름을 지정하고 특정 페이지에서 최대 10,000개의 타이머를 실행할 수 있습니다. 동일한 이름으로 호출하면 console.timeEnd()브라우저는 타이머가 시작된 이후 경과된 시간을 밀리초 단위로 출력합니다. -MDN 기본문법 console.time() //...로직 //...로직 //...로직 console.timeEnd() //console.time()을 시작점으로 해서 console.timeEnd()까지의 시간을 출력해줌 샘플코드 co..

이번에 프로미스(Promise)객체를 생성하는 여러가지 방법을 조금 정리하려고 한다. 요즘 제일 많이 사용하는게 async키워드나 fetch 등을 사용하는 방법인데.. 일단 다 정리해봄.. 프로미스(Promise) 객체를 생성하는 방법들 1. new 생성자를 이용한 생성방법 let myFirstPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 setTimeout(() => { resolve("프로미스 객체 생성 완료"); }, 1000); }); } 2. 팩토리 함수를 이용한 생성방법 (프로미스 팩토리 함수) function createPromise() { return new Promise((resolve, reject) => { // 비동기 작업 수..