[JS]prototype.js에서 클래스 상속(inheritance)하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

아래의 포스팅에서 prototype.js에서 제공하는 클래스 부분에 대한 설명을 했는데 OOP에 중요한 특징인 상속에 대해서 좀 보자. 이번 프로젝트에서 클래스 상속은 우리가 가진 설계의 핵심부분이었기 때문에 많이 중요했는데 처음엔 잘 안되서 좀 힘들었었다.

일단 자바스크립트에서는 상속이라는 개념을 제공하지 않는다. prototype이라는 기능을 제공하고 있기는 하지만 상속이라기 보다는 확장에 훨씬 가까운 느낌이다. 그래서 완젼(?)한 OOP를 위해서 프로토타입 프레임워크는 상속을 위한 extend라는 메서드를 제공하고 있다.

Object.extend(destination, source);

가 기본적인 extend의 사용법이다. source부분에 있는 객체의 모든 프로퍼티를 destination 객체로 복사한다. 어찌보면 완전한 상속이라고 하기엔 좀 다른 부분이 있다.(아직 난 OOP의 개념조차 좀 부족하기 때문에...)

이렇게 상속을 하면 destinatio측의 클래스 객체를 이용해서 source쪽에 있는 변수나 메서드를 사용할 수 있다. 한클래스 안에 모두 넣어도 되지만 클래스를 구분함으로써 더욱 명확한 구조를 가질 수 있다.

Js

// Object.extend 사용 예제
var Dog = Class.create();
Dog.prototype =  {
    initialize: function(mapId) {
        this.name  = "gae";
        this.age   = 2;
    },

    myName: function() {
        alert(this.name);
    }
}

var Cow = Class.create();
Cow.prototype =  {
    initialize: function(mapId) {
        this.sex  = "male";
        this.weight   = 100;
    },

    myWeight: function() {
        alert(this.weight);
    }
}

var animal = new Dog();
var bull = new Cow();

Object.extend(animal, bull);

alert(animal.name);
alert(animal.sex);
animal.myName();
animal.myWeight();

이렇게 상속을 받을 경우 인스턴스 animal을 사용해서 Dog과 cow의 변수 및 메서드를 모두 사용할 수 있다. 자신의 것은 당연한거고 Cow에 있던 것을 상속받았기 때문에 사용이 가능하다. 여기에 나는 하나의 인스턴스를 이용해서 다양한 기능을 구현할 것이지만 클래스를 구조를 이용하기 위해서 중심이 되는 클래스 하나만 객체로 만들어서 사용하기를 원했다. 즉 이건 식의 사용도 가능하다.

Js

// Object.extend 사용예제
var Dog = Class.create();
Dog.prototype =  {
    initialize: function(mapId) {
        this.name  = "gae";
        this.age   = 2;

        var bull = new Cow();   
        Object.extend(this, bull);  //상속
    },

    myName: function() {
        alert(this.name);
    }
}

var Cow = Class.create();
Cow.prototype =  {
    initialize: function(mapId) {
        this.sex  = "male";
        this.weight   = 100;
    },

    myWeight: function() {
        alert(this.weight);
    }
}

var animal = new Dog();

alert(animal.name);
alert(animal.sex);
animal.myName();
animal.myWeight();

Dog클래스 내부에서 Cow의 인스턴스를 만들어서 바로 상속을 받음으로써 외부에서는 Dog의 인스턴스만 만들어서 모든 기능을 사용할 수 있다.(난 약간은 다른 형태로 했는데 되겠지? ㅡ..ㅡ)


여기서 메서드든 변수든 같은 이름이 있을 경우는 어떻게 될까?

extend가 프로퍼티를 복사한다고 했으므로 당연히 덮어쓰는 효과가 된다. 즉 Overriding 효과가 난다. 이걸 이용하면 의도적으로 특정 메서드를 오버라이드 할 수 있다. 오버라이딩할 클래스를 나중에 상속받아오면 되니까... 당연히 다중상속도 가능하지만 위의 말한대로 이름이 겹칠경우 오버라이딩 되기 때문에 의도하지 않는 문제가 생기지 않도록 네이밍에 주의를 기울여야 한다.

추가로 이번에 작업을 준비하면서 여러가지로 테스트를 좀 했었는데 public 변수나 함수는 모두 this. 를 이용해서 접근할 수 있는데 이것은 상속받아온 곳에서도 동일하게 사용가능하다. 예를 들어 바로 위의 예제에서 Cow클래스에서 this.name을 접근해서 사용해도 가능하다는 것이다. (물론 Cow 인스턴스를 따로 만들어서 사용한다면 오류가 생기겠지...) extend된 상황에서는 this가 Dog클래스를 가르키고 있기 때문에.....

[JS]prototype.js에서의 클래스 사용에 대해서..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Prototype Framework은 많은 것을 제공한다. 최근들어 갈수록 그 매력에 빠져들고 있다. 프로토타입이 느리다는 얘기도 많이 있고 여러 벤치마킹에서 그런 점이 드러나기도 하지만 자바스크립트 프레임웍의 시초격이라는 점에서 무시할 수는 없다고 생각한다.

어쨌든 프로토타입 프레임웍은 크게 편리함을 더해주는 유틸리티 함수들이 있고 클래스 사용을 위한 부분들이 있다. 둘은 그 성격면에서 상당히 다르다. 유틸리티 함수들이 사용법만 익히면 그냥 사용하면 되지만 클래스 부분은 아무래도 좀 만만치 않았고 OOP등 생각해야 할 것들이 많이 있었다. 이번에 프레임워크를 좀 적극적으로 사용하고 있고 유틸리티 함수는 물론이고 클래스 기능을 사용해 보려고 다방면으로 노력중이다.

자바스크립트는 상당히 유연성이 있기 때문에 객체라는 개념이 약간 모호한 느낌이 있다. function()을 그냥 쓸수도 있고 Object로 만들어서 쓸수도 있다. 상당히 엄격한 다른 언어에 비해서 자바스크립트의 러프함은 편하다고 할 수도 있지만 다른 면에서는 약간 혼란스럽기도 하다. 예시로 Function을 호출해서 사용한건지 객체로 만들어 사용한 건지는 소스를 뜯어봐야 알 수 있다.

그래서 프로토타입은 좀더 명시적인 클래스 및 OOP 구현을 위한 기능을 제공한다.

var Example = Class.create();

prototype.js에서 제공하는 클래스 생성 함수인 Class.create()이다. 이 부분은 특별한 기능이라기 보다는 선언부의 역할을 하고 있다. Example을 클래스로 사용할 꺼라는 것을 명시적으로 적어준 것이고 그렇게 함으로써 객체를 만들지 않고 Example();를 사용할 수 없다. (나도 처음 볼때는 펑션의 이런식으로하는 선언이 헷갈렸는데 일반적으로 쓰는 fucntion test() {} 같은 방식을 var test = fucntion() {}와 같이 써주어도 동일하다. 이부분에 대해선 나중에 다시한번 포스팅을...)
(사소한 부분이지만 클래스이므로 통상적인 파스칼방식의 표기법을 사용했다.)

위와 같은 선언부에 클래스라면 당연히 있는 생성자(Constructor)를 제공하고 있다.

Js

var Example = Class.create();
 
Example.prototype =  {
    initialize: function(par) {},
 
    methods: function() {}
}

클래스 구현을 위한 구조이다. 선언부 아래 클래스구현부를 적어주면 된다. 여기서는 자바스크립트의 prototype기능을 사용한다. prototype는 확장의 개념을 제공해주는데 예를 들어 간단히 적어보면

Js

var test;
test.prototype.loading = function() {}

와 같이 적어주면 test.loading(); 와 같은 형식으로 사용할 수 있게 된다. 즉 클래스에서 Example클래스에 뒤 이어올 변수 또는 함수를 확장시켜준 것이다.

처음으로 등장한 initialize는 생성자의 역할을 한다. 이 생성자는 반드시 있어야 한다. 선언안했다고 자동으로 해주지는 않는다. 그리고 생성자는 클래스의 이름과 동일하게... 라는 등의 규칙은 여기서는 적용되지 않고 initialize라는 이름을 고정으로 사용해야 한다. 생성자이기 때문에

var test = new Example();

라고 실행을 하면 자동으로 initialize()를 바로 실행시켜주고 보통 생성자가 하는 역할을 이 안에 구현해 주면된다. initialize()함수에 파라미터가 있다면 new Example(par) 과 같이 객체를 만들때 파라미터를 넘겨주면 initialize()함수가 파라미터를 받는다. 이렇게 생성하고 다른 함수들은 test.methods() 와 같이 사용하면 된다.(test로 Example의 인스턴스를 만들어줬으므로...)

동작자체만으로 본다면 굳이 이렇게 하지 않아도 가능은 하다. 하지만 명시적으로 클래스를 사용한다는 점과 이렇게 하면 객체를 만들지 않고는 사용할 수 없기 때문에 의도하지 않은 사용을 막을 수 있다는 점, 생성자를 통해서 init의 역할을 하는 함수 호출을 줄인다는 점 등 장점은 충분하다고 본다.

[JS]prototype.js에서 setStyle() 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Prototype Framework에서는 Element에 css가 아닌 자바스크립트로 스타일을 적용할 수 있게 하는 setStyle()이라는 메서드를 제공하고 있다. 물론 Element.style.display 같은 식으로 스타일에 접근하거나 할 수 있지만 setStyle()의 좋은 점은 css에서 적용하는 것처럼 스타일을 한꺼번에 적용할 수 있다.

Element의 Selector는 당연히 이것저것 있지만 가장 기본적인 getElementById를 가지고 설명하자.

(Language : javascript)

