주변에 보면 Angular 를 하고는 싶으나 진입이 어렵다고들 하십니다.

타입스크립트 ES6 등등 처음 접해보는 개념들과 용어들, 그리고 처음에 뭔가 셋팅이 많이 필요해서 일지도 모릅니다.


(보통 AngularJS 1.x 는 AngularJS로 Angular2.x이후는 Angular로 불립니다.)


Angular-CLI 를 이용하면 Angular2 프로젝트 초기 셋팅에 들어가는 수고를 덜 수 있습니다.

따라서 처음에는 Angular CLI 로 시작해보시길 권장합니다

https://github.com/angular/angular-cli








1. NPM을 이용해서 angular-cli 를 설치

 npm install -g angular-cli 


*npm 이 없으시다면, NODE js를 설치하세요


2. Angular 프로젝트 생성

 ng new {PROJECT_NAME}


3. Angular 프로젝트 실행

 cd {PROJECT_NAME}

 ng serve


이제 브라우저에서 http://localhost:4200/ 으로 접속해보시면 app Works! 메세지를 보실 수 있을 겁니다.















콘솔에 익숙하지 않으신분들 위해 IntellJ 를 이용하여 Angular CLI를 사용해보겠습니다.

JetBrains에서는 아래와 같이 안내를 해주고 있습니다.


https://www.jetbrains.com/help/idea/2016.3/using-angular-cli.html



(사전작업) Plugins 에서 AngularJS와 NodeJS를 설치합니다. 

