동고 팔자 상팔자

여러 프로퍼티를 한 번에 watch 하는 방법 아래와 같은 코드가 있다. car와 coffee 값이 변하면 동일한 doSomething 함수를 호출한다. 여러 개를 watch 해야 하는 상황에서 모든 프로퍼티마다 watch를 선언하지 않고 한 번에 하는 방법이 있다. watch: { car: function (val, oldVal) { doSomething(); }, coffee: function (val, oldVal) { doSomething(); }, // .. so on } Vue 3 Vue 3에서는 아래처럼 할 수 있다. import { watch, ref } from 'vue'; export default { setup(() => { const car = ref('car'), coffee = ..

axios-extensions를 사용하여 axios http 요청에 캐시를 적용해보고, 어떻게 캐시를 적용하고 있는지 구현 코드를 살펴보자 1. axios-extensions를 사용하여 axios에 캐시 적용 axios-extensions 설치 npm install axios-extensions --save axios-extensions에서 제공하는 cacheAdapterEnhancer를 axios 어답터에 적용 import axios from 'axios'; import { cacheAdapterEnhancer } from 'axios-extensions'; const http = axios.create({ // enabledByDefault는 캐시 사용 디폴트 설정 // default 값은 true이..

reduce와 스프레드 연산자(Spread syntax)를 함께 사용하는 걸 피해라 자바스크립트의 reduce는 매우 강력한 내장 함수이다. 배열의 덧셈, 곱셈 등의 연산에 많이 사용되지만 자유도가 높아서 map, filter 등의 함수도 모두 reduce로 구현할 수 있다. 하지만 reduce 사용 시 주의해야 할 점이 있다. 그건 바로 reduce와 스프레드 연산자를 함께 쓰지 않는 것이다. 다음 코드를 예로 들어보자. const arr = [ { id: "ironman", name: "Tony Stark" }, { id: "hulk", name: "Bruce Banner" }, { id: "blackwidow", name: "Natasha Romanoff" }, ]; const superheroes..

html2canvas는 어떻게 화면을 캡처하는지 코드를 통해 알아보자 html2canvas는 자바스크립트로 화면을 캡처할 때 많이 사용되는 오픈소스이다. 깃헙에 어떻게 동작하는지 아래처럼 나와있다. DOM과 스타일을 적용하여 캔버스 이미지로 그린다고 되어있다. 실제 사용법도 간단하다. 캡처 대상 element와 옵션만 설정하면 promise로 캔버스를 반환한다. jspdf 라이브러리를 통해 화면을 통째로 PDF로 내보낼 때도 이 오픈소스를 이용하기도 한다. (참고. 자바스크립트로 PDF 내보내기) html2canvas는 어떻게 element를 캔버스로 만들고 있는지 코드를 살펴보았다. 코드는 v1.4.1 기준이다. 1) 디버깅 모드 기본적으로 logging 옵션(default : true)을 지원한다. ..

자바스크립트로 PDF 생성 및 화면 내보내기 자바스크립트 화면 캡처에 이어 PDF 내보내기이다. PDF 생성은 jsPDF 라이브러리를 사용할 것이다. 간단한 텍스트, 표 생성 및 한글 깨짐 현상 해결 및 화면(dom 영역)을 캡처하여 PDF로 저장해보자 1. 기본 옵션 확인 및 PDF 생성. 한글 깨짐 현상 해결 jsPDF 설치 npm install jspdf --save # or yarn add jspdf 간단한 jsPDF 설정 및 문자열 출력 import { jsPDF } from "jspdf"; const doc = new jsPDF({ orientation: "p", // p: 가로(기본), l: 세로 unit: "mm", // 단위 : "pt" (points), "mm", "cm", "m", "..

크록포드(Crockford) 스타일로 자바스크립트 오브젝트 생성하기 자바스크립트는 자바처럼 전통적인 객체지향언어가 아니며 객체 지향 기능을 갖춘 프로토타입 기반 언어로 간주된다. (비록 다른 객체지향 언어들과의 차이점에 대한 논쟁이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다) 프로토타입 기반 프로그래밍은 클래스가 필요없는 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. 자바스크립트에서 객체를 다양한 방법으로 생성할 수 있는데, 크록포드는 객체를 어떤 스타일로 만드는지 살펴봤다. 더글라스 크록포드(Douglas Crockford)는 자바스크립트의 아버지로 불리는 미국의 개발자이다. 자바스..

html2canvas를 사용하여 웹 화면 캡쳐를 해보자 html2canvas는 자바스크립트로 화면을 캡쳐할 수 있는 라이브러리다. element를 캔버스로 변환해준다. 화면을 PDF로 내보낼때도 사용되는데, PDF로 내보내기는 '자바스크립트로 PDF 내보내기'를 참고바란다. 그리고 html2canvas가 어떻게 화면을 캡처하는지 궁금하다면 'html2canvas는 어떻게 캔버스를 그릴까' 포스트를 참고바란다. 화면을 캡쳐하고, 클립보드에 복사도 해보자. 사용법은 굉장히 간단하다. 설치 (직접 js 다운받아서 사용해도 됨) Install NPM npm install --save html2canvas Install Yarn yarn add html2canvas 라이브러리 임포트 import html2canv..

반복문에서 비동기 처리를 동기적으로 처리해보자. 아래처럼 메뉴를 주문받으면 제조 시간이 랜덤으로 0~4초가 걸리는 함수가 있다. 여러 건의 주문을 받았을 때, 주문을 동기 처리하여 결과를 한 번에 반환하려면 어떻게 해야 할까? const order = menu => { const time = Math.floor(Math.random() * 4) * 100 const result = `${menu}, ${time}` console.log("order", result) return new Promise(resolve => setTimeout(() => resolve(result), time)) } const menus = [ 'americano', 'latte', 'cake', 'milk' ] 아래처럼 fo..

렌더링 과정1) DOM 트리 생성2) 스타일 구조체 생성3) 렌더 트리 생성4) 레이아웃 처리5) Paint6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업1234function reflow() { document.getElementById('test').style.width = '100px'; return false;}Colored by Color Scriptercs repaintReflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업.수치와 상관없는 background-color, visibillty, outline..