1. $("elementID").setStyle({
2.     'position': 'relative',
3.     'width':    '100px',
4.     'height':     '100px',
5.     'overflow': 'hidden',
6.     'border':   'solid 1px #808080'
7. });

마치 CSS를 사용한 것처럼 익숙한 스타일로 한꺼번에 스타일을 적용할 수 있다. px를 사용할 때 100px처럼 붙혀서 쓰는 것이 좋다. px앞에 공백이 있으면 브라우저에 따라 안 먹을 수 있다.

스타일 프로퍼티쪽은 꼭 홑따옴표(')로 묶어주지 않아도 상관없기는 하지만 float처럼 reserved word와 겹치는 경우에는 문제가 생길 수 있기 때문에 이런 충돌은 홑따옴표로 묶어서 해결할 수 있다.

근데 setStyle()을 사용할 때 주의할 점은 -가 붙는 CSS 프로퍼티에 대한 부분이다.

CSS에서도 내부 스타일과 외부 <style>태그로 할때 프로퍼티의 이름이 다른 경우들이 좀 있는데 그것처럼 여기서도 주의해야 할 부분이 있다.

background-color 이나 font-size처럼 CSS 프로퍼티가 - 가 붙는 경우에는 backgroundColor 나 fontSize 처럼 카멜방식으로 - 가 없이 작성해 주어야 동작을 한다. 모든 - 가 붙는 프로퍼티가 다 그런지 까지는 확인하지 못했지만 위의 2가지는 확실히 - 없이 작성해 주어야 한다. 대소문자를 가리기 때문에 반드시 위와같은 카멜방식이어야 한다.

이것때문에 한참 해맸다. 처음에는 동적으로 생성한 엘리먼트에는 setStyle이 안 먹나 해서 이것저것 했었는데 결국 스타일이 적용 안된게 저 문제 때문이었다.


덧) 각 스타일은 콤마(,)를 이용해서 구분하는데 마지막에도 콤마를 붙혀주는 실수를 할 경우 Firefox에서는 잘 돌아가지만 IE에서는(내 경우는 7) 에러가 난다. 더군다나 콤마때문에 렌더링 오류가 나는데 생뚱맞은 곳에서 오류메시지가 나기 때문에 디버깅 하기도 쉽지 않다. 콤마에 주의!!

덧) (2008.3.6) CSS의 프로퍼티를 -를 쓰지 않고 대신 카멜방식처럼 대문자로 이어붙히는 것은 자바스크립트 자체의 특징으로 특정 프로퍼티에 대시(-)를 사용할 수 없게 되어있다고 한다. 프로토타입의 특징은 아니었다.

[Book] 실전 Ajax..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

실전 Ajax - 저스틴 게틀랜드.벤 갤브레스 지음, 황인석.강승우.송인철 옮김/인사이트

이 책은 처음엔 그닥 낸 눈에 들지는 않았다. 원래는 실전에 투입되니 자바스크립트에 한계를 많이 느껴서 자바스크립트 레퍼런스로 볼 수 있는 책을 찾다가 WROX책을 하나 사긴 했는데 좀 오래된 책이기도 하고 너무 두꺼운 책이라 쉽게 열게 되지 않았다.

그러다가 다른 책 보고 이런저런 짓 하면서 시간이 보내던 가운데 자바스크립트 지식도 약간 늘었고 AJAX가 필요해 졌기 때문에 회사에 있던 이 책을 집어 들었다. 큰 기대감도 없이 일단 AJAX를 하긴 해야겠으니 있는 책 먼저보고 다른거 보자는 생각으로 집었다.

근데 이 책 꽤 괜찮다.
보통은 당연한 수순대로 AJAX설명하면서 Web 2.0 얘기 나오고 XMLHttpRequest설명하면서 주~욱 나가는게 일반적인데 이건 왠걸 시작부터 Google Maps가 나오면서 구글 맵스식의 타일방식의 지도를 구현하는 AJAX얘제가 나온다. 관심이 있던 부분이라 열심히 따라해 보긴 했는데 약간 의외였다.

이 책은 단순히 AJAX의 사용법에만 국한한다기 보다 좀더 크게 보고 있다는 느낌이 드는 책이다. 구체적인 예시를 들면서 어떤 때에 AJAX가 필요한 지 또 AJAX를 잘못 사용하면 어떻게 되는지에 대해서 설명을 하고 있고 AJAX에 약간 관심을 갖고 있고 아주 약간은 기본 지식도 있던 나로써는 상당한 도움이 되었다. 기본적인 클라이언트 사이드 개발에 대한 마인드적인 부분까지...

그리고 AJAX는 Web 2.0의 대표 선수격이면서 XMLHttpRequest로 대변되기는 하지만 사실상은 특정 기술이라기 보다는 구현방식(?)이라고 보는게 더 맞기 때문에 어찌 보면 사용법보다 이런 부분이 더 중요하다고 할 수 있다.

또한 AJAX라 하면 말그대로 비동기로 서버랑 통신을 하는 거다. 이렇기 때문에 설명하는게 생각보다 까다롭다. AJAX는 일단 자바스크립트로 비동기로 요청을 하는 부분을 설명하고 예시를 보여주는 것은 당연한 거지만 완전한 설명을 하려면 Response를 하는 서버측에 대한 부분도 있어야 하는데 서버측은 어떤 녀석이 올지 알수 없기 때문이다. ASP, 닷넷, JSP, PHP등을 모두 다 설명할 수도 없는 노릇이고 그렇다고 독자가 어느걸 사용할 줄 아는지 알수도 없는데 하나만 가지고 설명하기도 참 어렵다.

하지만 이 책은 그 중간을 잘 조율했다는 느낌이 강하다. 너무 클라이언트부분만 설명하지도 않았고 어찌보면 좀 불필요한 서버언어에 대한 설명에 지면을 낭비하지 않고 개념자체를 이해할 수 있도록 상당히 신경을 썼다는 느낌이다.

그리고 AJAX를 쓰면 거의 필수적이라고 개인적으로 내가 생각하는 자바 스크립트 프레임워크에도 꽤 많은 지면을 할애해서 전체적으로 고르게 학습할 수 있도록 했다. 물론 프레임워크를 써도 기본적인걸 알아야 하지만....( 난 아직 프레임워크로만 쓰지만.. ㅡ..ㅡ ) 편리하게 쓸수 있게 하는 제공된 프레임워크가 널려있는데 안쓸 이유는 전혀 없다고 생각한다.

AJAX 관련해서 다양한 개발기법등을(JSON, XMLHttpRequet...) 배우려는 의도라면 오히려 실망할 지도 모르겠지만 AJAX를 어떻게 적용해야 될지가 고민이라면 많은 도움이 될 책이라고 생각된다.

[HTML]li태그로 메뉴등을 가로로 배열하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

예전에는 페이지 디자인을 할 때 table이용해서 했기 때문에 테이블안에 테이블을 삽입하는 식으로 틀을 잡으면 어떤식의 레이아웃이라도 쉽게 잡을 수 있었지만 요즘에는 table보다는 div등을 이용해서 레이아웃을 잡는게 권장되고 있기 때문에 이런 방법은 쓸수가 없다.

그래서 메뉴등을 배열할때는 보통 ul, li를 이용해서 리스트에 css 스타일로 원하는 모양을 잡는 것 같다. 알다시피 ul, li는 리스트를 만드는 태그이고 스타일을 적용시키지 않으면 앞에 ● 표시가 붙으면서 리스트형태로 만들어지는데 css를 이용하면 원하는대로 배열시킬수 있다.

Html

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
</ul>

위처럼 html태그를 구성하고 이제 css로 스타일을 주면 된다.

CSS

ul {
    list-style:none;
    margin:0;
    padding:0;
}

li {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border : 0;
    float: left;
}

ul에 리스트스타일을 주지 않고 필요에 따라 margin과 padding을 적절하게 준다. 가로로 배열하려면 float를 left로 주면 가로로 배열할 수 있다. li안에 글자가 들어갈때는 상관없지만 image(보통 메뉴는 이미지로 구성하니까..)를 넣는다면 border를 0을 주면 빈공간 없이 가로로 배열할 수 있다.

물론 여기서는 간단한 예제이기 때문에 스타일을 ul과 li에 직접 주었지만 실제사이트는 복잡하기 때문에 class를 주거나 id를 주어 스타일을 적용하는 것이 더 좋다. css는 포괄적으로 적용시키는 것보다는 필요한 만큼 해당 엘리먼트를 구체적으로 지정해서 주는 것이 더 좋기 때문에.....

My Comment..
위 글에 대한 내용을 제대로 이해하고 접하고 한 시점은 불과 2~3년 인 듯하다..
BCCard 에서 프로젝트 및 유지보수를 하면서..
저러한 태그를 많이 봤는데.. 머.. 그 이전에도 html 을 사용은 했지만..
표준이란 것 자체에 대해서 관심도 없었고, 그게 왜 필요한지도 몰랐고..
그런 것을 누가 쓰기는한건가.. 라는 생각만 했으니까..

하지만 BCCard 내에서는 아무래도 표준을 지켜야 하는 입장이고..
카드에 대한 설명 및 유의사항 등을 알려줄 때..
저 태그를 쓰면, img 를 사용할 필요 없이 약간의 css 만으로 상당히 편하게..
표현이 가능하더라능.. 물론 내가 직접 컨트롤 할 일은 좀 드물다..
퍼블팀이 따로 존재하고, css 도 따로 관리를 하기 때문..
그래도 조금씩의 수정을 위해서 써보면.. 상당히 좋은 점을 느끼긴 한다..

근데 형은 2008년에.. 뷁.. 스럽다;; ㅡ;;ㅡ..