로컬에 node가 없으신분은 최신버젼 Node JS도 설치해줍니다. ( https://nodejs.org/ko )




1. Languages & Frameworks > Node.js and NPM 에서 angular-cli 를 설치합니다.

(+ 를 클릭해서 angular-cli 검색한 뒤 Install Package 로 설치합니다.)




2. 이제 New > Project 로 angular-cli 프로젝트를 생성합니다.




필요 모듈 다운로드 및 설정중



새 프로젝트 설정 완료




3. 신규 생성된 Angular 프로젝트를 실행해보겠습니다.

하단의 npm탭을 클릭한 뒤 start에서 Run 'start' 실행합니다



끝났습니다~!

브라우저에서 http://localhost:4200 으로 접속해봅니다.

 













추가로 Intellij와 NetBeans에서 Angular2 사용 비교 포스팅 링크 첨부합니다.


https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html#intellij








저작자 표시 비영리 변경 금지
신고

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Spring boot 를 Intellij15 에서 실행하니 hot swapping 이 안되서 한참 찾아봄

tomcat 프로젝트로 변경해서는 되는데 bootRun으로 하니 리소스나 html, class 수정해도 반응이 없음

IDE 설정을 변경하고 나니 제대로 수행됨



1. Gradle Settings

buildscript {  
  ext {
    springBootVersion = '1.3.0.RELEASE'
  }
  repositories {
    mavenCentral()
  }
  dependencies {
    classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    classpath 'org.springframework:springloaded:1.2.5.RELEASE'
  }
}


idea {  
  module {
    inheritOutputDirs = false
    outputDir = file("$buildDir/classes/main/")
  }
}


gradle idea




2. IDE Settings

preferences > build,Execution, Deployment > Compiler > check "Make project automatically"


Help > Find Action > search "Registry" > check "compiler.automake.allow.when.app.running"


gradle idea bootRun



참고 :http://www.greggbolinger.com/spring-boot-live-reload-with-gradle-and-intellij-15/

저작자 표시 비영리 변경 금지
신고

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

흥미로운 ‘피리부는 사나이’, 빠진 한 조각도 채울까


[엔터미디어=정덕현] 

의문의 ‘피리부는 사나이’와 협상전문가의 대결. tvN 월화극 <피리부는 사나이>의 첫 회는 독일의 전래동화인 ‘피리부는 사나이’에 대한 이야기에서 시작했다. 약속을 지키지 않은 대가로 피리부는 사나이가 피리를 불어 아이들을 데리고 사라지는 그 이야기. 그 이야기가 내레이션으로 흘러나오는 가운데 펼쳐지는 광경은 무슨 일인지 건물을 점거하고 투쟁하는 사람들과 진압하는 전경들의 모습이다.

이 한 장면은 이 드라마의 많은 이야기들을 전해준다. ‘피리부는 사나이’가 어떤 존재인가를. 그는 우리 사회 현실 속에 존재하는 부조리가 잉태한 괴물이다. 그는 피리를 불어 아이들을 조종(?)했던 것처럼 그 부조리한 현실 앞에 분노하는 사람들을 조종해 테러를 자행하게 만든다. 아마도 그 스스로도 그 잘못된 현실로 인해 지울 수 없는 상처를 입은 인물일 것이다.


그와 대결하는 협상전문가 주성찬(신하균)은 ‘피리부는 사나이’가 그의 연인을 인질로 삼게 만든 후 자신의 실체를 밝히라는 요구에 스스로를 ‘영웅’이 아니라 ‘사기꾼’이자 ‘협잡꾼’이라고 말한다. 필리핀에 억류된 인질들을 협상을 통해 구해내는 과정에서 한 사람을 희생하게 만들었던 사실을 토로한다. 사람을 사람으로 보기보다는 숫자로 봐왔던 자신을 털어놓으며 참회하는 모습을 보인다.




결국 인질극을 벌인 테러범에 의해 주성찬의 연인과 또 한명의 협상전문가가 될 여명하(조윤희)의 삼촌이 희생당한다. <피리부는 사나이>의 첫 회가 보여준 건 결국 자신의 연인이 협상 과정에서 죽음을 맞게 되면서 각성하게 될 주성찬과 삼촌의 죽음을 통해 협상전문가로 다시 태어날 여명하의 등장이다.




tvN 장르 드라마가 그래왔듯이 <피리부는 사나이>는 영화적인 스케일의 영상과 빠른 스토리 전개를 보여준다. 협상전문가라는 지금껏 드라마에서 잘 다뤄지지 않았던 인물군의 소재도 나쁘지 않다. 하지만 어딘지 깊은 몰입감을 느끼기에는 부족한 듯한 느낌을 갖게 된다. <시그널>이 만들었던 그 몰입감과 비교해보면 확실히 무언가가 빠져 있는 듯한 인상이 짙다. 도대체 그 빠진 한 조각은 무엇일까.

첫 회여서 주인공인 주성찬과 여명하의 캐릭터에 집중하다 보니 테러에 의해 희생당한 인물들의 면면이 자세히 드러나지 않았다. 필리핀에 억류되어 협상과정에서 죽게 된 희생자가 어떤 사람이었는지 또 그 희생자의 동생은 어떤 사람인지가 첫 회의 내용 중에는 빠져있다. 그저 전형화된 억류된 인물들과 테러범 정도로 그려진 것. 마치 주성찬이 협상 과정에서 인물을 숫자로 바라보는 것처럼, 첫 회의 희생자들은 생생히 살아있는 사람이라기보다는 주인공들을 설명하기 위해 내세워진 숫자처럼 보인다는 점이다.


아마도 첫 회이고 도입부이기 때문에 희생자들까지 그 세세한 스토리를 그려내지 못했을 지도 모른다. 하지만 <시그널>이 그랬던 것처럼 <피리부는 사나이>가 더 깊은 몰입감을 만들어내려면 주인공들인 주성찬과 여명하의 협상전문가로의 면면만큼 무고한 희생자들에 대한 깊은 공감대가 필요하다. 그게 아니라면 단순한 협상전문가의 영웅담에 그칠 수 있다.



저작자 표시 비영리 변경 금지
신고

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

[엑스포츠뉴스=정지원 기자] 가수 이효리의 근황이 공개됐다.
 
이효리는 지난 7일 제주에서 진행된 하루하나 플리마켓에 참여, 직접 만든 그릇과 그림 등을 판매하며 도민들과 함께 하는 시간을 가졌다.
 
이 사실은 몇몇 네티즌들을 통해 SNS와 커뮤니티에 빠르게 퍼졌고, 이를 통해 이효리의 근황도 함께 공개됐다.

이효리는 여전히 내추럴한 모습을 선보였으며 직접 물건 판매에 나서는 모습까지 공개돼 반가움을 더했다. 수더분하게 도민들과 어울리는 모습, 화장기 없이도 아름다운 미모가 눈에 띈다.
 
한편 이효리는 2013년 9월 이상순과 제주도 신혼집에서 결혼했다. 이후 제주도와 서울을 오가며 SBS '매직아이' 등 방송 생활을 이어왔으나 방송 종영 후 별다른 활동 없이 제주 생활을 이어오고 있다.

http://media.daum.net/entertain/star/newsview?newsid=20160308073920864


저작자 표시 비영리 변경 금지
신고

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

맥북 설치 후 .bash_profile 설정하기

vi ~/.bash_profile


export M2_HOME=/Users/minho/dev/maven

export M2=$M2_HOME/bin

export PATH=$M2:/usr/local/mysql/bin:$PATH



alias ls="ls -v"

alias ll="ls -alv"




source ~/.bash.profile

저작자 표시 비영리 변경 금지
신고

'프로그래밍 > 개발환경' 카테고리의 다른 글

.bash_profile for MacBook  (0) 2015.05.04
mac pip easy_install 설치  (0) 2015.04.14
github 윈도우에서 ssh 설정하기  (0) 2014.09.16
STS.ini 백업  (0) 2014.08.29

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret
아래 명령을 순서대로 실행
curl -O http://python-distribute.org/distribute_setup.py
sudo python distribute_setup.py
sudo rm distribute_setup.py
sudo easy_install pip


저작자 표시 비영리 변경 금지
신고

'프로그래밍 > 개발환경' 카테고리의 다른 글

.bash_profile for MacBook  (0) 2015.05.04
mac pip easy_install 설치  (0) 2015.04.14
github 윈도우에서 ssh 설정하기  (0) 2014.09.16
STS.ini 백업  (0) 2014.08.29

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret


1. Java 버젼별 히스토리

http://en.wikipedia.org/wiki/Java_version_history

- Java5 (2004~2009)

- Java6 (2006~2013)

- Java7 (2011~ )

- Java8 (2014~ )

- Java9 (2016예정)

- Java10 (2018예정)



2. Java 버젼별 주요 기능
2.1 Java5 (Tiger)
- Generics
- Enhanced for Loop (foreach)
- Autoboxing/Unboxing
- Type-safe Enums
- Varargs
- Static Import
- Annotions (Metadata)
- Formatted IO
- Concurrent API (java.util.concurrent)
- Thread Priority Changes
- Garbage collection ergonomics
- StringBuilder class
- StringBuilder is almost always faster than StringBuffer
- StringBuffer unsynchronized version



2.2 Java6 (Mustang)
- JAX-WS (Web Services Client)
- javax.swing.GroupLayout
- Password prompting
- Free disk-space API
- Classpath wildcards
- Annotation processing done by javac
- Solaris Dynamic Tracing (DTrace) Support)
- jhat QQL (Jmap for heap dump)
- JConsole plugin API
- Monitoring and Management for the Java Platform
- OOME Handling
- Script Langauge Support
- JDBC 4.0 API


