blackbearwow 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형태로 반환한다.메소드는 두 파..

HTML video 태그 플레이어를 꾸미는 프레임워크이다.1. CDN으로 설치 태그에 link를 삽입하고 태그가 끝나기 전에 script를 삽입한다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스2. 옵션data-setup='{}'에 다양한 옵션을 전달할 수 있다(반드시 작은 따옴표로 감싸준다). 각 옵션의 key는 반드시 큰따옴표(")로 감싸주어야 한다. 또한 js로 조종할 때, 사용되기도 한다.이름값설명autoplayboolean(true, false)자동으로 동영상이 재생될지말지controlsboolean유저가 상호작용할 수 있는 컨트롤을 플레이어가 가질지 말지heightstring|number비디오 플레이어 높이를 pixel단위..

css 문법Selector 중괄호 안에 Property:Value로 이루어져 있다. CSS selectorsSelector예시예시 설명.class.introclass="intro"인 모든 요소를 선택한다..class1.class2.name1.name2name1과 name2가 둘다 class속성에 있는 모든 요소를 선택한다..class1 .class2.name1 .name2name1을 class로 가진 요소의 자식으로 name2를 class로 가진 모든 요소들을 선택한다.#id#firstnameid="firstname"인 요소를 선택한다.**모든 요소를 선택한다.elementp모든 요소를 선택한다.element.classp.introclass="intro"인 요소를 모두 선택한다.element,elem..

1. localStorage브라우저에 따라서 10~20MB까지의 데이터를 저장할 수 있다.localStorage는 key-value형식으로 key와 value모두 UTF-16 문자열인 (탭을 닫아도 유지되는)영구적인 저장장치이다.localStorage는 유저가 브라우저에서 영구적인 데이터 저장을 막는 등 보안 설정에 위배되면 에러를 반환한다.domain이 다르면 데이터에 접근할 수 없다.메소드설명localStorage.setItem("myCat", "Tom");현재 도메인의 지역 저장 장치에 데이터 추가const cat = localStorage.getItem("myCat");해당 데이터 얻기localStorage.removeItem("myCat");해당 데이터 삭제localStorage.clear();..

canvas를 이용해 웹 게임을 만들다 보면, 해당 게임이 몇 프레임으로 화면에 주사되고있는지 궁금해진다.60fps모니터면 60fps를, 144fps 모니터면 144fps를 주사하여 부드러운 화면 주사율을 내보내고 싶다. 하지만 항상 canvas를 사용해 웹 게임을 만들 때마다 이상하게 60fps, 144fps에 못미치는 프레임인 것 같았다. 막연하게 뭔가 렉걸리는 듯하다는 느낌만 받았었지만, 측정 방법도 모르고 그냥 그려려니 했다. 그치만 sparebeat라는 웹 리듬게임을 해보니 굉장히 스무스하게 화면이 주사되는것이었다! 내가 만든 리듬게임은 뚝뚝 끊기는 느낌인데... 느낌으로 판단하지 말고 이제 정확한 측정방법을 통해 몇 프레임인지 알아내고, 어떻게 해야 프레임을 보장할 수 있는지 알아보자. 프레임..

브라우저 기본 구조 User Interface 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스 Browser Engine 유저인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 Rendering Engine HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 Data Storage localStorage나 Cookie같이 보조기억장치에 데이터를 저장하는 파트 Networking 각종 네트워크 요청을 수행하는 네트워킹 파트Javascript Interpreter자바스크립트 코드를 실행하는 해석기UI Backend체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트 렌더링 순서1. DOM 트리 생성html문서를 tokeniz..

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

크롬 개발자도구는 구글 크롬 브라우저에 직접 내장된 웹 개발자 도구 집합이다. 1. ElementsView DOM nodesinspect특정 DOM node를 보고싶다면,1) 우클릭-inspect를 클릭한다.2) 개발자도구의 맨 왼쪽 위 inspect아이콘을 클릭 후 node를 선택한다.scroll into viewDOM 트리를 보고있을 때, DOM node가 화면에 보이지 않을 때, node우클릭 - scroll into view를 누르면 해당 위치로 화면이 이동하게 된다.search for nodes문자열, css selector, XPath selector로 DOM tree를 탐색할 수 있다.Elements패널에 커서를 올려두고, Ctrl+F를 누르면 검색할 수 있는 창이 나온다.Edit the D..