[JAVA]웹로직(Weblogic) 8.1 설치가이드 문서..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

웹로직은 BEA사의 WAS[Web Application Server]이다.

이 WAS라는 것을 이해하기가 꽤 어려웠다. JSP쪽을 먼저 배우긴 했지만 아주 잠시였고 그 다음에는 ASP쪽을 계속 했었기 때문에 IIS가 모든 것을 하고 WAS라는 개념이 없는 MS쪽 서버환경에 익숙한 나에게는 이해하기가 좀 어려웠다.

WAS는 그 이름대로 서버사이드 언어를 해석해 주는게 주 역할이다. 나도 아주 잠시동안 사용해 본것이고 WAS의 개념을 다 이해했다고 하기에는 내가 만져본 WAS는 아주 기초적인 수준에 불과하지만 그나마 좀 이해한거 정도만 말해볼라고 한다. (왠지 나중에 보면 틀린 내용이 있을 것 같지만....)

IIS는 IIS가 모든 역할을 다 하지만 JSP쪽에서는(왜 다르게 구성되는진 잘 모르겠지만.. ㅡ..ㅡ) 웹서버와 WAS가 구분된다. 웹서버는 보통 요청을 처리하고 대개 Apache가 그 역할을 한다. HTML은 해석할 수 있지만 JSP등의 서버측 언어는 해석할 수 없기 때문에 WAS가 필요하고 트래픽이 큰 서비스는 WAS를 여러개 두기도 한다.

처음 JSP를 배울때는 보통 톰캣을 많이 사용하는데 위의 간략설명정도로만 보면 역할은 거의 동일하지만 성능을 보았을때 톰캣은 WAS라고 부르기는 좀 어려운듯 하다.(보통 컨테이너라고 호칭하는듯....) 이건 확실하진 않지만 WAS자체도 웹서버의 역할을 어느정도 수행할 수 있는듯하다. 마치 톰캣처럼...(일단 내 로컬에서 WAS만으로 페이지를 돌릴수 있었다.)


웹로직을 처음 한다고 했을때 꽤나 난감하고 당황스러웠었는데 정작 겪고 보니 그렇게 어렵지는 않았다. 물론 실서비스를 운영하려면 설정해야 할 것들이 많겠지만 돌려보는 정도로는 그렇게 어렵지 않았고 아래의 문서가 상당히 잘 정리가 되어 있어서 올린다. 8.1기반으로 되어 있고 문서는 오래되었지만 그냥 따라하는 정도로 설치와 기본설정등을 모두 할 수 있었다.(윈도우와 리눅스 모두 따라해서 WAS 설치를 완료할 수 있었다.)

WebLogic Platform 8.1 Installation Guide and so on.doc

물론 위에 캡처에 나온대로 이 문서는 내가 만든건 아니고 파일로 보아 BEA Korea측에서 작성한 듯 싶다. 동일한 문서가 여기저기 올려져 있기는 하지만 난 J2ee Study에서 이 문서를 얻었다.

웹로직은 BEA사이트에서 다운 받을수가 있다.

[DB]Orange for Oracle에서 Loader 사용해서 데이터 입력하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

처음에 오라클을 배울 때는 ISQLPLUS를 이용해서 디비작업을 했었는데 그때는 상당히 초기에 쿼리를 배우는 수준이었기에 그게 당연한줄 알았고 그렇게 어려운 쿼리도 날리지 않았는데 한참동안 MS-SQL을 사용하다가 보니까 엔터프라이즈 매니저에 익숙해져서 비쥬얼툴이 아닌 콘솔로 디비를 다루는 것이 여간 불편한게 아니었다. 거의 작업하기가 어려울 정도로....

그래서 이것저것 찾아보았다. 툴은 여러가지가 있었다. 토드, 프리토드, 웹디벨로퍼등 이것저것.... 처음에는 이클립스에 DbEdit플러그인을 붙혀서 사용했는데 디비 확인을 위해서 항상 이클립스를 띄워야 하는 점과 프로그램이 아니라 플러그인이기 때문에 기능상의 부족함등으로 금새 털어버리고 Orange for Oracle이라는 툴을 현재 사용하고 있다.(제법 괜찮은것 같다. 내가 쓰는 기능은 아직 한정적이고 아직 손에 많이 익지는 않지만... 이런거 보면 EM이 참 좋단말야.. ㅎㅎ)

이번에 프로젝트를 하다가 SQL Loader라는게 오라클에 있다는 걸 알게 되었다. 쉽게 말하자면 txt파일의 자료를 오라클로 올리는 것이다.(실제 로더는 ctl이나 dbf를 통해서 이런저런 작업을 하는 듯 하지만...) 상당히 쉬워서 편할 것 같다. 지난달에 MDB를 오라클로 올리느라고 삽질을 꽤 했는데.....

메뉴바에 보면 왼쪽과 같은 아이콘이 있다. Export, Import 옆에 Loader라는 녀석이 있다. Export와 Import는 DB 또는 Owner, table등을 통째로 dmp파일로 내보내거나 들여오는 것이고 Loader는 훨씬 유연한 데이터 로드기능을 지원하고 있다. 메뉴에서 [Tools] - [Loader]를 선택해도 동일하다.

로더를 실행하면 아래와 같은 창이 뜬다.

약간 보고 있자면 그리 어려운 구성은 아니다. SQL Loader를 명령어를 통해서 오라클로 실행하면 ctl파일을 통해서 txt를 불러들이는데(검색해 보면 많이 나온다.) 여기서는 그냥 txt를 불러서 로드할 수 있다. [1] 부분에서 Owner와 원하는 테이블을 선택해 주고 [2]에서 TXT파일을 불러온다.

TXT파일은 다양한 형태가 될 수 있는데 가장 기본적인게 탭이나 콤마(,)를 통해서 구분을 지어주는 것이다. 엑셀에서 CSV파일로 내보내기 등을 생각하면 될 것이고 엑셀이나 다양한 툴에서 이런 방식으로 내보내기하는 것은 지원하고 있기 때문에 TXT를 만들어 내는 것은 그리 어렵지 않다. TXT의 데이터가 심볼로 구분되어 있는지 아니면 고정된 넓이인지를 선택해 주고 첫줄이나 첫 행이 실데이터인지 아니면 각 행열에 대한 이름인지를 선택해 준다.

구분자를 탭이나 콤마외에도 임의로 기호를 입력할 수 있기 때문에 다양한 형식의 데이터를 로드할 수 있다. 파일을 불러들이면 [3]번 부분에 해당데이터의 예시가 나온다. 어떤식으로 입력되는지를 15열로 예시로 보여준다. 오른쪽에는 현재 테이블의 컬럼구조가 나와있는데 [4]버튼을 누르면

위에처럼 TXT파일의 필드와 테이블의 필드를 매핑시킬수 있는 화면이 나온다. TEXT에 컬럼수가 많아도 필요한 것만 매칭 시키면 데이터가 잘 올라간다.

준비가 다 되었으면 로드창의 상단에 있는 Run버튼을 누르면 데이터가 올라간다. 업로드후에 결과를 보여주는 팝업창을 통해서 올려진 로우수와 에러난 로우수를 확인 할 수 있고 에러가 난 로우는 TXT파일과 같은 위치에 파일명_bad.err과 파일명_bae.txt 2개의 error파일이 생기면서 로드되지 않은 데이터가 저장되기 때문에 올라가지 않은 데이터를 쉽게 확인 할 수 있다.

거꾸려 데이터를 내려받을 때는 상단탭의 Unload를 사용하면 txt파일로 내보낼 수 있다.

[AJAX]JSP환경에서 AJAX로 파라미터 한글로 보내기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

파라미터를 한글로 던지는게 일반적이라고 생각하지는 않지만 어쩔수 없이 그런 상항이 생겼다. DB에는 한글로 들어 있었고 DB수정을 요구할 수는 없는 상황에서 어쩔수 없이 파라미터를 한글로 던져야 했다.

환경은 JSP에 WAS로 Weblogic이 올라가 있었고 AJAX에는 prototype.js를 사용하고 있었다. OS는 AIX와 Windows에서의 테스트 결과 동일했기 때문에 큰 영향은 없을 것이라고 본다. 이렇게 환경을 거론하는 이유는 다른 환경에서 어떻게 돌아갈지 잘 모르기 때문이다.

물론 JSP파일은 euc-kr기반이다. UTF-8로 인코딩된 환경이라면 한글이라고 큰 문제가 생기진 않겠지.... UTF-8로 개발하기가 만만치 않아서 문제이지만......

정확한 문제는 euc-kr로 된 JSP파일에서 AJAX를 통해서 파라미터를 던지는데(GET방식이다.) AJAX는 전송을 UTF-8로 하기 때문에(전혀 없진 않은것 같지만 AJAX통신을 다른 인코딩으로 하는건 만만찮은 일인것 같다.) 요청받은 JSP에서 받은 parameter가 인코딩문제로 읽을 수 없게 되어서 결국 쿼리도 날릴수 없게 된 상황이다.

JAVA에서 getByte로 인코딩을 바꿔보고 별의 별짓을 다해봐도 안되었는데 생각보다 쉽사리 해결했다. 역시 안될때는 동작원리를 잘 고민해봐야하는것 같다...

간단히 봤을때 파라미터를 던질때 UTF-8로 던진다. 이걸 euc-kr로 받는게 문제였는데 JSP인코딩관련해서 올린 포스팅이 있었다. 우린 이걸 묻지마 3줄이라고 부른다.. ㅋ 단순히 여기서 인코딩을 UTF-8로 바꾸어 주었다.

Java