2.3 Java7 (Dolphin)
- Garbage-First Collector
- Java Programming Language
- Binary Literals
- Strings in switch Statements
- The try-with-resource Statement
- Catching Multiple Exception Types and Rethrowing Exceptions with Improved Type Checking
- Underscores in Numeric Literals
- Type Inference For Generic Instance Creation
- Improved Compiler Warnings and Errors When Using Non-Reifiable Formal Parameters with Varargs Methods
- NIO 2.0
- Fork-Join
- Dynamic Language Support
- JDBC 4.1 API


2.4 Java8 
- Remove the Permanent Generation
Small VM
Define a standard API for Base64 encoding and decoding
Provide stronger Password-Based-Encryption (PBE) algorithm implementations in the SunJCE provider
Parallel array sorting
Interface improvements (static method, defender methods)
Functional interfaces
Lambdas
Stream
New date/time
Generic type inference improvements
Nashorn JavaScript Engine


3. Java 버젼별 성능비교

http://geeknizer.com/java-7-whats-new-performance-benchmark-1-5-1-6-1-7/#ixzz1ezWIHUc8

- Java5 -> Java6 : 18% 성능향상

- Java6 -> Java7 : 46% 성능향상

- 낮을 수록 좋은 성능




http://www.optaplanner.org/blog/2014/03/20/HowMuchFasterIsJava8.html

