d3.Adder d3.Adder 는 JavaScript의 + 연산자에 의존하는 대신 IEEE 754 부동 소수점 숫자에 대한 전체 정밀도 가산을 해주는 기능을 한다고 합니다. 예제 아래는 예제 코드입니다. const adder = new d3.Adder(); const value1 = 0.031333333333233333; const value2 = 0.139999999999000001; const value3 = 0.333333333333333331; adder.add(value1); adder.add(value2); adder.add(value3); console.log(`sum `, value1 + value2 + value3); console.log(`adder.valueOf()`, adder.v..

안녕하세요. 루루개발자 입니다. 이번에는 클로저(Closure) 에 대해 알아보려고 합니다. 클로저(Closure) 란? 일반적으로 함수 내에 선언된 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. 즉, 함수가 종료되면 (리턴되면) 함수 내에 선언되었던 변수는 파괴되고 더 이상 접근 불가능 하다고 생각하는 것이 일반적입니다만, 예외가 존재합니다. function makeFunc() { const name = "홍길동"; function displayName() { alert(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 위 예시에서 name 이란 변수는 "makeFunc" 함수 내에 선언된 지역 변수 입니다. "displa..

안녕하세요. 루루개발자입니다. 최근 회사에서 진행중인 프로젝트 중에 웹에서 앱을 호출해야 하는 상황이 있었습니다. 웹에서 앱을 호출하기 위해서는 앱의 url scheme 를 다음과 같은 예시처럼 웹에서 호출해주어야 합니다. 앱 호출 앱 호출 앱이 사용자의 휴대폰에 설치되어 있다면 해당하는 앱이 정상적으로 호출되겠지만, 문제는 앱이 설치되어 있지 않을 때의 이벤트를 감지해야 하는데 마땅한 방법이 떠오르지 않았습니다. 그러던 도중 문득 event listener 중 focus 와 blur 를 활용해 비슷한(?) 기능을 구현할 수 있을 것 같았고 다음과 같이 코드를 작성하였습니다. class UrlSchemeCaller { windowState = 'focus'; constructor() { this.init..

안녕하세요. 루루개발자 입니다. 이번 글에서는 javascript 난독화를 적용하면서 생긴 이슈에 대해 공유드리고자 합니다. 다음과 같은 상황이라고 가정해봅시다. -- test-class.class.js class TestClass { apiUrl; apiCallback; constructor(options) { console.log('TestClass.options', options); this.apiUrl = options.apiUrl; this.apiCallback = options.apiCallback; console.log('this.apiUrl', this.apiUrl); console.log('tthis.apiCallback', this.apiCallback); } } -- test-clas..

안녕하세요. 루루개발자 입니다. 이번에는 javascript 파일을 난독화 하는 방법에 대해 알아보겠습니다. 사실 이번에 javascript SDK 하나를 개발하게 되었습니다. 하지만 비즈니스 로직이 너무 적나라하게 드러나 있어서 이를 어떻게 해결할까 하다가 난독화를 이용해 이 문제를 조금이라도 해결 할 수 있지 않을까 싶었습니다. 그렇습니다. javascript 파일을 난독화 하는 이유는 javascript 파일 내용을 남이 보더라도 분석을 어렵게 하기 위함입니다. 먼저 터미널에서 아래 명령어를 입력해 uglify-js 패키지를 전역으로 설치합니다. npm i uglify-js 그 후, 아래와 같이 명령어를 입력해 원본js 파일을 난독화한 js 파일로 새로 생성해줍니다. uglifyjs {원본js파일명..

안녕하세요. 이번에는 Javascript 의 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. ▣ TDZ 가 뭐야? TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있겠습니다. 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다. TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않습니다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 됩니다. ▣ 변수 생성 단계 TDZ 를 이해하기 위해서는 Javascr..

안녕하세요. 이번에는 Javascript 에서의 호이스팅 이란 개념에 대해 알아보겠습니다. ▣ 호이스팅이 뭐야? Javascript 에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말합니다. 다른 말로 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것으로 말하기도 합니다. ▣ 호이스팅 예시 (var, function) var aa; console.log('aa', aa); console.log('aa', aa); var aa; => aa 가 호이스팅 되어, 선언과 동시에 undefined 로 초기화가 되어, console.log 에서 undefined 가 표시됨 function aa() { console.log('aa 함수 호출됨!'); } ..

안녕하세요. 이번엔 Javascript 의 동작 원리에 대해 알아보려고 합니다. Javascript 코드를 해석하고 구동시키기 위해서는 엔진이 필요하고, 이러한 Javascript 의 엔진은 다양한 종류가 있습니다. 그 중에 가장 유명하고 많이 쓰이는 엔진은 바로 오픈소스로 개발 된 Google의 V8 엔진 입니다. Node.js 도 V8 엔진을 사용하여 Javascript 런타임 환경을 구현합니다. Javascript 엔진은 크게 2가지 구성요소로 구성되어 있습니다. 1. Memory Heap (메모리 힙) - 메모리 할당이 일어나는 곳 - 정보(데이터)를 저장하는 공간 - 변수, 함수 저장, 호출 등의 작업이 발생하는 공간 즉, Memory Heap 은 데이터를 저장하는 창고라고 생각하면 됩니다. 2..