<%@ page contentType="text/html; charset=utf-8" %>
<% request.setCharacterEncoding("utf-8"); %>
<% response.setContentType("text/html; charset=utf-8"); %>

대충보면 알수 있다시피 현재페이지의 인코딩을 설치하고 Requet와 Response의 인코딩을 설정해 주었다. 즉 파라미터를 받을 때 여기서 설정된 인코딩형태로 받는 것이기 때문에 여기서 UTF-8로 설정해서 AJAX로 던진 파라미터를 올바른 인코딩으로 받았다.

이렇게 한뒤에 JSP파일에서는 별다른 인코딩없이 필요한 String을 만들어서 화면에 출력해 주었더니 한글을 포함한 AJAX데이터 전송에 아무런 문제가 일어나지 않았다.


덧) 내가 맡은 부분이 아니어서 처음부터 붙잡고 있었던건 아니지만 해결할때는 꽤 고생했었는데 이렇게 설명하자니 되게 뻔한내용같네.. ㅡ..ㅡ

[Talk]기나긴 연휴가 끝나고..

기나긴 연휴가 끝났다..
공인중개사 동강 공부도 하고, 운동도 하고..
맘 집에가서 술도 진탕 묵고..

처가[울산]에 가서 처형들과 동서들 그리고 처남과 잘 놀고..
장인어른과 장모님도 잘 뵙고 왔당..
장인어른, 장모님 두 분 다 건강하셔야 될텐데.. 요새 많이 힘들어 보이신당..

연휴가 끝나고 첫 출근 목요일..
연휴 전에 받은 일이 있어서.. 좀 길게해야되나 했는데..
막상 소스를 까보니.. 글로적힌 업무에 비해서는.. 싱겁게 끝나버렸당..

그래서 형의 블로그에서 열심히 퍼나르고..
연휴동안 느끼한것을 묵어서 그렁가.. 급 만두라면이 땡겨서.. [항상 가는 단골집 있다능..]
뚝딱하고 와서 쉬면서 글을 끄적거려본당..

오전에는 업무 외에도.. 구정 때 우연하게 듣게 된..
주택관리사라는 직업에 대해서도 좀 알아보고..
공인중개사 동강 듣는곳에서 주택관리사도 동강을 해주고 있어서..
대략적으로 시험 회차.. 과목.. 커리큘럼 등 알아보니.. 올해 말쯤부터..

공인중개사 1차 시험 결과에 따라서 공부를 해보덩가 해야것당..
요새 부쩍.. 미래에 대한 불안감이 엄습해서일까..
날 가만히 못놔두는 듯 하다.. [그렇다고 미친듯이 열심히 하는것은 아님.. -_-;;]

요새는 크게..
내 본업인.. 개발자라는 것에 대한 조금 더 공부를..
내 건강을 위해.. 그리고 앉아있는 직업의 특성 때문에.. 헬스를 더 빡시게..
[중량 늘림.. 후훗.. ㅡ;;ㅡv]
내 미래를 위해.. 공인중개사 공부를.. 그리고 주택관리사도 살짝.. 기웃거릴 예정..

머 대충 저런듯..
꾸준히 해보장.. 어렵더라도 힘들더라도..
꾸준히 하고.. 반복하면.. 조금 더 좋은 미래가.. 결과가 날 지두리것징..

[JS]prototype.js기반의 아코디언 메뉴 Accordion v2.0..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

요즘 prototype.js에 빠져있다. 스크립터가 될려고 하나? 대부분의 시간을 자바스크립트랑 프로토타입을 만지면서 보내고 있는 것 갔다. UX시대가 오면서 자주 쓰이는 메뉴스탕리중 하나가 되어버린 아코디언스타일의 메뉴를 얼마전에 다뤄 보아서 약간 정리해서 올린다.

아코디언이란건 아코디언처럼 내용이 왔다갔다하면서 보여주기 때문에 붙혀진 이름이고 내가 사용한 소스는 stickmanlabs에서 만든 Accordion v2.0이다. 내가 찾은 것 중에는 prototype.js기반으로 되어진 것은 이게 유일한 것 같다. 약간의 버그나 그런 점들은 있긴 하지만 그래도 완성도는 괜찮은 편인것 같다.

해당 페이지에서 다운로드를 할 수 있고 이 라이브러리는 prototype.js 1.5.1.1기반에 script.aculo.us 1.7의 effect효과를 이용해서 만들어졌다. 해당페이지에도 설명이 자세히 나와있어서 그냥 따라해도 어느정도는 할 수 있지만 포스팅할 거리를 찾느라고 약간 정리를 좀 했다.

당연히 일단 사용을 하려면 각 라이브러리를 인클루드 해야 한다.

<script type="text/javascript" src="/script/prototype.js"></script>
<script type="text/javascript" src="/script/effects.js"></script>
<script type="text/javascript" src="/script/accordion.js"></script>

프로토타입을 불러들이고 script.aculo.us를 인클루드 한다. script.aculo.us는 scriptaculous.js?load=effect 같은 형식으로 인클루드 하는게 일단적인데 여기서는 effect부분만을 사용하기 때문에 아예 파일자체를 따로 인클루드 했다. 마지막으로 아코디언 효과를 줄 accrodion.js를 인클루드 한다.

Html

<div id="verticalEx1">
    <h2 class="vertical_toggle">Title Bar</h2>
    <div class="vertical_content">
        <p> 내용 입력 </p>
    </div>

    <h2 class="vertical_toggle">Title Bar</h2>
    <div class="vertical_content">
        <p> 내용 입력 </p>
    </div>

    <h2 class="vertical_toggle">Title Bar</h2>
    <div class="vertical_content">
        <p> 내용 입력 </p>
    </div>
</div>

위의 코드가 기본적인 아코디언 메뉴의 구조이다. 아코디온을 전체 감싸는 div가 하나 있고 그안에 타이틀바는 h2로(어차피 CSS로 다루기 때문에 꼭 h2일 필요는 없다.) 그리고 보이고 감출 내용을 보여줄 div를 넣고 그 안에 해당 내용을 넣는다. 이 구조를 여러개 붙혀서 여러개의 아코디언을 만들 수 있다.

div로 구조를 만들고 class를 통해서 CSS로 크기나 디자인들을 잡아준다.

CSS

.vertical_toggle {
    display: block;
    height: 30px;
    width: 400px;
    background-color: #539bdc;
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #1b2d3d;
    font-weight: normal;
    text-decoration: none;
    outline: none;
    font-size: 13px;
    border-right: 1px solid #2473b9;
    cursor: pointer;
    margin: 0 0 0 0;
}

.vertical_toggle_active {
    background-color: #d7dc53;
    color: #1b2d3d;
    border-right: 1px solid #1b2d3d;
}

.vertical_content {
    background-color: #2b6190;
    overflow: hidden;
    width:420px;
}

.vertical_content p {
    line-height: 150%;
    padding: 5px 10px 15px 10px;
}

vertical_toggle가 기본적으로 나타나는 타이틀바의 스타일이다. dispaly를 block로 주고 높이와 넓이를 준 다음에 그 외의 부분은 원하는 스타일대로 색상이나 배경이미지등을 주면 된다. h2에 기본적으로 커서가 안바뀌므로 cursor을 pointer로 해준다. vertical_toggle_active은 아코디온 메뉴를 오픈했을때 바꾸어줄 스타일이다. h2의 롤오버 메뉴정도를 생각하면 된다. vertical_content는 내용을 보여줄 부분의 div스타일로 배경색등을 주고 overflow를 히든으로 주고  아코디언메뉴를 어느정도 폭으로 해 줄지 여기서 width를 통해서 정해준다.

이제 실제 아코디언메뉴를 동작시킬 자바스크립트 코드를 보자.

Js

// 온로드시 makeAccordion() 실행
Event.observe(window, 'load', makeAccordion, false);

function makeAccordion() {
    //accordion생성
    var verAccordion = new accordion('verticalEx1', {
        classNames : {
            toggle : 'vertical_toggle',
            toggleActive : 'vertical_toggle_active',
            content : 'vertical_content'
        },

        direction : 'vertical'
    });

    verAccordion.activate($$('#verticalEx1 .vertical_toggle')[0]);
}

Event.observe는 prototype.js에서 제공하는 이벤트 리스너 등록이다. prototype.js방식을 전혀 모르면 좀 이해하기가 쉽지 않은데 간단히 말하면 window.onload = fucntion() {}이랑 동일한 거다. Event.observe로 이벤트 리스너를 등록하는데 window가 load될 때에 makeAccordion를 실행시키라는 것이다. 이렇게 하면 페이지가 로딩된 후에 makeAccordion()가 실행이 된다.

makeAccordion()에서 아코디언 을 초기화 해 주는데 accordion을 새로운 클래스로 만들어서 verAccordion이라는 변수에 넣어준다. 클래스를 만들면서 아규먼트로 아코디언 전체를 감싸는 verticalEx1이라는 div의 아이디를 주고 두번째와 세번째 아규먼트로 아코디언에 대한 옵션을 준다.

toggle에 기본타이틀바의 class를 주고 toggleActive에 타이틀바를 클릭했을 때의 class, 그리고 content의 내용 div의 class를 준다. 여기선 세로형 아코디언을 쓸 것이므로 direction으로 vertical을 주면 아코디언에 대한 기본 설정이 완료된다.

verAccordion.activate($$('#verticalEx1 .vertical_toggle')[0]); 코드에서 처럼 생성한 객체.activeate를 통해서 아코디언 메뉴를 활성화 시킨다. 활성화 시킨다는 말은 오픈한다는 얘기다. 여기서는 [0]번째를 activate를 했으므로 처음 로딩 되었을때 첫번째 아코디언이 열린채로 로딩된다. 이 코드가 없으면 모든 아코디언이 닫힌채로 페이지가 로딩된다. 약간 보고 있으면 구조는 그리 어렵지 않다.