- Java6 -> Java7 : 평균 16% 성능향상

- Java7 -> Java8 : 평균 1% 성능향상








Java8 Reference


저작자 표시 비영리 변경 금지
신고

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

1 – Don’t forget var keyword when assigning a variable’s value for the first time.

Assignment to an undeclared variable automatically results in a global variable being created. Avoid global variables.

2 – use === instead of ==

The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==.

[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false 

3 – undefinednull, 0, falseNaN'' (empty string) are all falsy.
4 – Use Semicolons for line termination

The use of semi-colons for line termination is a good practice. You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser. For more details about why you should use semi-colons, take a look to this artice: http://davidwalsh.name/javascript-semicolons.

5 – Create an object constructor

function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;        
}  

var Saad = new Person("Saad", "Mousliki");

6 – Be careful when using typeofinstanceof and constructor.

  • typeof : a JavaScript unary operator used to  return a string that represents the primitive type of a variable,  don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”.
  • constructor : is a property of the internal prototype property, which could be overridden by code.
  • instanceof : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.
var arr = ["a", "b", "c"];
typeof arr;   // return "object" 
arr  instanceof Array // true
arr.constructor();  //[]

7 – Create a Self-calling Function

This is often called a Self-Invoked Anonymous Function or Immediately Invoked Function Expression (IIFE). It is a function that executes automatically when you create it, and has the following form:

(function(){
    // some private code that will be executed automatically
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

8 – Get a random item from an array

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

9 – Get a random number in a specific range

This code snippet can be useful when trying to generate fake data for testing purposes, such as a salary between min and max.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

10 – Generate an array of numbers with numbers from 0 to max

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 

11 – Generate a random set of alphanumeric characters

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);

}

12 – Shuffle an array of numbers

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

A better option could be to implement a random sort order by code (e.g. : Fisher-Yates shuffle), than using the native sort JavaScript function. For more details take a look to this discussion.

13 – A string trim function

The classic trim function of Java, C#, PHP and many other language that remove whitespace from a string doesn’t exist in JavaScript, so we could add it to theString object.

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};  

A native implementation of the trim() function is available in the recent JavaScript engines.

14 – Append an array to another array

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

15 – Transform the arguments object into an array

var argArray = Array.prototype.slice.call(arguments);

16 – Verify that a given argument is a number

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

17 – Verify that a given argument is an array

function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

Note that if the toString() method is overridden, you will not get the expected result using this trick.

Or use…

Array.isArray(obj); // its a new Array method

You could also use instanceof if you are not working with multiple frames. However, if you have many contexts, you will get a wrong result.

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]  

// instanceof will not work correctly, myArray loses his constructor 
// constructor is not shared between frames
arr instanceof Array; // false

18 – Get the max or the min in an array of numbers

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

19 – Empty an array

var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

20 – Don’t use delete to remove an item from array

Use splice instead of using delete to delete an item from an array. Usingdelete replaces the item with undefined instead of the removing it from the array.

Instead of…

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

Use…

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

The delete method should be used to delete an object property.

21 – Truncate an array using length

Like the previous example of emptying an array, we truncate it using thelength property.

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

As a bonus, if you set the array length to a higher value, the length will be changed and new items will be added with undefined as a value. The array length is not a read only property.

myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined

22 – Use logical AND/ OR for conditions

var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

The logical OR could also be used to set a default value for function argument.

function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

23 – Use the map() function method to loop through an array’s items

var squares = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// squares will be equal to [1, 4, 9, 16] 

24 – Rounding number to N decimal place

