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 Webkit";

    // public prototype members

    return {

        getBrowser: function () {

            return browser;

        }

    };

}());

 

 

ES6 

class Gadget {

var name = 'iPod'

getName() {

return name; 

}



static getBrowser() {

  var browser = "Mobile Webkit";

  return browser;

  }

}

 

 

ES2021+

class Gadget {

  #name = 'iPod'

  getName() {

  return name; 

  }
}

 

참조: 

http://www.2ality.com/2016/01/private-data-classes.html

화면 영역에서 클릭한 영역마다 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]+)/)[1]
출력: GMT+0900

 

 

참고:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset

2. http://stackoverflow.com/questions/1091372/getting-the-clients-timezone-in-javascript

 

기존 JavaScript 코드베이스를 TypeScript로 통합하기

기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.


TypeScript 설정 추가

tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.

{
  "compilerOptions": {
    "allowJs": true,  // JavaScript 파일을 포함
    "checkJs": false  // JavaScript 파일의 타입 검사 비활성화
  }
}

주요 효과

  • allowJs: TypeScript 프로젝트에 JavaScript 파일을 포함할 수 있습니다.
  • checkJs: JavaScript 파일에 대해 타입 검사를 하지 않습니다.

기존 모듈의 사용

만약 a.js 파일이 아래와 같이 정의되어 있다면:

a.js

function hey() {
    console.log("hey");
}
export { hey };

이를 TypeScript에서 사용하는 방법은 다음과 같습니다.

main.ts

1. ES 모듈 방식

import * as moduleA from './a'; // 또는 명시적으로 상대 경로 작성
moduleA.hey();

2. CommonJS 스타일

const moduleA = require('./a');
moduleA.hey();

더 TypeScript스러운 방법으로 사용하기

1. .d.ts 파일로 타입 정의 추가

JavaScript 모듈의 타입을 정의하면 TypeScript 코드에서 안전하게 사용할 수 있습니다.

a.d.ts

declare module './a' {
    export function hey(): void;
}

이렇게 하면 TypeScript는 a.js를 사용할 때 타입 정보를 제공합니다.


2. 타입 정의가 포함된 라이브러리 사용

써드파티 JavaScript 라이브러리를 사용할 때는 이미 제공된 타입 정의를 활용할 수 있습니다. 타입 정의는 @types/ 패키지를 통해 설치 가능합니다.

npm install --save-dev @types/library-name

이후 TypeScript에서 바로 타입 정보를 활용할 수 있습니다.


3. ES 모듈로 변환

기존 JavaScript 코드를 TypeScript와 자연스럽게 동작하도록 리팩토링할 수도 있습니다.

기존 JavaScript (a.js)

export function hey() {
    console.log("hey");
}

TypeScript에서 사용 (main.ts)

import { hey } from './a';
hey();

추가 참고 자료

  1. 공식 TypeScript 문서 - JavaScript 파일 포함하기
  2. TypeScript에서 JavaScript 모듈 사용하기
  3. TypeScript 공식 문서 - Declaration Files

마무리

위 방법들을 활용하면 기존 JavaScript 코드베이스를 TypeScript로 점진적으로 통합할 수 있습니다.
다음 단계로는:

  1. 타입 정의를 작성하거나
  2. @types 패키지를 활용해 써드파티 라이브러리를 더 TypeScript스럽게 사용할 수 있습니다.

'Front-End > Java Script' 카테고리의 다른 글

Webpack 유용한 플러그인 모음  (0) 2016.10.30
현재 브라우저의 UTC(UTC) 타임 구하기  (0) 2016.10.05
자바스크립트 모듈 번들러 (1) - webpack  (0) 2016.07.25
ES6 문법 Cheat Sheet  (0) 2016.04.21
JavaScript 객체  (0) 2014.11.06

Webpack 정리노트


1. 개념 

2. webpack 간단 사용법

3. 설정 파일 사용법

4. CSS 사용법 (나중에 다른 파일형식으로 응용가능) 

5. ES6 사용법

6. 외부 모듈 사용법 

7. 다중 output 파일 생성법

8. 파일 관리

9. asset 파일 관리

10. sourcemap 생성

11. ES7 .. 더넘어서


1. Webpack 간단 개념


Image result for webpack


위의 그림으로 부가적으로 설명하자면 여러가지의 의존성을 가진 파일들을 모아 한가지 파일로 만들어주는 역할을 한다.

기존 browser 내 자바스크립트에서 모듈기능의 부재로 인해 많은 방법론들과 라이브러리들 탄생했는데 ( requirejs, commonjs, AMD..) 이런 문제를 해결해주는 방법의 하나로 보면 된다. 


번들링하는 과정중에 transpiling 을 지원하므로 ES6 문법을 활용한 코딩도 가능하다. 

자바스크립트파일뿐만 아니라 css, sass, image files 등 다른 파일들에 대한 묶음(bundle)기능도 제공한다. 


- 어디에 사용해야 할까?

프론트 엔드 프레임워크와 함께 SPA 에서 프론트 엔드를 헤비하게 사용하는 곳에서 엄청난 강점을 발휘