세로형 아코디언 효과 예제보기



이번엔 가로형을 보자. 가로형 아코디언 효과는 기본적으로는 거의 비슷하다. <div>의 구조는 완전히 동일하고 Style이 약간 달라지고 자바스크립트로는 direction만 달라지면 된다.

CSS

.horizon_toggle {
    float: left;
    display: block;
    height: 200px;
    width: 30px;
    background-color: #539bdc;
    padding: 10px 0 10px 5px;
    line-height: 30px;
    color: #1b2d3d;
    font-weight: normal;
    text-decoration: none;
    outline: none;
    font-size: 13px;
    border-right: 1px solid #2473b9;
    cursor: pointer;
    margin: 0 0 0 0;
}

.horizon_toggle_active {
    background-color: #d7dc53;
    color: #1b2d3d;
    border-right: 1px solid #1b2d3d;
}

.horizon_content {
    height: 220px;
    float: left;
    background-color: #2b6190;
    overflow: hidden;
}

.horizon_content p {
    width: 450px;
    line-height: 150%;
    padding: 5px 10px 15px 10px;
}

가로형의 스타일 구조다. 세로형에서 한번 보았으니 그리 어렵지 않을 것이다. 세로형과 다른 점은 타이틀바의 기본상태인 horizon_toggle부분에 float:feft가 반드시 들어가야 한다. 그리고 보여지는 내용부분이 되는 horizon_content에도 float:left;가 들어가고 이곳에서 높이를 결정해 준다.(높이도 반드시 지정해야 한다. 세로형에서는 이곳에서 width를 지정했다.) 그리고 아키디언이 가로로 펴지는 폭은 horizon_content안의 p부분에 style을 적용한 부분에서 width로 지정해 준다.

script부분은 완전히 동일하지만 direction : 'horizontal' 로 지정하면 된다. 스타일 부분의 필수부분이 빠지면 제대로 동작하지 않는다.

이렇게 지정하면 제대로 동작하지만 약간의 버그가 있다. 세로형에서는 그렇지 않지만 가로형에서는 horizon_content 부분에서 height를 지정해도 아코디언 메뉴를 열면 배경색이 지정한 높이만큼 나오지 않고 콘텐츠의 높이 만큼 배경색이 나온다.(지정한 높이보다 적으면 짧게, 높이보다 크면 더 길게 나온다. 예제의 첫번째 아코디언 참조. 세로형에서도 그렇지만 세로형은 아코디언이 길게 펼쳐지므로 큰 이상이 없다.)

이 부분은 데모사이트에서도 동일한 현상이 나타나는데 중첩을 통해서 배경색을 감춤으로써 해결했다. 약간의 테스트를 해본 결과 중첩을 하고 이 문제를 해결하려면 전체 아코디언을 div로 한번더 감싸고 그 div에 content부분과 동일한 배경색을 지정하고 포지션을 absolute로 주고 위치를 지정하면 된다.(예제의 두번째 아코디언 참조)

CSS

.forBackgroud {
    background-color: #2b6190;
    position:absolute;
    top: 400px;
    left: 10px;
}

위 소스인데 이렇게 하면 가능하다. 다른 방법이 또 있는 줄은 모르겠지만 내 테스트 범위 내에서는 저 방법 밖에 없었다. absolute가 아니면 배경색이 나타나지 않는다. 그리고 left를 지정하지 않으면 IE7에서는 위치가 잘못되어 나타난다.

세로형 아코디언 효과 예제보기

중첩해서 사용하는것은 별로 어렵지 않다. 그냥 content부분에 다른 아코디언을 통째로 넣어주면 해결된다.

중첩형 아코디언 효과 예제보기



덧1) 첫아코디언이 닫혀있을때 다시열면 깜딱 거리는 버그가 있는데 이부분은 해결이 안된 상태이다. 이건 script.aculo.us에서도 비슷한 현상이 발생하는데 그때문인듯 하다.

덧2) 소스자체를 좀 분석해 보고픈 욕심도 있지만 아직은 좀 무리라서.... 이외에 더 자세한 부분은 accordion 사이트를 참고하시길...

[Book] 위키노믹스..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

위키노믹스 - 돈 탭스코트.앤서니 윌리엄스 지음, 윤미나 옮김, 이준기 감수/21세기북스(북이십일)

웹 2.0의 경제학에 대한 책으로 변화된 이 흐름을 위키노믹스라는 이름으로 정의하고 자세하게 분석을 하고 있다. 내가 이런 비 소설류를 좋아하기는 하지만 웹 2.0이란게 약간 뜬 구름 같은 경향이 없잖아 있다고 생각하기 때문에 이런 책들도 뻔한 얘기나 주절대는 책들도 좀 있는 것 같은데 이 책은 상당히 분석적이고 전문적으로 다루고 있다.

그냥 가볍게 이런게 웹 2.0이다 하는 수준이상이기 때문에 약간은 책이 어려운 부분도 있다. 인터넷 또는 IT적인 웹 2.0에 대해서 논하는 것이 아니라 이런 흐름과 전체 경제에 대한 부분을 함께 얘기하고 있기 때문에 좀 어려운 부분이 있어서 처음에는 진도가 잘 나가지 않았다.(요즘은 좀 바빠서 책 읽을 시간도 그리 많지 않았고..) 중간에 의학적인 부분을 얘기하는 부분에선 정말 진도가 안나갔었다. ㅎ

웹 2.0의 대표격중 하나인 위키피디아를 중심으로 이 책에서 위키노믹스라고 정의하고 있는 개방성과 공유, 세계적인 행동등에 대해서 설명하고 IBM이 오픈소스와 손을 잡고 이베이와 아마존이 어떤식으로 사람들과 협업을 하는지.. 그리고 우리에게는 익숙치 않지만 그외 협업을 통해서 성공하고 있는 많은 업체들을 예시로 설명하고 있다.

이런 부분이 그냥 하나의 선택이 아니라 앞으로 성공하기 위해서는 선택해야 하는 부분으로 규정하고 있다. 지적 재산을 감축하는 기존의 방식을 벗어나 근본 지식과 기술을 공유함으로서 수많은 사람들과 효과적인 협업을 이뤄내는 것이다. 이런 것이 가능하게 된 부분은 사람들이 프로슈머가 되었기 때문이다. 그들은 미디어를 혼합하고 제품을 해킹하면서 소비자 문화를 조작하는 능력을 가지고 있고 시대에 뒤떨어진 지적 재산 관련법이 앞길을 가로 막게 놔두지 않을 것이다.(이런 부분은 상당히 공감되는 부분이다. 불법적 행위에 손을 들어주기는 어렵긴 하지만 과거와 많이 달라진 웹에 기존의 방식을 그대로 적용하는 것은 무리라는 생각이다.)

이책이 좋다고 생각되는 이유는 자세한 분석과 설명에 대한 부분도 있지만 웹 2.0스러운 추세를 찬양하면서도 꽤나 객관적으로 그 이유와 어려운점, 더 해결해야 할 부분에 대해서 논하고 있기 때문이다.

이제 패러다임의 전환으로 전에는 불가능했던 엄청난 규모의 협업을 이뤄낼 수 있고 이런 것을 가능하게 하는 환경은 대부분 갖추어져 있다.

인터넷의 창시자인 빈턴 서프(Vinton Cerf)는 "아무도 소유하지 않고 모든 사람이 사용하며, 누구나 서비스를 추가할 수 있다"는 협업적인 특성이 현재의 영향력을 만들어 냈다고 얘기한다.이제 사람들이 자신의 이익을 중심으로 공유재를 사용하면서 자연스럽게 생성되는 부산물이 더 많은 가치를 창출하면서 성장하는 공유재의 풍요가 이루어 지고 있다.(이 때문에 이타적인 공유의 동기가 필요없다고 한다.)

어려운 내용도 없잖아 있지만 뒤로 갈수록 괜찮다고 생각되는 책... 웹 2.0을 이해하려면 꼭 읽어라라고 말하기는 어렵지만 웹 2.0을 더 자세히 알고 싶다면 충분히 도움이 될만한 책이라고 생각한다.(그말이 그말인가? ㅡ..ㅡ)


이책에서 가장 맘에 든 말은 블로거이면서 공상과학소설 작가인 코리 닥터로우의 말이다.

"대장장이가 철도의 시대에 편자를 팔 수 없다고 징징거린대도 편자가 다시 인기를 얻을 수는 없습니다. 반면 자동 장치 기술을 배우는 대장장이는 돈을 벌 수 있습니다." (절대 공감이다. 아직 과도기적이 부분에서 공유라는 것이 저작권법에 애매한 부분은 있지만 결과적으로 막을 수는 없는 부분이라고 생각한다. 이런 흐름은 넘어갔다. 전에는 얼마를 벌었느니 앨법을 몇장 팔았느니 하는 것은 닥터로우의 말과 동일한 것이다. 시대는 변했다.)

[Book] Microsoft SQL Server 2000 - 전문가로 가는 지름길 1 (개발자용)..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Microsoft SQL Server 2000 - 정원혁 지음/대림

난 DB나 쿼리에 상당히 약하기 때문에 보기 시작한 책이다. 또 업무상 주로 MS-SQL을 쓰기 때문에.....

이 책을 보면서 내내 든 느낌은 탄탄하다는 느낌이다. 아주 쉽지도 아주 어렵지도 않고 딱 적당하다... 물론 나한테.... 너무 쉬운 책은 처음에 볼 때는 이해가 쉽게 되는 것 같아 좋기도 하지만 한번 보고 나면 더이상 볼게 없어지는 상황에 이를 수가 있는데 이책은 그렇지 않다.

