Jan 24, 2017 - Details_of_the_Object_Model[1]

클래스 기반 언어와 프로토 타입 기반 언어(Class-based vs. prototype-based languages)

Java 및 C ++와 같은 클래스 기반 객체 지향 언어는 클래스와 인스턴스라는 두 개의 별개의 엔티티 개념을 기반으로합니다.

클래스는 객체의 특정을 결정짓는 모든 속성들의 집합이다.(java의 메소드와 필드)

인스턴스는 클래스의 인스턴스이다.

아래의 소스를 보면 Animal은 클래스 이고 dog는 Animal의 인스턴스이다.


public class Animal {

}

Animal dog = new Animal();

JavaScript와 같은 프로토 타입 언어는 위에서 처럼 클래스와 인스턴스를 구분짓지 않습니다.

또 상속을 프로토타입 복제를 통해서 구현 하고 있습니다.

Douglas Crockford가 한 말 입니다.

프로토 타입을 만들고 객체를 생성 합니다. JavaScript에서는 객체를 변경할수있으니 인자에 새로운 인스턴스와 메소드를 제공하여 객체를 보강할수도 있다.

심지어 새로 보강된 객체가 새로운 프로토타입이 될수도 있다. 객체가 객체를 상속 받는데 어떤것이 더 객체지향이냐?

위에 내용을 이해하기 위해서 다음 포스트에서 자바스크립트에 상속에 대해서 설명하겠습니다.


var o = {
  a: 2,
  m: function(b){
    return this.a + 1;
  }
};

console.log(o.m()); // 3
// o.m을 호출하면 'this' 는 o를 가리킨다.

var p = Object.create(o);
// p 는 프로토타입을 o로 가지는 오브젝트이다.

p.a = 12; // p 에 'a'라는 새로운 속성을 만들었다.
console.log(p.m()); // 13
// p.m이 호출 될 때 'this' 는 'p'를 가리킨다. 'this.a'는 p의 속성이다.


function Graph() {
  this.vertexes = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v){
    this.vertexes.push(v);
  }
};

var g = new Graph();


참조


Jan 16, 2017 - onclick vs addeventlistener

html에서 onclick 이벤트와 addeventlistener를 사용하는것중 어떤것이 더 좋을까요?


<button onclick="doSomething()">

위에 처럼 예전에는 onclick 속성에 자바스크립트를 써서 코딩을 했습니다.

위에 문제점은 이벤트 처리가 코드 전체에 퍼져있고 한군데서 컨트롤이 되지 않고 외부에서 js파일을 includes할때는 브라우저의 캐싱을 할수 없게 된다는 것이 였습니다.

그래서 아래처럼 바꿨습니다. 바꾸면 캐싱기능 및 소스 컨트롤 외에도 html 코드와 완벽한 분리가 가능합니다.

복잡한 코드를 작성시에 좀 더 코드관리가 쉽게 할수있습니다.(spaghettification vs structure)


<script type="text/javascript">
  document.getElementById("test").onclick = doSomething;
    function doSomething() {
      alert("something!");
    }
</script>
<button id="test">

그럼 onclick 에서 이벤트를 주는것과 addeventlistener를 사용하는것에 차이점에 대해서 보면

먼저 간단한 예제 소스를 만들어 보겠다. https://jsfiddle.net/1gb0q135


<button id="btn">Click me!</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() { 
  // will be overwritten! 
  console.log('[onclick] 바'); 
}
btn.onclick = function() { 
  
  console.log('[onclick] 보');
}
btn.addEventListener('click', function() {
  console.log('[EventListener] 바');
});
btn.addEventListener('click', function() {
  console.log('[EventListener] 보');
});
</script>

onclick은 해당 기능을 update 하는 반면에 addEventListener는 add 하는 방식으로 진행이 됩니다.(위에 콘솔로그를 확인해보시면 이해가 되실것입니다.)

참고로 ie는 다른 메소드를 사용합니다.(attachEvent)

참조


Jan 11, 2017 - Tomcat의 Class Loader HOW-TO

톰캣이 시작할때 아래 같이 부모 자식 관계로 구성되는 클래스로더 집합을 생성합니다.

       Bootstrap
          |
        System
          |
       Common
       /     \
  Webapp1   Webapp2 ...

각각의 클래스로더에 대해서 설명을 하면

  1. Bootstrap - JVM에서 제공되는 클래스들과 $JAVA_HOME/jre/lib/ext 에 존재 하는 JAR 파일 및 클래스가 포함되어 있습니다.

  2. System - CLASSPATH 환경변수로 $CATALINA_HOME/bin/catalina.sh or %CATALINA_HOME%\bin\catalina.bat 에서 설정 할 수 있다.

  3. Common - 톰켓에 전역으로 로딩되는 클래스로더 $CATALINA_BASE/conf/catalina.properties 에서 선언하고 있거나 아래의 폴더에 JAR파일이나 압축이 풀린 클래스와 리소스들이다.
    • $CATALINA_BASE/lib
    • $CATALINA_HOME/lib
  4. WebappX - 해당 클래스로더는 웹앱 하나당 하나씩 생성이 됩니다.
    • /WEB-INF/classes
    • /WEB-INF/lib
  • Bootclass는 java 에 의해 로딩되면 JVM이 초기화되면서 필요한 클래스들로 이루어져 있다.System.getProperty(“sun.boot.class.path”) 와 System.getProperty(“java.ext.dirs”)에서 확인할 수 있다.

  • JVM초기화 과정이 끝나면 java는 java.lang.ClassLoader를 통해서 어플리케이션 클래스들을 로딩한다. System.getProperty(“java.class.path”)에서 값을 확인할 수 있다.

참조