반면 프론트 엔드 코드 베이스가 크지 않은 곳에서는 overhead로 다가올수도 있다. (설정하는데 한세월...)


이렇게 하면 사실 잘다가오지 않아서 실제적인 예를 들고자 한다.


추가 참고:

http://blog.andrewray.me/webpack-when-to-use-and-why/


2. Webpack 간단사용법 


  •  webpack 설치

npm install webpack -g  


  • 모듈파일 작성

1. 모듈 참조 파일 작성

moduleA.js

moduleB.js


entry.js


import a from "./moduleA";

import b from "./moduleB";


* npm에서 다운로드 받은 파일 (node_modules)에 있는 파일들은


import dfd from "module"; 식으로 사용 가능


2. webpack entry.js bundle.js


bundle.js 파일 생성


bundle.js안에 moduleA와 moduleB를 사용할수 있다.


  • webpack 을 통한 묶음


 [--watch]



3. 설정 파일 사용법


위의 같은 경우같이 계속해서 수동으로 파일 위치를 지정해주는 것은 비효율적이므로 webpack.config.js 설정 파일만들어 자동화가 가능하다. 


기본 설정파일 구조



module.exports = { context: path.resolve(__dirname, './src'), // 소스 디렉토리 루트 폴더 위치 entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' } };


webpack 명령어를 치면 기본적으로 webpack.config.js 파일을 찾는다. 하지만 보통 프로덕션, 테스팅, 로컬 환경에 따라 다른 파일을 쓰게 되므로

다른 설정파일을 쓰고 싶은 경우 

webpack --config 설정파일경로 로 설정한다 


* __dirname은 현재 폴더를 나타낸다.


4. CSS 사용법

webpack 은 javascript 모듈뿐만 아니라 css도 지원한다. 


- CSS

파일안에 CSS 추가파일 참조


ES5 버전 이하 

require('!style!css!./style.css');


ES6 이후

import './style.sass';


- SASS

npm install sass-loader node-sass --save-dev

require('!style!css!sass!./style.sass');


module.exports = {

  entry: './entry.js',

  output: {

    path: __dirname,

    filename: 'bundle.js'

  },

  module: {

    loaders: [

      { test: /\.sass$/, loader: 'style!css!sass' }

    ]

  }

};


- LESS

npm install less-loader less --save-dev


module.exports = {

  module: {

    loaders: [

      {

        test: /\.less$/,

        loader: "style!css!less"

      }

    ]

  }

};


* 설정파일에 CSS 설정 추가법



5. ES6 사용법 


ES6의 경우는 사용법이 더 간결하다. ES6자체 모듈 기능을 활용하자.

( ES5까지의 노가다 코딩 과정을 ES6과정을 통해 확연히 줄이자 ES6 만세! ) 


webpack 로더 추가 


npm install --save babel-loader babel-core babel-preset-es2015


module.exports = {

  entry: './entry.js',

  output: {

    path: __dirname,

    filename: 'src/js/dist/bundle.js'

  },

  module: {

       loaders: [

            {

                test: /\.js$/,

                loader: 'babel',

                exclude: /(node_modules|bower_components)/,

                query: {

                    presets: ['es2015']

                }

            }

       ]

  }

};




6. 외부 모듈 사용법


{

    output: {

        // export itself to a global var

        libraryTarget: "var",

        // name of the global var: "Foo"

        library: "Foo"

    },

    externals: {

        // require("jquery") is external and available

        //  on the global var jQuery

        "jquery": "jQuery"

    }

}


위와 같은 설정을 할시에 jquery 파일은 어디에 위치해 놓아야 하는가?


혹은 ES6의 경우 npm 설치시에 import  설정해주면 바로 작동된다 


예를들어 jquery 사용시 파일안에 


import $ from 'jquery'; 로 사용 가능





* 추가 참고: 

1. https://webpack.github.io/docs/library-and-externals.html

2. http://stackoverflow.com/questions/22530254/webpack-and-external-libraries

3. http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack


7. 다중 output 파일 생성법


인풋파일 (엔트리 포인트)가 여러가지일 경우 대처 (https://webpack.github.io/docs/multiple-entry-points.html)


SPA(Single Page Application) 어플케이션이 아니라 전통의 웹 어플리케이션을 확장하다보면 하나의 아웃푸 파일에 모든 파일에 집어 넣기 보다는 필요한 모듈만 바꾸어서 아우풋 파일을 내야하는 경우가 많다. 


웹팩 페이지의 다중 output 파일 기본설정


{

    entry: {

        a: "./a",

        b: "./b",

        c: ["./c", "./d"]

    },

    output: {

        path: path.join(__dirname, "dist"),

        filename: "[name].entry.js"

    }

}


여기서 웹팩에서 



* 추가 참고: 

1. https://github.com/webpack/webpack/issues/1189

2. https://webpack.github.io/docs/configuration.html



8. CSS외에 다른 로더들도 사용해보자 (스킵 가능)


필자는 C#의 창시자 엔더스 헤일즈버그를 좋아한다. 그러므로 그가 참여한 프로젝트인 Typescript 또한 주목하고 있었고 현재 프로젝트에는 적용하고 못하고 있지만 군침만흘리고 있다. webpack 에서도 typescript 및 다른 css trasnpiler 들을 알아보자. 각각의 프로젝트에 맞는 로더를 구글링해서 아래와 비슷한 형식으로 추가해주면 된다.


$ npm install ts-loader --save


module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}


typescript 는 tsconfig.json 파일을 설정파일로 사용한다. 

{

  "compilerOptions": {

    "target": "es5",

    "sourceMap": true

  },

  "exclude": [

    "node_modules"

  ]

}


** exlcude 설정 

exclude 를 설정하게 되면 exclude 경로안에 파일들은 제외하고 컴파일한다. 



* 추가 참고:

1. http://www.jbrantly.com/typescript-and-webpack

2. https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

3. https://github.com/TypeStrong/ts-loader



9. asset 파일 관리

webpack 이 이미지파일도 모듈단위로 bundling 을 할수 있다. (이쯤되면 webpack이 못하는게 뭐야?)

예제로 그림파일을 첨부하는 방법을 설명한다. 먼저 에셋 파일들을 처리할수 있는 filter-loader 를 설치하자 



* 추가 참고:



10. Uglify

자바스크립트를 최소화하고 싶을때 쓰는 것.

Plugin 형태로 매우 쉽게 사용가능하다. 아래와 같이 설정 파일에 덧붙여주자


  plugins: [

      new webpack.optimize.UglifyJsPlugin()

  ]


이쯤되면 loader 와 plugin 의 차이점이 무엇인지 궁금할 것이다. (본인 스스로에서 나온 경함담..)


11. soucremap 생성법

sourcemap 은 옵션을 추가해서 간단하게 생성가능하다. Happy Javascript Debugging


{

devtool: 'source-map'

}



12. ES7 



추가 참고: 

http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/



지금까지 다읽은 분들은 최종 설정파일들이 어떤식으로 궁금한지도 궁금할 것이다. 

(부분 소스코드만으로는 이해하기 어려운 경우르 많이 겪었다.) 

그래서 지금까지 차근 차근 읽어오면서 설정을 추가하면 아래와 같은 설정파일이 나올것이다.



** 유용한 플러그인 

https://www.npmjs.com/package/webpack-fail-plugin


** 웹팩 플러그인 리스트 

https://github.com/webpack/docs/wiki/list-of-plugins



전체참고:

1. https://webpack.github.io/

2. http://d2.naver.com/helloworld/0239818

3. http://hyunseob.github.io/2016/04/03/webpack-practical-guide/

4. https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed#.qbdn1ed8y

5. https://github.com/petehunt/webpack-howto

6. https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.2d2825m5u

7. https://web-design-weekly.com/2014/09/24/diving-webpack/ 

8. https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.cq6srzptu


* browserlify 유저들을 위한 webpack 으로 전환하기 

http://webpack.github.io/docs/webpack-for-browserify-users.html


* gulp 와 webpack 함께 사용하기




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, color) {
this.name = name;
this.price = price;
this.color = color;
this.info = function() {

}
}

