안녕하세요. 루루개발자 입니다. 최근 안드로이드 디바이스의 절전모드로 인해 겪었던 이슈에 대해 공유드리고자 합니다. 이슈가 생긴 서비스의 플로우는 어떻게 되나? 어떤 서비스의 로그인 페이지가 있습니다. A 앱에서는 이 로그인 페이지를 웹뷰로 표시하고, 로그인 페이지에서 "로그인" 버튼을 클릭하면 B 앱이 위에 표시되며 로그인이 진행 된 후 B 앱이 종료되며 다시 A 앱의 웹뷰 화면으로 돌아가게 됩니다. 발생한 이슈는 무엇인가? 문제는, B앱이 호출된 직후 A앱 Webview 페이지의 javascript 에서 이후 로직이 진행되어야 하는데 해당 로직이 진행되지 않아 팝업창이 표시되지 않는 현상이 발생하였습니다. 다양한 케이스로 테스트를 해본 결과 원인은 절전모드에 있었습니다. 안드로이드 디바이스의 절전모드..

d3.InternSet d3.InternSet 은 javascript 의 Set 과 동일한 기능을 하는 클래스 입니다. 똑같이 Value 를 add 할 수 있고 Value 를 가지고 있는지 여부와 size 등을 조회할 수 있습니다. 예제 만약 아래와 같은 코드가 있다고 해봅시다. const jsSet = new Set(); jsSet.add(new Date(2021, 4, 1)); jsSet.add(new Date(2022, 3, 8)); jsSet.add(new Date(2022, 3, 8)); console.log(`jsSet`, jsSet); console.log(`==============================`); const d3InternSet = new d3.InternSet(); d..

안녕하세요. 루루개발자 입니다. 최근 회사 프로젝트를 하면서, 사용자가 특정 버튼을 클릭하면 특정 문자열이 클립보드에 자동 복사되어지는 기능 구현이 필요하였습니다. 그래서 관련 라이브러리를 찾아보니 다음과 같은 라이브러리가 존재했습니다. https://www.npmjs.com/package/clipboard clipboard Modern copy to clipboard. No Flash. Just 2kb. Latest version: 2.0.11, last published: 2 months ago. Start using clipboard in your project by running `npm i clipboard`. There are 1997 other projects in the npm regist..

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

안녕하세요. 루루개발자 입니다. 이번 글에서는 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 에서의 호이스팅 이란 개념에 대해 알아보겠습니다. ▣ 호이스팅이 뭐야? 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..