var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432

NOTE : the toFixed() function returns a string and not a number.

25 – Floating point problems

0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // is equal to 9007199254740992  
9007199254740992 + 2 // is equal to 9007199254740994

Why does this happen? 0.1 +0.2 is equal to 0.30000000000000004. What you need to know is that all JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard. For more explanation, take a look to this blog post.

You can use toFixed() and toPrecision() to resolve this problem.

26 – Check the properties of an object when using a for-in loop

This code snippet could be useful in order to avoid iterating through the properties from the object’s prototype.

for (var name in object) {  
    if (object.hasOwnProperty(name)) { 
        // do something with name                    
    }  
}

27 – Comma operator

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99

28 – Cache variables that need calculation or querying

In the case of a jQuery selector, we could cache the DOM element.

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');

29 – Verify the argument before passing it to isFinite()

isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10);   // true 
isFinite(undefined);  // false 
isFinite();   // false 
isFinite(null);  // true  !!! 

30 – Avoid negative indexes in arrays

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
numbersArray.splice(from,2);    // will return [5]

Make sure that the arguments passed to splice are not negative.

31 – Serialization and deserialization (working with JSON)

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */ 
var personFromString = JSON.parse(stringFromPerson);  
/* personFromString is equal to person object  */

32 – Avoid the use of eval() or the Function constructor

Use of eval or the Function constructor are expensive operations as each time they are called script engine must convert source code to executable code.

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

33 – Avoid using with() (The good part)

Using with() inserts a variable at the global scope. Thus, if another variable has the same name it could cause confusion and overwrite the value.

34 – Avoid using for-in loop for arrays

Instead of using…

var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}

…it’s better to use…

var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}

As a bonus, the instantiation of i and len is executed once because it’s in the first statement of the for loop. Thsi is faster than using…

for (var i = 0; i < arrayNumbers.length; i++)

Why? The length of the array arrayNumbers is recalculated every time the loop iterates.

NOTE : the issue of recalculating the length in each iteration was fixed in the latest JavaScript engines.

35 – Pass functions, not strings, to setTimeout() and setInterval()

If you pass a string into setTimeout() or setInterval(), the string will be evaluated the same way as with eval, which is slow. Instead of using…

setInterval('doSomethingPeriodically()', 1000);  
setTimeout('doSomethingAfterFiveSeconds()', 5000);

…use…

setInterval(doSomethingPeriodically, 1000);  
setTimeout(doSomethingAfterFiveSeconds, 5000);

36 – Use a switch/case statement instead of a series of if/else

Using switch/case is faster when there are more than 2 cases, and it is more elegant (better organized code). Avoid using it when you have more than 10 cases.

37 – Use switch/case statement with numeric ranges

Using a switch/case statement with numeric ranges is possible with this trick.

function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "not an age";  
            break;  
        case (age >= 50):  
            category = "Old";  
            break;  
        case (age <= 20):  
            category = "Baby";  
            break;  
        default:  
            category = "Young";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // will return "Baby"

38 – Create an object whose prototype is a given object

It’s possible to write a function that creates an object whose prototype is the given argument like this…

function clone(object) {  
    function OneShotConstructor(){}; 
    OneShotConstructor.prototype= object;  
    return new OneShotConstructor(); 
} 
clone(Array).prototype ;  // []

39 – An HTML escaper function

function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", """: "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}

40 – Avoid using try-catch-finally inside a loop

The try-catch-finally construct creates a new variable in the current scope at runtime each time the catch clause is executed where the caught exception object is assigned to a variable.

Instead of using…

var object = ['foo', 'bar'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}

…use…

var object = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
} 

41 – Set timeouts to XMLHttpRequests

You could abort the connection if an XHR takes a long time (for example, due to a network issue), by using setTimeout() with the XHR call.

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  

xhr.send();

As a bonus, you should generally avoid synchronous XHR calls completely.

42 – Deal with WebSocket timeout

Generally when a WebSocket connection is established, a server could time out your connection after 30 seconds of inactivity. The firewall could also time out the connection after a period of inactivity.