var car1 = new Car("쏘나타", 100, "검은색");
var car2 = new Car("그랜져", 2000, "흰색");


'Front-End > Java Script' 카테고리의 다른 글

자바스크립트 모듈 번들러 (1) - webpack  (0) 2016.07.25
ES6 문법 Cheat Sheet  (0) 2016.04.21
JavaScript 변수 타입  (0) 2014.11.06
javascript 기본 alert  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06

JavaScript의 데이터 타입


// 1. 문자열

var variable1 = "홍길동";

// 2. 숫자

var variable2 = 10;

// 3. 논리

var variable3 = true;

// 4.undefined

var variable4;

// 5. null

var variable5 = null;

// 6. 함수

var variable6 = function() {

}

// 7. 객체

var variable7 = {}

// 8. 객체(배열)

var variable8 = [10, "홍길동", true, {}];


//function

// 함수 - 익명함수(람다함수)

// 이름이 존재하지 않기 대문에 

// 변수에 저장하'거나, 혹은 다른 함수의 인자로

// 함수가 사용되요!!

// 함수 - 선언적 함수

// first-class function(일급함수)

function myFunc (var1, var2) {

}


'Front-End > Java Script' 카테고리의 다른 글

ES6 문법 Cheat Sheet  (0) 2016.04.21
JavaScript 객체  (0) 2014.11.06
javascript 기본 alert  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06
Java Script 용도와 실행순서  (0) 2014.11.06
// blocking method

alert("화면에 경고창이 떠요");
alert는 실행화면 중지

//consol창에 출력'!!
console.log("이건 콘솔창에 출력되요");


'Front-End > Java Script' 카테고리의 다른 글

JavaScript 객체  (0) 2014.11.06
JavaScript 변수 타입  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06
Java Script 용도와 실행순서  (0) 2014.11.06
JavaScript/Jquery 개발을 도와주는 IDE  (0) 2014.11.06

+ Recent posts