대가는 결과를 만든다

기본적인 내용은 제외하고, 개인적으로 기록하고픈 내용들만 정리한다. 1. String 1) startsWith() , endsWith() : 앞/뒤로 일치하는 문자열 판단 2) includes() : 문자열 포함여부 판단 let str = "A is B"; str.startsWith("A");//true str.endsWith("B");//true str.includes("is");//true 2. Array 1) for in의 문제 보완한 for of //for-in의 경우 index로 순회 : 상위 prototype의 값도 포함될 수 있음 let data = ["A","B"]; Array.prototype.getIndex = "C"; for(let index in data){ console.log(d..

웹페이지에서 스크롤을 내리다가 맨 위쪽으로 한번에 이동하는 go top scroll button을 구현하는데, 대부분의 구현 방식이 jQuery를 이용하고 있다. CSR 박식 프로젝트를 진행하면서 무거운 라이브러리에 속하는 jQuery를 이용하지 않는 추세라 jQuery가 아닌 순수 자바스크립트로 구현하는 방법을 찾다가 기록 용으로 남겨 놓는다. 물론 스크롤 애니메이션 관련 라이브러리들도 많다. * code내에서 document.body => document.documentElement 로 수정 필요 document.getElementsByTagName('button')[0].onclick = function () { scrollTo(document.documentElement, 0, 1250); } f..

Webpack을 이용하여 현대 웹app을 개발하면서는 es6 사용을 하게 되었지만, pure한 javascript 표준 라이브러리를 구현할 기회가 생기게 되면서 es6에서 class처럼 사용했던 문법과 기존 전통적인 문법을 비교할 일이 생겨서 참고했던 잘 비교해둔 사이트를 스크랩 한다. https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420 “Super” and “Extends” In JavaScript ES6 - Understanding The Tough Parts ES6 has made JavaScript l..

개발중인 web 3D viewer에서 용량이 큰 3D model을 load하는 과정에서 웹페이지가 freezing되는 현상이 발생했다. 이것을 해결하기 위해, 웹에서 백그라운드 스레드를 사용하여 해결하고자 리서치하고 간단한 내용만 정리한다. Web Worker란? 웹에서의 백그라운드 스레드 이다. 메인 실행 스레드와 별도로 백그라운드에서 실행되는 HTML 페이지로부터 수행되는 javascript 메인스레드와 Workers는 메세지를 통해 데이터를 교환한다. 이 Workers는 메인 실행 스레드와 구별되어 실행되므로, Web Workers를 활용하여 Instance Blocking 없이 process intensive task들을 처리할 수 있다. 1) worker에서는 document, window와 같..

vue, webpack을 이용하여 개발을 하면서 ES6 문법 공부가 불가피해짐..기본적인 module 문법과 ES6의 문법 차이점을 비교하며 정리해본다! 1. module 문법 1) named exports : 모듈 중 일부만 필요로 하는 경우가 있을 때 사용 (하나의 함수 혹은 하나의 클래스만 사용하고 싶은 경우) //------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 가능한 사용 형식 a) - 일부만 import하여 사용 //------ main.js ------ ..

참고 블로그: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67: http://insanehong.kr/post/javascript-prototype/ 자바스크립트는 프로토타입 기반 언어: 자바크립트는 class라는 개념이 없음. 대신 Prototype이 존재 Prototype의 사용 예시function Person() { this.eyes = 2; this.nose = 1; }var kim = new Person(); var park = new Person();console.log(kim.eyes); // => 2 console.log(kim.nose); // => 1cons..

jQuery를 이용해 click 이벤트를 정의할 때 이렇게 사용하곤 한다. $("#id").on('click', function() { //do something } 하지만 이 클릭 이벤트를 변경 하고자 할 때 다시 정의하면 이벤트가 대체 되는 것이 아닌 중복이 된다. 그래서 누적된 모든 이벤트가 다 실행되는 불상사를 겪는다. 그래서 꼭 off() 를 이용하여 중복을 방지해야한다. 모든 event를 제거해주거나 $("#id").off().on('click', function() { //do something } " "안에 해당 event만 제거해서 등록할 수 있다. $("#id").off("click").on('click', function() { //do something }

Navigator Object Docs : https://www.w3schools.com/jsref/obj_navigator.asp - 사용자 브라우저의 정보를 포함하고 있는 obect appCodeNameReturns the code name of the browserappNameReturns the name of the browserappVersionReturns the version information of the browsercookieEnabledDetermines whether cookies are enabled in the browsergeolocationReturns a Geolocation object that can be used to locate the user's positionl..