나는 초급자 이긴 하지만 아주 초급이어두 꽤 도움이 될만한 수준의 내용을 담고 있고 지은이가 SQL에 대해서 확실히 이해를 하고 있다는 느낌을 받을 수 있을만큼 중요한 부분을 차근차근하게 설명을 해준다.

이 시리즈는 1,2권으로 나누어져 있는데 1권은 개발자적인 부분이고 2권은 DBA적인 부분인데 나는 DBA가 아니므로 1권만 봤는데 기본적인 테이블 사용에 관한 쿼리부분은 당연한 부분이고 중급자적인 부분으로 여겨지는 색인이나 트랜잭션, 트리거, 스토어드 프로시저등등 MS-SQL을 사용하는데 필요한 모든 부분에 대해서 고심한 흔적이 느껴지는 적절한 예제와 따라하기를 통해 이해를 돕고 있으며 기초적인 부분과 중급부분을 자연스럽게 이어서 설명하면서 이해를 쉽게 해주었다.

물론 SQL Server 2000이 나온지 8년이나 되었고 2005를 넘어 이제 곧 서버 2008이 나올 예정이긴 하지만 기본적인 부분은 동일하기 때문에 지금 보아도 충분이 도움이 되리라고 생각한다. 현재에도 많은 도움이 되었지만 어느정도 시간이 지난 뒤에 다시 보아도 또 도움이 될듯한 책이다.

[EP]Microsoft UX 기술여행 4주차 "실무 적용을 위한 Silverlight 테크닉"..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

잘 이해도 안되고 마음만큼 행동이 잘 따라주질 않아서 아직 실버라이트를 돌려보지도 못했지만 그래도 줄기차게 가고 있다. 1월에는 왠지 못 갈것 같기는 하지만... 슬슬 실버라이트 프로젝트도 돌려봐야 하긴 하는데... 쩝;;;

여태가 실버라이트의 소개에 대한 강좌들이었다면 이번에는 실무적인 내용에 대한 부분이었다. 실버라이트 자체가 아직 초창기 이기 때문에 실무테크닉이라고 해도 다른 언어들처럼 고난이도는 아니고 기본적인 소개보다 약간 더 나아간 정도의 수준이었다.

1세션 : VS 2008을 이용한 실버라이트 개발의 기초 #1 - 서금욱

지난번에도 세션을 하나 맞아주셨던 훈스닷넷의 서금욱씨가 첫 세션을 맞아주셨다.

실버라이트의 보안은 기존 HTML과 동일한 방식을 취해서 악의적인 사용을 막아준다. 보안을 위해서 실버라이트를 위한 안전하고 독립적인 별도의 저장공간을 사용한다. (하지만 여러 테스트 결과 이공간을 이용해서 실버라이트 페이지간에 공유는 불가능하다고 한다. XAML파일마다 별도로 생긴다고...) 그리고 크로스 도메인은 현재 지원 예정인 상태이다.

실버라이트는 WPF의 라이브러리의 일부이므로 블랜드에서 XAML을 내보낼때 WPF와 실버라이트중에서

[.NET]IIS에서 네트워크상의 서버에 연결하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

기본적으로는 IIS와 파일서버가 별도로 되어 있는 경우에 IIS에서 파일서버를 연결하기 위해서 사용하는 방법인데 이를 사용하면 다른 경우에도 타 서버에 IIS에서 엑세스하는 방법으로 사용할 수 있다. 여기서는 편의상 두 서버를 웹서버와 파일서버로 구분하도록 하겠다.

일단 내가 처음에 생각했던 웹서버에서 네트워크드라이브로 파일서버를 잡고 IIS에서 이 폴더를 가상디렉토리로 잡는 방법으로는 엑세스 하는게 불가능하다.

이 방법의 문서는 MS문서에 나와있는듯하고(현재 링크가 바뀐것 같은데 못찾겠다.) 같은 문서가 인터넷상에 많이 돌아다니긴 하고 그거 보고하면 그리 어렵진 않은데 일단 나중에 하기 쉽게 좀더 정리를 했다.

IIS가 있는 서버에서 사용자를 추가한다. [관리도구] - [컴퓨터관리]에 로컬사용자 빛 그룹에서 추가할 수 있다. 머 이름은 맘대로 해도 되지만 옵션은 화면처럼 "암호 변경할 수 없음"과 "암호 사용기간 제한 없음"에만 선택해 준다.

위에서 만든 계정의 소속그룹에서 기본적으로 추가 되어 있는 Users그룹을 삭제하고 Guests그룹을 추가한다.

[관리도구] - [로컬 보안 정책]에서 로컬 로그온에 위에서 만은 newuser사용자를 추가해 준다.

이렇게 사용자를 추가하는 과정을 파일서버에서도 동일하게 해준다. 여기서 이 방법을 약간 설명하자면 양쪽에 똑같은 사용자를 만들고 권한을 준다음에 접근을 하면 접근당한쪽에서는 자신의 로컬에 같은 계정이 존재하기 때문에 IIS상에서도 접근이 되도록 한 것이다.(불가능 한 것은 약간의 편법을 써서 가능하게 한 느낌이다.. ㅎ)



이제 웹서버의 IIS로 가 보자.

사용하고자 하는 웹사이트의 설정에 들아가서 디렉토리 보안에 익명엑세스 계정에 위에서 만든 newuser계정을 추가해주고 비밀번호를 입력해 준다. 이때 "IIS에서 암호를 제어할 수 있음"은 체크를 풀어준다.(체크되어 있으면 암호를 입력할 수 없다.)


이번엔 파일서버 쪽으로 가보자.

접근하고자 하는 폴더의 속성에 들어가서 공유설정을 해주고 newuser사용자를 추가해 준 후에 "변경"과 "읽기"권한을 허용해 준다.

그리고 보안탭에 가서 동일하게 newuser를 추가해 주고 여기서는 "수정", "읽기", "쓰기"권한을 허용해 준다.


이렇게 하면 준비는 모두 끝이 났다.

이게 UNC형식으로 해당폴더에 접근할 수 있다. \\파일서버명\공유폴더명\의 형식으로....


덧) 이미 사용중인 서버였기 때문에 나같은 경우에는 이렇게 했을 때 파일서버 연결을 잘 되었지만 기존의 IIS가 로컬폴더에 대해서 권한을 제대로 얻지 못하는 문제가 생겼었는데 newuser를 만드는 대신에 IIS의 인터넷 계정인 "IUSR_컴퓨터이름"계정을 똑같이 주면서 이 계정을 사용해서 위에처럼 연결을 해서 해결을 했다.

My Comment..
이 때의 형은.. .NET, ASP 등등.. JAVA 보다는 다른 언어를 더 많이 할 시절..
그래서 그런지 다른 언어쪽도 꽤 많다..
하지만, 일전에 언급한 것처럼.. 이런 설정이나 연결 등의 내용은..
꼭 해당 언어가 아니어도.. 유용할 수 있기에.. [비록 시간은 많이 지났지만..;;;]
가져와서 올려본다..

[DB]Join해서 Update 하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Update를 하는데 그냥 WHERE조건으로 하는게 아니라 다른 테이블과 JOIN을 해서 그 값으로 현재테이블의 값에 넣어야 할 필요가 있어서 사용하게 되었다. 평소에 쓰던 방식과 좀 달라서 어려웠었다.

SQL

BEGIN TRAN
    UPDATE table_1
    SET column1 = column2
    FROM table_1 AS A
    INNER JOIN table_2 AS B
    ON A.column3 = B.column4
    INNER JOIN table_3 AS C
    ON B.column5 = C.column6
ROLLBACK TRAN

컬럼수가 많아서 좀 복잡하긴 한데 그냥 내가 쓴 쿼리를 그대로 써 넣었다. (업데이트가 제대로 될지 몰라서 트랜잭션을 걸었다. ㅎㅎ)

컬럼수가 좀 많고 복잡해서 이해가 어려울것 같다. 일단 JOIN이 2번 된 형태이다. table_1에 있는 column1을 table_3에 있는 column2의 값으로 모두 입력해 넣으려고 한 쿼리이다.

일단 업데이트문 자체는 그대로 써주고 그 이하는 SELET문에 쓰는것처럼 FROM절을 사용한다. table_1을 table_2와 JOIN하고 그걸 다시 table_3와 JOIN해서 table_3에 있는 column2를 사용하는 것이다. 이름이 겹치지 않아서인지 column1과 2 따로 별칭을 써주지 않아도 되었다.

평소에 쓰던 쿼리들과는 형태가 좀 다른 형태라 이해가 쉽지 않지만 이렇게 쓰면 Update에 JOIN을 해서 사용할 수 있다.

[Book] Java 세상을 덮친 Eclipse..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Java 세상을 덮친 Eclipse - 윤성준 지음/인사이트

자바에서는 많이 쓰는 IDE툴인 이클립스에 대한 책이다. MS쪽에는 Visual Studio라는 툴이 있지만 자바쪽에는 그런게 없기 때문에 이클립스하면 일단 자바가 생각나고 넷빈즈같은 것도 있지만 국내에선 거의 이클립스를 쓰기 때문에 툴을 좀 익힐려고 읽게 되었다.

IDE[통합개발환경(Integrated Development Environment)]에 대한 개념이 별로 없었던 터라 조금 좋은 에디터? 정도로만 생각하고 있었는데 그 생각을 날려버렸다. 책의 구성이나 분량이나 이클립스에 대한 모든 것을 다 다루고 있는 책은 아니다.

