동고 팔자 상팔자

지난 글 자바스크립트 every 함수 구현 (feat. ECMA-262)에 이은 every 함수에 관한 글이다. 자바스크립트 every 함수는 판단 로직이 무엇이든 간에 빈 배열은 무조건 true를 반환하는데 이에 대한 글이다. 원글은 https://humanwhocodes.com/blog/2023/09/javascript-wtf-why-does-every-return-true-for-empty-array/ 자바스크립트 every가 빈 배열을 true로 반환하는 이유 JavaScript 언어의 핵심은 특정 부분이 어떻게 작동하는지 오해하기 쉽도록 충분히 크다. 저는 최근 이 메서드를 사용하는 일부 코드를 리팩토링하고 있었는데 every()에 숨어있는 논리를 실제로 이해하지 못했다는 사실을 발견했다. 내 ..

자바스크립트 엔진과 자바스크립트 런타임은 어떻게 다를까? 자바스크립트 엔진과 런타임과 엔진은 동일한 것으로 잘못 언급되는 경우가 많다. 아마도 "자바스크립트 엔진"과 "자바스크립트 런타임"이라는 용어가 "자바스크립트를 실행하는 프로그램"을 의미하는 것으로 같은 의미로 사용되는 것을 들어봤을 것이다. V8, Node.js 또는 기타 관련 프로그램에서 종종 혼합하여 참조되기도 한다. 그러나 범위와 기능 측면에서 자바스크립트 엔진과 자바스크립트 런타임 간에는 상당한 차이가 있다. 이 차이점을 이해하는 것은 자바스크립트 언어를 잘 이해하는데 있어 중요하다. 자바스크립트 엔진과 런타임이 각각 무엇인지 이야기하기 전에 엔진과 런타임 모두와 함께 사용되는 몇 가지 용어(ECMAScript 및 자바스크립트)를 알아보자..

axios v1.x 버전의 몇 가지 변경점을 살펴보자 axios 버전이 v0.x에서 v1.x으로 업데이트되었다. v0.x에서 오랫동안 업데이트되지 않고 있었는데 한 번에 v1.x이 릴리즈 되었다. 당연히 메이저 버전이 올라갔으니 바뀐 사항들이 많을 것이고, 기존에 동작하던 기능들이 동작하지 않을 수도 있다. semantic-versioning에도 메이저 버전 변경 시에는 기존 API가 삭제/변경되거나 호환되지 않을 수 있다고 나와있다. Major Version: 기존 API의 변경/삭제로 update하면 동작하지 않을 수 있다는 경고의 의미 Minor Version: 이전 버전과 호환되는 방식으로 API가 추가되었으니 살펴보라는 의미 Patch Version: 이전 버전과 호환되는 버그 수정을 했을 경우..

JSONP가 무엇이고 어떻게 사용하는지 알아보자 JSONP(JSON with Padding)는 cross-origin 도메인으로의 요청을 우회할 때 사용되는 방법이다. 예를 들어 www.abc.com에서 www.example.com을 요청하는 경우를 말한다. JSONP는 단, JSONP cross-origin 요청이기 때문에 안전하지 않다. 권장되는 접근방식은 CORS이다. 참고 https://stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created/2067584#2067584

몽키패치(Monkey patch)가 무엇인지 알아보고 예제와 단점을 알아보자 몽키패치란(Monkey patch) 몽키패치는 원래 소스코드를 변경하지 않고 실행 시 코드 기본 동작을 추가, 변경 또는 억제하는 기술이다. 쉽게 말해 어떤 기능을 위해 이미 있던 코드에 삽입하는 것이다. 자바스크립트의 endwWith 함수를 예를 들어보자. 이 함수는 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 true 혹은 false로 반환한다. 만약 이 함수가 없었다면 이 기능을 어떻게 구현했을까 첫 번째 방법은 유틸리티 객체를 만드는 것이다. var Utility = { endsWith: function(string, suffix) { return string.indexOf(suffix, str..

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", "..

자바스크립트 키 동시입력 이벤트는 keydown과 keyup 이벤트 조합으로 구현할 수 있음 키 입력 여부를 boolean으로 관리하면 됨 window.addEventListener("keydown", keysPressed, false); window.addEventListener("keyup", keysReleased, false); var keys = []; function keysPressed(e) { keys[e.keyCode] = true; // Ctrl + Space if (keys[17] && keys[32]) { console.log("Ctrl + Space"); e.preventDefault(); // prevent default browser behavior } } function ke..

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..

자바스크립트의 스위치(swtich)문을 객체 리터럴(object literal)을 이용하여 구현해보자. 객체 리터럴로 스위치문을 대체하기 위해서는 먼저 ES6의 객체 리터럴 확장 기능을 알아야한다. 먼저 ES6의 객체 리터럴을 정리하고 스위치문을 구현해보자. 1) ES6 객체 리터럴 확장 기능 1-1) 객체 생성 시, 속성을 축약할 수 있다. 객체 생성 시, 변수만 설정해주면 된다. ES6 이전에는 객체 리터럴이 key, value 쌍이었다. 예를 들어 let name = 'ES5' let stauts = "active" let server = { no: 1, name: name, status: stauts, } console.log(server) { no: 1, name: 'ES5', status: '..

자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)reflow와 repaint에 대한 설명은 아래 글 참고브라우저 렌더링 : reflow & repaint1234567891011// 전var wid..

nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음바로 활용할 수 있는 부분을만 추려서 요약한다.코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 변수, 객체 생성 및 접근정규표현식반복문 변수, 객체 생성 및 접근1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름5) 문자열 생성 : var str = "test"; vs var..