blackbearwow

난독화는 프로그래밍 언어로 작성된 코드에 대해 읽기 어렵게 만드는 작업이다.온라인 js 난독화 사이트: https://obfuscator.io/1. 설치npm으로 설치npm install --save-dev javascript-obfuscatorCDN으로 불러오기2. 사용법const jsObfuscator = require('javascript-obfuscator');let obfuscationResult = jsObfuscator.obfuscate( `let i=0; for(;iobfuscate(sourceCode, options)다음 메소드를 가진 obfuscationResult객체를 반환한다.getObfuscatedCode() - 난독화된 코드를 string형태로 반환한다.메소드는 두 파..

js는 동기 방식과 비동기 방식 실행을 지원한다. 어떠한 구조, 어떠한 방식으로 구성되어있길래 비동기 방식을 처리할 수 있는지 자세하게 알아보자.잘못된 부분이나 부족한 부분은 댓글로 알려주시면 감사하겠습니다!자바스크립트 엔진자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 구글의 V8과 애플의 webkit이 유명하며 이 글에서는 V8을 기반으로 설명할 것이다. js엔진에는 Heap과 call stack이 있다. heap에는 변수의 내용이 주로 저장되고, call stack에는 실행되는 함수들(정확히는 실행 문맥)이 쌓인다. 싱글 스레드 방식으로 사용되어 한번에 하나의 일만 가능하다.브라우저 구조자바스크립트 엔진은 한번에 하나의 일만 처리 가능한데, 어떻게 브라우저는 한번에 많..

set(집합)은 값들의 모음이다. 이때, 같은 값은 한번만 나타난다. - 생성 빈 set을 생성하거나 배열을 인자로 줄 수 있다. const set1 = new Set(); const set2 = new Set(["a","b","c"]); - method 이름 설명 add() 요소를 set에 추가한다. clear() 모든 요소를 set에서 제거한다. delete() 요소를 set에서 제거한다. entries() [요소, 요소]들을 값으로 갖는 SetIterator(iterator 객체)를 반환한다. forEach() 각 요소에 callback을 적용한다. has() set에서 요소가 있으면 true 없으면 false를 반환한다. keys() values()와 동일. values() 요소들을 값으로 갖는 ..

Objects란 key-value쌍으로 모든것을 저장하는 무질서한 자료구조이다. let instructor = { firstName: "Princeton", isInstructor: true, favoriteNumbers: [1,2,3,4] } 시간복잡도(Big O Notation): 함수 입력이 늘어남에 따라 해당 함수의 실행 시간이 얼마나 바뀌는지 설명하는 방법이다. Objects의 시간복잡도: ●삽입 - O(1) object가 얼마나 많은 속성을 가지고있는지는 중요하지 않다. '순서가 없다' object는 처음과 끝이 존재하지 않기 때문에 삽입하던 삭제하던 접근하던 아무런 영향이 없다. instructor.gavoriteGame = "Metroid"; ● 제거 - O(1) delete instruc..

웹 개발을 하다보면 youtube를 브라우저에서 재생시키고싶을 때가 있다.1. iframe삽입공유 - 퍼가기를 하면iframe태그가 나오는데, 복사해 html에 삽입하면 된다.2. youtube iframe_apiyoutube iframe_api를 사용하면 더욱 정교한 컨트롤이 가능해진다. (and video player) will replace this tag. --> 1. 태그는 IFrame API의 비디오 플레이어가 어디에 위치할지 식별한다. id는 3번의 video player를 로딩할 때 구분자로 쓰인다. 2. 해당 코드는 iframe_api 코드를 비동기적으로 불러온다. 3. onYouTubeIframeAPIReady함수는 API코드가 전부 다운로드 되면, 호출되..

생활코딩 강좌: https://www.youtube.com/watch?v=a5AzftkvW9U&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=5 Promise.all은 여러 작업을 모두 기다리는 것이고 Promise.race는 여러 작업중 가장 먼저 끝나는 작업만 기다리는 것이다. promise를 반환하기 때문에 기다리고싶다면 await를 앞에 붙이면 된다.Promise.allfunction timer(time){ return new Promise(function(resolve, reject){ setTimeout(function(){ resolve(time); }, time); });}console.time('Promise.all');Promise.all([t..

async와 await도 생활코딩 유튜브로 배웠다. 정말 그는 신인가..생활코딩 유튜브 강의: https://www.youtube.com/watch?v=1z5bU-CTVsQ&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=3 async & await는 js2017에 추가된 문법이다. js에서는 비동기가 사용되는데, 비동기 함수 호출 후 또 다른 작업을 한다면 비동기 작업이 진행되는 중에 다음 작업이 진행될 수 있다.이것은 장점과 단점이 있다. 장점으로는 언제 끝날지 모르고 다음 작업과 상관 없는 작업이라면 비동기 함수로 작업을 하는 것이 장점이 된다.하지만 단점. 작업이 끝난 후 리턴값을 이용하여 후 작업을 해야 한다면 동기적으로 작동시키고 싶을 것이다. 파일 입출력 같..

javascript 비동기에서 항상 나오는 단어가 있다. 바로 promise. 이것은 도대체 뭘까?과거에는 자세히 알아보지도 않고 잘 이해하지도 않고 넘어갔다. 그 결과 비동기 함수만 나오면 아주 골치아픈 상황이었지...하지만 오늘 다시 비동기 함수를 만나며 골치아픈 상황이 또 다시 생겼고, promise를 알지 못하면 js는 사용할 수 없는 언어가 될 것이 분명하다!생활코딩 유튜브를 보며 정말 머리아픈게 싹 내려갔다. 생활코딩 짱!생활코딩 Promise 강의: https://www.youtube.com/watch?v=Sn0ublt7CWM&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=2 promise는 js2015(es6)부터 사용 가능한 문법이다. promise는 ..

c, c++, java, python을 공부한 나에게 프로그래밍 언어는 항상 동기적으로 동작하는 줄 알았다.c, c++, java는 비동기적으로 여러가지 작업을 처리하려면 thread또는 process를 만들어 사용해야 한다.(python은 어떻게 작동하는지 잘 모른다) 물론 javascript도 동기적으로 동작한다. 하지만 javascript는 비동기적으로 동작하기도 한다! 대표적으로 setInterval(), setTimeout() 함수가 비동기적인 함수이다.나중에 이해한 내용c, c++, java는 thread를 만들거나 fork로 process를 만들어 여러가지 작업을 동시에 작업한다.js는 thread를 만들거나 fork를 할 수 없다. 대신 Promise 또는 webapi를 사용해 여러가지 작..

문법metacharacters대부분의 문법에서 regex는 14개의 metacharacters를 가지고 있다. {}[]()^$.|*+?\로, 이 문자들을 특별한 의미를 가진다. 개별 문자로 사용하려면 \를 앞에 붙여 escape해주어야 한다.delimiter(구획 문자)프로그래밍 언어에서는 문자열로 regex를 나타낼 수 있다. "re"처럼. /re/처럼 슬래시도 많이 쓴다. 이 구획 문자는 정규표현식에서 사용하려면 escape해주어야 한다.기본 개념or세로줄은 or을 의미한다. 예를 들어 gray|grey는 "gray"또는 "grey"와 매치된다.그룹화괄호는 연산자의 범위 및 우선 순위를 결정하는데 사용된다. 예를 들어 gray|grey와 gr(a|e)y는 같은 패턴이다.수량화(Quantificatio..