하지만 나처럼 이클립스에 대해서 잘 모르는 사람들에게는 이클립스가 어떤 툴인지 구체적으로 어떤걸 할 수 있는지 대략적으로 파악하는데는 괜찮은 책이라고 생각한다. 비쥬얼쪽 툴을 쓰다가 Aptana가 나와서 앞으로 자바를 할 것을 고려해서 툴의 통일을 좀 하려고 Aptana사용을 시도했지만 익숙치 않은 불편함으로(자바 개발도 조금은 했었는데.. ㅡ..ㅡ) 포기하게 되어서 이클립스를 파악해 보고자 하는게 의도였다.

물론 이책으로 모든걸 다 다룰 수는 없다. 그만큼 이클립스는 많은 기능을 가지고 있고 플러그인을 통해서 그 기능이 끝없이 늘어만 간다.  아예 몰랐던거랑 그런걸 할 수 있다는 것을 아는 것은 다르다. SVN, CVS, DB툴, JUnit, 디버깅등 주요기능들에 대해서 핵심을 집어주고 일단 이런걸 할수 있다는 걸 어느정도 안 이상 구체적이고 자세한 사용법은 따로 찾아보면 될 일이다.

그냥 뭔지도 모르고 자바 코딩하는 데만 필요한 대로 몇달을 썼었는데 퍼스펙티브가 뭔지 뷰에는 어떤 기능이 있는지 어떤식으로 활용을 해야 하는지 감을 잡을 수 있었다. 툴에 대한 설명이기 때문에 내용자체가 그렇게 어렵지 않고 기능적인 측면이므로 한번 보면서 외울 성질의 것이 아니었기 때문에 상당히 빠른 시간만에 읽을 수 있었고 어느정도 감은 잡을 수는 있었다.

물론 다 읽고 나니 세부 내용에 대해서 좀더 자세했으면 하는 아쉬움은 확실히 있다. 세세한 내용에 대한 설명은 없었기 때문이긴 한데 툴자체를 그렇게 열심히 공부해야 하나?라는 생각을 하면 괜찮은 책이라고 생각한다.

My Comment..
이 책은 좀 많이.. 지난 책이긴 하다..
하지만 java 에 관련 된 책이라서.. 혹여라도 나중일은 모르니..
갖고 왔당..

[Book] 자바 스크립트 for 웹 2.0..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

자바 스크립트 for 웹 2.0 - 셸리 파워즈 지음, 김태경.김대영 엮어 옮김/한빛미디어

제목은 좀 거창하지만 제목과 같은 책은 아니다. 그냥 좀 가벼운 자바스크립트 책이다. 내가 그래도 점수를 준 이유는 나에게는 좀 도움이 되었기 때문이다. 자바스크립트라고 해봐야 alert 띄우고 팝업뛰우는 저도밖에는 잘 몰랐었는데 자바스크립트의 감을 약간 잡기 시작하는데 도움이 되었다. 일단 웹2.0에 관계된 얘기는 없다.

나는 레퍼런스 북을 좀 좋아하는 편이다. 처음 읽을때는 무슨 말인지 이해하기가 좀 어렵긴 하지만 레퍼런스 책은 하나 가지고 있으면 두고두고 찾아 볼 수 있기 때문인데 일단 당장 뭔가 해야 하는 상황에서 이책은 빨리 볼 수 있는데 꽤 도움이 되었다.

내용이 깊지는 않지만 기본에 충실하면서 기본적인 사용에 필요한 것들 위주로 잘 정리가 되었다. 이책을 읽고 prototype.js수준의 코드를 이해하거나 자바스크립트에 클래스 개념을 적용하고 OOP적으로 구현하거나 하는 것은 어렵지만 일반적인 웹사이트에서 다루는 자바스크립트 정도는 실용적으로 사용할 수 있게 잘 설명되어 있다.

그리 어렵지 않게 작성이 되어 있기 때문에 내용을 이해하기도 어렵지 않은 편이다. 나처럼 자바스크립트에 대한 이해가 부족한 사람들은 한번 쯤 봐도 될만한 책이지만 그렇다고 강력추천까진 아니다. ㅎㅎㅎ

[Book] Ajax prototype.js : 프로토타입 완전분석..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Ajax prototype.js : 프로토타입 완전분석 - 김영보 지음/위키북스

이 책을 읽은지는 꽤 되었는데 이제야 올린다. 개발관련 블로그이기도 하고 개발자로서는 별수 없이 책을 끼고 살아야 하는데 온라인 북샵을 찾아다니다 보면 의외로 개발관련 책들에 대해서는 리뷰들이 별로 없다는 느낌을 많이 받았기 때문에 그나마 내가 읽은 책에 대해서는 후기정도를 남길려고 한다.

이 책은 자바스크립트 프레임워크인 prototype.js에 대한 책이다. prototype.js에 대한 책은 국내에 이 책이 유일하고 자바스크립트 프레임워크중에서도 이 책이 유일하다. 그래서 프로토타입을 공부하려면 이 책밖에는 선택권이 없다.

프로토타입에 대한 책이기 때문에 Javascript에 대한 기본적인 지식은 필요하다.(솔직히 기본적인걸로는 이 책을 이해하기가 꽤 어렵다.) 그리고 이 책은 상당히 레퍼런스적인 측면을 가지고 있다.

보통의 책들이 처음에는 어려운 얘기를 하면서 뒤로 가면서 점점 큰 예제가 나온다던가 하는 등의 방식을 취하지만 이책은 그냥 설명서같은 트낌의 레퍼런스 성향을 짙게 가지고 있다. 온라인에도 프로토타입에 대한 설명서는 있다. 하지만 난 책을 좀 선호하기 때문에 자바스크립트도 모르면서 무작정 구입했다.

프로토타입의 각 클래스의 모든 메서드들을 간단한 예제를 통한 사용법과 실제 prototype.js안에 어떻게 구현되어 있는 지를 자세히 설명해 주고 있기 때문에 책을 죽~ 보고 프로토타입을 어떻게 사용해야 하는지 알 수 있게 되는 것은 아니다. 보통의 책들도 책한권 읽었다고 할 수 있게 되는 것은 아니지만 이책은 처음부터 끝까지 메서드에 대한 설명만 있기 때문에 더욱 그렇다.

그래서 나처럼 자바스크립트를 잘 모르는 상태에서 읽다보니 이해를 잘 못해서 좀 대충읽게 되었고 한번 읽었다고 메서드를 외우는 것도 아니라서 그냥 눈으로 죽~ 봤다. 보고나서두 뭘 어쩌라는 건지 몰라서 괜히 샀나 하는 생각이 들었었다. 하지만 prototype.js를 계속 쓰려면 꽤 도움이 되는듯 하다. 필요한 메서드가 있을 때 바로 찾아서 어떻게 쓰는지 어떻게 사용하는지 찾아볼 수 있었고 prototype.js내부에 어떻게 구현되어 있는지 설명되어 있기 때문에 자바스크립트 짤때도 소스 참고하기에 상당히 좋다.

한개의 기능을 위해 자바스크립트를 통째로 사용하기는 좀 아깝기 때문에.... 참고로 이책은 프로토타입 1.5기반으로 작성되어 있고 프로토타입은 현재 1.6까지 나와있다.


덧) 처음볼때는 무슨 소리인지도 모르고 보긴 했지만 여태 내가 읽은 책중에는 가장 많이 참고하고 찾아본 책이다. 자바스크립트 코딩을 할때도 비슷한 경우에 어떤식으로 코딩했는지도 참고할 수 있고 Prototype Framework의 메서드를 어떻게 사용해야 하는지 찾기도 유용하다.
(2008-03-15)

My Comment..
처음에는 책을 무작정 사던 시절이 있었다.. 그런데..
개발이란 것을 정식으로 하면서.. 오히려 책보단 인터넷에 있는 예제 소스 위주로..
보게 되더란.. 걍 급하게 아웃풋을 위해서 쓰고 버리게 되는것이라고 해야될까..
하지만, 햄의 블로그를 어느정도 보고, 정리가 되고..
내가 순수하게 올리는 글을 쓰게 되면..
그 때 쯤부터는 형한테 혹은 칭구한테 추천을 받아서 나도 책을 조금씩이라도 봐야겠다..
설령 기술적인 책이 아니더라도..
개발에 대한 개념이나 인식을 바꾸게 될 수 있는 책이라도..
보면서 깨닫고 느끼고.. 가야겠다..

[JS]prototype.js사용시 $에서 변수 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

prototype.js에서 가장 대표되는게 축약형 함수 $이다. 아주 간단한 거이긴 하지만 이런걸 생각했다는 것 자체가 천재이다.

$는 자바스크립트에서 엘리먼트를 다룰때 많이 사용하는 document.getElementById("엘리먼트 ID")를 축약해서 $("엘리먼트 ID")로 편하게 쓰도록 하는 것이다. 자주 쓰는 것이기 때문에 그 편리함을 이루 말할 수 없다. 물론 이걸 알기 전에는 getElementById는 알지도 못했고 보통은 document.form.Element ID를 사용했다. 다른 소스를 봐도 이게 더 많이 쓰는듯.... (근데 쓰다보면 getElementById가 오류가 생길일이 훨씬 적은 것 같다. 자연히 엘리먼트에도 id를 주는게 습관되어버리고...)

어쨌든 엘레먼트ID에 변수를 쓰고 싶은 경우가 있다. 간단히 예를 들자면 파일첨부같은거 fileup1~9까지 9개를 만들었으니 이결 for문을 돌리던지 아니면 아규먼트로 날려서 $("fileup" + num)같은 형태를 바란 것이다.(물론 저런 안 돌아간다.) 쌍따옴표 안에가 스트링이 아니기 때문에 따로 변수를 이어붙힐수도 없고 미리 이어붙혀서 저곳에 넣을 수도 없었다. 그래서 울며겨자먹기로 function을 여러개 만드는 수밖에 없었다.
좋은 해결책인지 모르지만 어쨌든 저걸 할 수 있는 방법을 알아냈다.