To deal with the timeout issue you could send an empty message to the server periodically. To do this, add these two functions to your code: one to keep alive the connection and the other one to cancel the keep alive. Using this trick, you’ll control the timeout.

Add a timerID

var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}

The keepAlive() function should be added at the end of the onOpen()method of the webSocket connection and the cancelKeepAlive() at the end of the onClose() method.

43 – Keep in mind that primitive operations can be faster than function calls. Use VanillaJS.

For example, instead of using…

var min = Math.min(a,b); 
A.push(v);

…use…

var min = a < b ? a : b; 
A[A.length] = v;

44 – Don’t forget to use a code beautifier when coding. Use JSLint and minification (JSMin, for example) before going live.

45 – JavaScript is awesome: Best Resources To Learn JavaScript





출처 : http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

변역 : http://r2fresh.tumblr.com/post/72532030080/45-useful-javascript-tips



저작자 표시 비영리 변경 금지
신고

'프로그래밍 > JavaScript' 카테고리의 다른 글

45 useful javascript tips  (0) 2015.03.30
Javascript 옵저버 패턴  (0) 2014.11.18
javascript 이미지 크기 불러오기  (0) 2014.11.18
Json - Object 간 변환  (0) 2013.05.28

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret


index.html


		
contents
Rev Factory



style.css

html,body {
	padding: 0;
	margin: 0;
	text-align: center;
	height: 100%;
}

body {
	font-size: 12px;
	font-family: "돋음",dotum,sans-serif;
	color: #333;
}

#Head {
	position: relative;
	width: 100%;
	height: 50px;
	overflow: hidden;
	z-index: 10;
	background-color: #eee;
}

#bodyWrap {
	width: 100%;
	min-height: 100%;
	margin: -50px auto -30px;
	background-color: #fbfcfc;
	z-index: 5;
}

/* IE Hack */
*html #bodyWrap { 
	height: 100%;
}

#footerWrap {
	display: block;
	width: 100%;
	line-height: 30px;
	height: 30px;
	background-color: #e9eff6;
	clear: both;
}

#bodyWrap > nav, #bodyWrap > section {
	padding: 50px 0 30px 0;
}

#bodyWrap > nav {
	background: #ffdfee;
	float: left;
	margin-right: -200px;
	width: 200px;
	height: 200px;
}

#bodyWrap > section {
	margin-left: 200px;
	background: #ffffee;
	height: 500px;
}

#bodyWrap > section:after {
	content:" "; 
	display:block; 
	clear:both;
}





참고 블로그 


저작자 표시 비영리 변경 금지
신고

'프로그래밍 > HTML5' 카테고리의 다른 글

HTML5 기본 Layout Template  (0) 2015.03.18
HTML4 와 HTML5의 차이점  (0) 2013.01.19

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Python, C/C++, Java, Scala, Go 로 구현한 Deep Learning 코드

https://github.com/yusugomori/DeepLearning




http://deeplearning.net/tutorial 번역된 블로그
0. 딥러닝 시작하기 : http://neuralix.blogspot.kr/2014/02/0.html
1. 로지스틱 회귀 : http://neuralix.blogspot.kr/2014/01/blog-post_626.html
2. 다층신경망(MLP) : http://neuralix.blogspot.kr/…/mlp-multi-layer-perceptron.ht…
3. 제한된 볼츠만 기계(RBM) : http://neuralix.blogspot.kr/2014/02/draft.html
4. 딥빌리프 네트워크(DBN) : http://neuralix.blogspot.kr/2014/02/4-dbn.html
5. 해밀토니안 몬테-카를로 표본추출 : http://neuralix.blogspot.kr/2014/02/5-hmc.html

저작자 표시 비영리 변경 금지
신고

'프로그래밍 > 기타' 카테고리의 다른 글

Deep Learning Study 참고  (0) 2015.03.15
TopBraid Composer 시작하기 - 1  (3) 2010.03.17
Coding Guideline (Wipro)  (0) 2009.12.09
C++ Coding Guideline (Wipro)  (0) 2009.12.09

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret