ES5.1 var myobj = (function () { // private members var name = "my, oh my"; // implement the public part return { getName: function () { return name; } }; }()); myobj.getName(); // "my, oh my" 메모리 아끼는법 function Gadget() { // private member var name = 'iPod'; // public function this.getName = function () { return name; }; } Gadget.prototype = (function () { // private member var browser = "Mobile..

화면 영역에서 클릭한 영역마다 HTML 엘리멘트가 겹칠경우 겹치 영역에 따라 다른 이벤트를 처리하기 위해서는 이벤트 구분이 필요하다. 픽셀단위로 영역을 짜르는 경우는 해상도가 디바이스마다 다른 요즘환경에서는 사용하기 어려운 방법이기 때문에 다른방법으로 영역을 잡는 방법이 있지 않을까 해서 자바스크립트 레퍼런스를 뒤지던중 아래와 같은 방법으로 처리하게되었다. $("selector").click(function(evt) { var target = evt.originalEvent.target; if (target.nodeName == "CANVAS") { // 클릭한 영역이 캔버스일 경우 처리 } else if (target.nodeName == "DIV") { // 클릭한 영역이 DIV일 경우 처리 } })..

Webpack 을 사용하면서 개인적으로 자주 사용하게 되는 플러그인 목록 정리 1. CommonsChunkPlugin (https://github.com/webpack/docs/wiki/optimization) 멀티페이지 어플리케이션의 경우 공통적으로 사용 되는 모듈들을 추적하여 따로 넣는 경우 참고:1. 웹팩 플러그인 리스트: https://github.com/webpack/docs/wiki/list-of-plugins

전세계를 타겟팅으로 하는 프로그램을 개발하다보면 각각의 지역별로 시간차이를 이용해서 로직을 작성할때가 있습니다. 그때 기준으로 사용되는 GMT 또는 UTC 를 브라우저 상에서 구하는 방법입니다. GMT 와 UTC 는 정확히는 다르지만 표현하는 시간대는 같다고 보시면 됩니다. Browser 상에서 new Date() 를 치면 GMT를 기준으로 시간대가 표시되는데 문자를 추출할수 있습니다. 1. GMT 오프셋 구하기 var offset = new Date().getTimezoneOffset(); console.log(offset); 출력: -540 시간 구하기 offset / 60 출력: -9 2. 현재 GMT 구하기 new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)..

기존 JavaScript 코드베이스를 TypeScript로 통합하기기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.TypeScript 설정 추가tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.{ "compilerOptions": { "allowJs": true, // JavaScript 파일을 포함 "checkJs": false // JavaScript 파일의 타입 검사 비활성화 }}주요 효과allowJs: TypeScript 프로젝..

Webpack 정리노트 1. 개념 2. webpack 간단 사용법3. 설정 파일 사용법4. CSS 사용법 (나중에 다른 파일형식으로 응용가능) 5. ES6 사용법6. 외부 모듈 사용법 7. 다중 output 파일 생성법8. 파일 관리9. asset 파일 관리10. sourcemap 생성11. ES7 .. 더넘어서 1. Webpack 간단 개념 위의 그림으로 부가적으로 설명하자면 여러가지의 의존성을 가진 파일들을 모아 한가지 파일로 만들어주는 역할을 한다.기존 browser 내 자바스크립트에서 모듈기능의 부재로 인해 많은 방법론들과 라이브러리들 탄생했는데 ( requirejs, commonjs, AMD..) 이런 문제를 해결해주는 방법의 하나로 보면 된다. 번들링하는 과정중에 transpiling 을 지원..

ES6 (ECMA Script 2015) 문법 간단 요약본 링크 :https://github.com/lukehoban/es6features

//단일 객체를 만들때 var obj = { //property, method가 '나올수' 있다 // propery와 method를 표현''ㅎ'ㅏ'ㄹ 때는 // key와 value이 쌍으로 표현 myName: "백두산", "myAddress": "대전", myNumber: "비밀", "my hobby": "아우", myInfo: function() { } }//자주 쓰임 console.log(obj["my hobby"]); // 객체를 찍어내고 싶어요 마치 class로부터 // 찍어내듯이!! // JavaScript는 Class 개념이 없어요!! // 선언적 함수를 이용''해서 객체를 생성할 수 있어요!! // 이런 선언적 함수를 생성자 함수라고 불러요!! function Car(name, price, ..

JavaScript의 데이터 타입// 1. 문자열var variable1 = "홍길동";// 2. 숫자var variable2 = 10;// 3. 논리var variable3 = true;// 4.undefinedvar variable4;// 5. nullvar variable5 = null;// 6. 함수var variable6 = function() {}// 7. 객체var variable7 = {}// 8. 객체(배열)var variable8 = [10, "홍길동", true, {}]; //function// 함수 - 익명함수(람다함수)// 이름이 존재하지 않기 대문에 // 변수에 저장하'거나, 혹은 다른 함수의 인자로// 함수가 사용되요!!// 함수 - 선언적 함수// first-class fun..

// blocking methodalert("화면에 경고창이 떠요"); alert는 실행화면 중지//consol창에 출력'!! console.log("이건 콘솔창에 출력되요");