eval("$('fileup" + num + "').style.display = 'block'");

이렇게 하면 된다.
실행할 스크립트를 문자열로으로 이어붙히면서 중간에 변수를 넣어서 문자열을 완성한 것이다. 그리고 eval()로 감싸 주면 eval안에 들어있는 문자열을 그대로 찍어주기 때문에 결과적으론 그냥 실행이 되어버리는 것이다.


덧) 이 당시에 뭘 착각했는지 잘못된 내용을 적었다. $("fileup" + num)이나 getElementById("fileup" + num)이나 모두 이상없이 사용가능하다. 허위사실을 유포하여 죄송합니다. 꾸벅(이걸 발견하게 해준 J군에게 감사한다. ㅋ)
(2008-03-17)

[JS]서버측 페이지가 2번 로딩되는 문제..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

개발을 하다보면 항상 머리아프게 고생시킨 문제는 어이없는 문제인 경우가 많다. 이번에도 역시 그랬다. 이 문제 때문에 하루 업무를 다 날렸다. 오전 11시부터 저녁 8시까지 이것만 붙들고 있었으니 머리가 아플만도 했다.

이건 트러블슈팅(?)쪽이나 마찬가지기 때문에 제목을 저렇게 달기는 했지만 서버측 페이지가 2번 로딩된다는 것을 알아내는 데도 한 5시간 걸린듯 하다. 왜냐하면 2번 로딩된다는 생각은 상상도 못했기 때문에.... 팀장님이 한번 그얘기를 하고 나서 아니라고 대답한 후에 한참있다가 혼자 종이에 적다보니 2번 로딩이 된다면 모든게 이치에 맞았다. 왜 2번되는지만 모를 뿐..... 일단 소스를 좀 보자.

deleteComentProc.asp

sql =       " SELECT * FROM tbl_fob_comment "
sql = sql & " WHERE commentid='" & commentId & "' AND cmt_password='" & cmtCheckPass & "' "

rs.open sql,con, 3, 1, adCmdText

if rs.EOF = false then
    sql = " DELETE FROM tbl_fob_comment WHERE commentid='" & commentId & "' "
    con.Execute(sql), , adCmdText + adExecuteNoRecords

    sql =       " UPDATE tbl_fob_article SET atc_commentcount = atc_commentcount - 1 "
    sql = sql & " WHERE articleid='" & articleid & "'"
    con.Execute(sql), , adCmdText + adExecuteNoRecords

    resultMessage = "삭제 되었습니다."
else
    resultMessage = "비밀번호가 틀렸습니다."
end if

코드는 ASP코드이지만 서버단 언어는 상관없다.(원인이 이쪽이 아니니까... 이것만 몇시간을 봤는지...) 혹 ASP를 모르시는 분을 위해 설명을 드리자면(필요없는 코드는 빼고 메인로직만 썼다.)

게시판에서 코멘트를 단 것을 삭제하는 부분이다. POST로 코멘트의 id값(commentId)와 비밀번호(cmtCheckPass)를 받고 그걸로 쿼리를 해서 결과값이 있으면 if문에 들어가서 코멘트를 지우고 게시판의 코멘트 갯수를 하나 줄여주고 결과값이 없으면 else로 빠져서 비밀번호가 틀렸다고 뿌려주는 간단한 코드이다. ㅡ..ㅡ

근데 코멘트 삭제를 하면 화면엔 비밀번호가 틀렸다고 찍히면서 실제로 코멘트는 삭제가 되었다. 물론 비밀번호를 틀리게 입력하면 비밀번호 틀렸다고 정상적으로 나온다. if문 안에 출력도 해보고 별의별짓을 다 해봤지만 if문 안에 들어간건 아무것도 화면에 출력되지 않고 오직 쿼리만 실행되었다. 진짜 미치는줄 알았다.

"코드는 거짓말을 안해"가 내 개발 신조였는데 거짓말하는줄 알았다. 제길슨......

그러다 위에 말했듯이 이 페이지가 Delay없이 2번 로딩이 되면 모든 것이 이치에 맞다는 것을 깨달았다.(5시간만에.. ㅠ..ㅠ) 첫번째 로딩에서 비밀번호가 맞으니까 if문에 들어가고 코멘트를 지우고 2번째 로딩되면서 이미 지웠으니까 rs에 아무것도 안나오고 else에 빠지고 비밀번호가 없다고 출력하는 것이다. ㅡ..ㅡ

이 소스 아래쪽에선 resultMessage를 자바스크립트를 이용해서 alert했기 때문에 서버사이드에서 2번 로딩되는 현상이 클라이언트 사이드인 자바스크립트는 그냥 무시해 버린 것이다.

이 환장하던 문제의 발단은 일단 나였다.(당연하겠지... 내가 짰으니.. ㅡ..ㅡ) 전에는 안그랬었는데 개발자가 본격적으로 되면서 웹표준과 크로스브라우징에 상당히 민감하게 되었다. 우리팀은 아직 그런 부분에 대한 마인드가 전혀 없기 때문에 이 혼자하는 프로젝트에서 그걸 적용해보려던게(잘 모르면서) 화근이 되었다.

Html

<!-- // view.asp -->
<script type="text/javascript">
    ...................
    function goDeleteCommentSubmit()
    {
        $("formFobComment").action = "fob_CommentDel.asp?boardid=<%=boardid %>";

        $("formFobComment").submit();
    }
    ...................
</script>

<form id="formFobComment" method="post" action="">
    ...........
    <input type="hidden" id="commentId"       name="commentId"       value="" />
    ...........
    <input type="password" id="cmtCheckPass"  name="cmtCheckPass" />
    ...........
    <input type="submit"   id="cmtPassSubmit" name="cmtPasSubmit" value="확인" onclick="goDeleteCommentSubmit();" />
</form>

이번에도 역시 필요한 코드만 써 넣었다. 이렇게 핵심부분만 놓아놓고 보니 이해가 되는가? 이제 이쯤 되면 눈치까야된다.. ㅠ..ㅠ

웹표준의 기본은 태그를 용도에 맞게 쓰는 거라고 생각한다. 그래서 그걸 따르고자 submit을 썼다. 근데 우리팀에선 이렇게 안한다. 보통은 그냥 <button>만 사용하고 난 우리소스에선 submit버튼은 본적두 없다. 당연히 button을 쓰기 때문에 자바스크립트 function에서 Validation을 해 준 다음에 폼.submit()을 사용한다.

기존소스를 왔다갔다 하면서 작성하다 보니 이게 섞여 버린거다. 혹시라도 설명이 부족할까봐(난 친절하다. ㅡ..ㅡ) 자세히 설명하면 type=submit은 클릭(또는 Enter)하는 순간 submit이 발생하고 javascript에서 form.submit()을 했으니 또 submit이 발생한 것이다. 연속으로 두번 submit이 발생하고 서버측인 deleteComentProc.asp페이지가 2번 로딩된것이다. 아~~주 자연스럽게 2번이 되기 때문에 감쪽같아서 디버깅도 무지 더럽다.(지금 생각하면 if문안에 Response.End로 멈춰버렸으면 될것 같지만.. ㅡ..ㅡ)

view.asp에 form이 또 있어서 폼이 2개 있어서 그런가 해서 한 7시간정도 고민했을때 폼까지는 지워봤지만 이건 생각도 못했다. 과장님이 3시간 대리님이 3시간 같이 붙들고 있었지만 개발쪽에서 막구른 우리형한테 물어보고(이때쯤 submit버튼을 의심하고 있긴 했었는데 더이상 만져보기도싫은 상태였다.) 1분만에 해결했다. ㅡ..ㅡ 역시 개발을 막 굴러야대... 경험이 짱이야....

이날의 교훈.... 웹표준은 어렵다... 경험이 짱이다.. 일단 막 구르고 보자...

2016.03.04 추가 & 수정..
하아.. 문제 해결을 하고서 바로 글을 남긴다.. 혹시라도 잊어버릴까봐.. 또한, 나 스스로에 대해서 다시 각인시키고자 남긴다.. 정말 위에 글과 똑!!!!! 같은 상황이었다.. 왜냐구..?? 결과론적으로만 보면, form 안에서 submit 을 하고 있었고, function 안에서 또 .submit() 을 하고 있었다.. 그런데 더욱 문제는 전혀 모르고 있다가 BC IT 현업과 로그 확인하는 도중 알았다는거지 ㅡㅡ.. 된장;;; 그대로 반영했으면 어쩔;; 왠열;;; 호출이 2번 된다는 것을 인지하고서 뒤늦게 부랴 부랴 보니 감이 안오더란.. 그러다가 submit 을 유심히 보는데 순간 머리를 스쳐지나가는 '블로그에 2번 로딩!!!' 이것이었다.. 그래서 찾아서 보니 아뿔싸!! 햄과 똑같은 실수를 한 것.. 그래서 한쪽 submit 을 제거해서 바로 해결.. 아오 다음에는 같은 실수 하지 말자.. 완전 시험망치고 집에와서 답을 봤는데.. 몇일이 지나도 잊어먹지 않을듯한 그런 기분과 느낌이다..

그리고 글 덧붙이는 김에 나중에 알게 된 hilite 로 소스코드도 같이 수정했당.. 조금 더 깔끔해보이는군.. ㅋㅋ..

그나저나 왠지 모를 이 뿌듯함은 머란 말이냣..!!!!!!