[EP]Microsoft UX 기술여행 3주차 "WPF A부터 Z까지"..

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

2주차때 한번 참석해 보고는 괜찮아서 계속 참석해 보려고 하고 있다. 시간의 압박도 있고 의지의 압박도 있고 이렇게 세미나를 참여 하는 것은 공부하고 익히는데 도움이 되기 때문에.... 일단 난 아직 VS 2008도 못깔았지만 그래두 어떤식으로 실버라잇이라는 녀석이 돌아가는 것이 약간은 이해가 가고 있다.

3주차는 WPF에 대한 부분이다. 알다시피 WPF는 Windows Presenatation Foundation이고 윈도우 비스타가 출현하면서 이곳에서 화려한 그래픽 UI를 표현하기 위해서 만들어 진 녀석이다. 비스타의 에어로 기능 같은 걸 생각하면 된다. 그리고 이 WPF를 웹에서 할 수 있게 만든게 실버라이트이다. WPF는 실버라이트랑 같다고 할수는 없지만 베이스는 같고 따로 분류할 때가 없어서 그냥 여기나 집어넣었다.

결과부터 말하자면 3주차 세미나는 2주차 보다는 좀 못한 느낌이었다. 바빠서 그랬던 것인지 약간 준비가 부족한 느낌을 받았다. 배운게 없는 것은 아니고 발표 준비하신 분들에게는 미안하지만 실제로 느낌게 좀 그랬다. 어쨌든 3주차 세미나는 닷넷채널에서 진행을 하였다.

WPF는 또 나랑은 분야가 다르기 때문에 쉽게 이해하기는 약간 어려웠다. 대충 내가 이해한 걸 좀 정리하는 차원이 될 것 같다.

• 닷넷 2.0부터는 상위호환성을 유지하고 있기 때문에 닷넷 프레임워크 3.5를 깔면 2.0부터는 다 사용할 수 있다. 닷넷 2.0코드도 약간의 컨버전만 하면 동일하게 사용할 수 있다.
• WPF는 Vista의 UX를 위해서 XML로 설계된 UI이고 XML을 통해서 디자이너와 공유하게 된다.
• 닷넷과는 달리 보통 그래픽에서 사용하는 GDI+를 사용하지 않고 Milcore라는 중간 레이어를 통해서 직접 DirectX에 접근한다.
• 플랫폼 인디펜던트 하다는 것은 다른 말로 하면 최적화가 어렵다는 뜻이기도 하다. Flex같은 경우는 Platform Indepentant하기 때문에 HW에 접근할 수 없어서 자연히 CPU의 부하가 커진다.
• XAML의 각 부분을 객체로 파싱해서 메모리에 올리기 때문에 빠르고 빌드할 때 binary형로 만든다.(그냥 XAML을 읽어서 사용하는 경우에는 해당되지 않는다.)
• XAML은 객체의 표현이다.
• Gabage Collect는 고려해야 한다.
• 실버라이트는 2D만을 지원하지만(2D로 3D효과를 낼 뿐) WPF는 Vector형태의 3D객체를 직접 다룰 수 있어서 Full 3D를 지원한다.
• MS에서는 아직 3D를 위한 프로그램이 나오지 않았지만 ZAM3D(3DMAX파일 지원)라는 프로그램을 이용하면 3D로 만든 것을 XAML로 내보낼 수 있다.

WPF 활용 3종 세트

1. Full WPF Application : 성능을 최대한 끌어올릴 수 있는 형태이다. 닷넷프레임워크 3.x대가 필요하고 XP이상에서만 사용가능

2. XBAP[XAML Browser Application] : Xbap을 이용하면 WPF로 만든 것을 그대로 웹으로 올릴수 있다. (단 IE에서만 가능하다.), 모든 코드를 HTTP를 통해서 받으며 Sendbox보안모델의 적용을 받는다.

3. 실버라이트 : 실버라이트 플레이어에서 실행되며 Sendbox보안 모델의 적용을 받는다, 운영체제에 상관없이 사용할 수 있으면 대부분의 브라우저를 지원한다.
WPF는 CS단을 위한 것 이지만 Xbap[XAML Browser]을 이용하면 WPF로 만든 것을 그대로 웹으로 올릴수 있다. (단 IE에서만 가능하다.)

WPF는 일단 웹이 아니고 개발언어의 대한 나의 지식이 조악한 관계로 흘려들어야 하는 부분이 많았고 뒤에 앉아서인지 집중하기가 좀 어려웠다. 가장 큰 이유는 상당부분이 지난번 세미나랑 겹친 부분이다. 물론 각 커뮤니티에서 준비하는 거고 Silverlight에서 중요한 건 WPF에서도 중요한 거지만 24주라고 대대적인 광고를 하고 도장까지 찍어주면서 참여를 유도하는 만큼 강좌의 흐름을 이어줄 책임이 MS측에 있지 않나 하는 생각이었다.
더군다나 중간에 디자이너와의 협업이라는 이름으로 진행된 부분은 지난번과 완젼히 겹치는 부분이면서도 발표는 발표라고 하기도 어려웠다. 익스프레션 키는데도 한 5분 걸린것 같고 머 기능하나 보여주는데 기본적으로 5분씩은 걸린것 같다. 5분동안 혼자 만지다가 이렇게 됩니다. 하고 또 다시 5분.... 지난번에 보지 않았다면 머하는지도 몰랐을 듯... 나도 회사에서 발표해봤지만 발표하기가 쉽지 않은 건 이해하지만 MS의 이름을 걸고 하는 세미나에서 이런 부분은 꽤나 아쉬운 부분이었다.

관련 발표자료는 이 곳에서 다운로드가 가능하다. 강의를 촬영한 웹캐스트도 같이 제공하고 있으며 PPT자료도 제공하고 있다. MS 로그인이 필요하다.



내 이해력부족으로 정리내용이 좀 빈약하기도 하고 그래서 그동안 있었던 실버라이트 관련 정보를 추가로 좀 적겠다.

1. 일단 실버라이트 1.1의 버전이 2.0으로 변경이 되었다. MS의 여태의 행보로 보아 욕심은 컸는데 Adobe가 계속 시장을 먹고 있는 건 못보고 있겠고 관심도 더 끌기 위해서 js가 베이스코드인 실버라이트를 1.0을 먼저 출시했다. 그리고 추가적인건 1.1에서 해줄께!! 라고 했는데 이게 단순히 0.1버전의 업글 수준이 아닌 수준이 되어버렸고 MS도 그걸 깨달았는지 얼마전에 내년에 발표예정이었던 실버라이트 1.1의 버전을 2.0으로 변경했다.

2. xbap에 대한 얘기가 본문에 있었는데 이걸 볼수 있는 사이트를 하나 소개하겠다.

영국 국영도서관에서 xbap으로 서비스를 하고 있다. 참고로 링크를 따라가면 나오는 닷넷프레임워크 3.5를 깔아야 한다. 시간은 꽤 걸린다. 일단 IE랑 네이트온등을 꺼주어야 프레임워크를 깔수 있다. 재부팅하라고 나오는데 재부팅은 하지 않아도 된다. 좀 느리긴 하지만 여러 효과가 볼만은 하다..

3. 엠넷이 실버라이트 1.0으로 된 서비스를 오픈했다. 국내에서는 SBS의 nView에 이어 두번째인데 개인적으론 nView보다는 훨 멋지다. 깜짝! 놀랬다. 실버라이트를 계속 좀 관심 주면서 실버라이트가 강세를 보여줄수 있는건 화려한 메뉴나 그런것 보다는 동영상쪽이라고 생각을 했는데 그걸 여실히 보여주었다.
알려진 바에 의하면 1.1로 다 작업이 되었었는데 1.1의 출시가 내년이 되면서 상업적 라이센스가 없기 때문에 1.0으로 다시 변환을 했다고 한다. 닷넷으로 한걸 Javascript로 만드는데 이렇게 퀄리티가 좋을 수 있다니... ㅠ..ㅠ 공도님이 프로젝트를 진행하셨다고 한다...

죽인다... 동영상을 보면서 옆에서 끌어다가 화면에 던지면 PIP[Picture In Picture : 화면안에 또 하나의 화명을 보여주는 것을 말한다.]로 동작한다.  PIP화면을 이동할수 있고 클릭하면 주화면과 바뀐다. 풀스크린으로 볼수도 있고 아래 관련영상도 나오고 현재 영상의 일부구간을 따로 저장할 수도 있다.

신기술을 저렇게 멋진 서비스로 만들수 있는 개발자들의 환경이 부럽고 저걸 기획해 낼 수 있는 기획자가 부럽다...

[JS]prototype.js로 스크립트 제거하기..

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

prototype.js의 대단함에 또한번 놀랐다. 프레임워크를 쓴다는 것은 프레임워크에서 제공하는 편리함을 이용하고자 함인데 실제로는 별로 못쓰고 있다. 몇천줄짜리 js파일을 불러오고는 기껏 쓰는데 $와 $F가 전부이다. js프레임워크에 관심이 많아서 사용성을 늘리고 싶지만 생각처럼 쉽게 안되더군...

그래서 하나씩 쓸때마다 정리를 하려고 한다. 한번 쓴것은 다시 쓸 가능성이 높다? 정도? ㅋㅋㅋㅋ

스크립트를 날려버릴 필요가 있었다. 정확히는 게시판에 에디터를 달았는데 보통 에디터에서 그렇듯이 HTML모드와 편집모드가 있는데 스크립트를 처리하는 부분이 없어서 HTML모드에서 스크립트를 작성하면 그게 그대로 먹어버린다.

얼마전에 내 홈페이지에서도 제로보드가 처리 안되어 있어서 당했었는데... 단순히는 alert로 당난칠수도 있지만 좀 악의적으로 쓰려면 게시판의 HTML모드에서

Html

<script type="text/javascript">
    window.onload = function() {
        document.location.href="http://www.naver.com";
    }
</script>

이런 소스를 넣어버리면 글을 읽으려고 제목을 누르는 순간 네이버로 바로 가버린다. ㅡ..ㅡ 이렇게 되어버리면 리스트에서 관리자가 글 삭제기능이 있지 않는한은 DB를 직접 만져줘야 한다.

그래서 이런 저런 고민중 script를 전체적으로 날려버리기로 했다. <script></script>가운데는 뭐가 올지 모르기 때문에 정규식으로 이부분을 다 날려버려야 했고 좋은 의도로 스크립트를 쓸일은 없으니 그냥 날리기만 하면 됐다. 난 정규식을 잘 못쓰기 때문에 의례 그렇듯이 검색에 들어갔고 곧 네박사에서 민이님의 블로그에서 내가 필요한 걸 얻었다.

Js

// script부분 정규식으로 없애기
function removeScript()
{
    var re = /\r\n/g
    var strBox1 = document.all.box1.value;
    strBox1 = strBox1.replace(re, "@!-_-!@");
    re = /<\s*script.+?<\/\s*script\s*>/gi
    strBox1 = strBox1.replace(re, "");
    re = /@!-_-!@/g
    strBox1 = strBox1.replace(re, "\r\n");
    re = /^\r\n/g
    document.all.box2.value = strBox1.replace(re, "");
}

내가 짠 소스는 아니지만 소스를 좀 비교하기 위해서 발췌했다.(ㅡ..ㅡ) 딱 봐도 복잡하지만 찬찬히 보면 아주 어렵지는 않다. 줄바꾸기를 이모티콘(??)으로 교체한뒤에 스크립트 부분을 다 날려버리고 다시 이모티콘을 줄바꿈으로 교체해 준 다음에 다시 원래 값에 할당해 준 것이다.

잘 돌아가고 만족하고 있던 가운에 추가로 검색을 하던 가운데 구글링에서 중간에 prototype.js가 나와있는 글의 일부가 보였고 이 역할을 해주는 메서드가 들어있는 걸 알았다 ㅡ..ㅡ

이미 prototype.js를 사용하는 상황에서 이걸 사용안할 이유는 없었다.

Js

$("box2").value = $F("box2").stripScripts();

이렇게 간단히 바뀌었다. ㅡ..ㅡ(이거 돌아가겠지? $F가 신경쓰이네.. ㅡ..ㅡ 실소스에선 에디터라 변수를 사용한 관계로 그냥 보고 적었는데.. ㅎㅎㅎ 어쨌든...) 12줄의 코드가 단 1줄로 바뀌었다. 진짜 prototype.js만 잘 써도... ㅡ..ㅡ

참고로 HTML태그를 벗겨내고 내용만 가져오는 stripTags()도 있다.

[AJAX]잘 알려지지 않은 AJAX 활용 기법..

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

이 내용은 웹월드 컨퍼런스 3일차의 디앤샵의 에반젤리스트이신 이상용님이 발표한 내용을 정리한 것입니다.
AJAX는 이제 웹의 필수적인 부분이 되어버렸다. 이젠 너무나도 익숙해 졌기 때문에 내가 만난 사람들 중에는 웹페이지가 새로 로딩되지 않고 일부만 바뀌는 것이 얼마나 신기한 기술인지 모르는 사람들도 많다. 전에도 아이프레임등으로 할 수도 있었고 순간의 동작이라서 웹에 대해 잘 모르면 새로 로딩된다는 것 조차 모르는 경우도 많기 때문에....

AJAX가 이제 필수 기술이 되었다고 하더라도 무엇이든 그렇듯이 남용되는 것은 좋지 않다고 생각하지만 AJAX는 아직은 나에게 신기한 기술이고 빨리 익혀서 내맘대로 쓰고 싶었다. 현재로써는 AJAX는 제대로 쓰지못하고 prototype.js를 이용해서 AJAXrequest객체를 이용해서 하는 것만 수정해서 사용할 줄만 안다. ㅡ..ㅡ

어쨌든 AJAX가 XML Request를 이용하는 기술이지만 AJAX의 의미만을 생각한다면 비동기통신을 이용해서 페이지로딩을 하지 않고 일부만 바꾸는 기술을 의미하고 있고 이 세션에서는 이렇게 하는 기술을 소개했다.

1. Hidden Frame을 이용하는 방식이다. 이것은 상당히 고전적인 방식인데(나도 몰랐다 ㅡ..ㅡ 입사하고 동기가 물어봐서 그렇게 해결했다는 것을 듣고는 그렇게도 하는구나 알았을 뿐.. )

frameset에서 높이가 0짜리 히든프레임을 하나 만들어서 그 히든 프레임을 통해서 통신을 하는 것이다. 보이지만 않을 뿐 하나의 페이지랑 똑같기 때문에 현재 페이지에서 히든 프레임의 페이지로 값을 전송하고 히든프레임이 값을 처리하고 다시 보내주는 것이다.

구현하기가 상당히 쉽고 실제적으로 페이지간의 전송과 동일하기 때문에 GET, POST, File Upload를 모두 사용할 수 있지만 페이지 클릭소리가 나는 문제점이 있고 보이지가 않아서 예외처리도 힘들다.

2. Dynamic Scripting이라고 이상용님이 소개한 기술로 개인적으로 제일 선호하는 기술이라고 한다.

이건 내가 좀 이해하기가 쉽지 않았다. 좀 해봐야 할듯... 설명을 하자면 그냥 통상적인 웹페이지가 있고 스크림트 부분에서 스크립트 오브젝트를 생성한다.

Html

<script type="text/javascript">
    scriptObj = document.createElement("SCRIPT");
    scriptObj.src = "ajax2.js";

    document.body.appendChild(scriptObj);
</script>

이렇게 해놓고 ajax2.js는 document.getElementById("000").innerHTML = "....."; 의 형태를 가지고 있다. 설명을 하자면 저 js파일이 특정 앨리먼트의 코드를 교체해주는 역할을 하고 있는 것이다.

구현이 쉽고 변수를 공유할수 있지만 일반적인 GET/POST의 전송방식은 사용할 수 없다. 원리자체는 이해가 가는데 정확히 어떤식으로 다양하게 써야 하는지는 감이 잘 오질 않는다.

3. 세번째는 통상적인 XML Request를 이용한 방법인데 이부분은 따로 적지 않겠다.


히든 프레임과 XML Request는 부하가 좀 큰 편이고 Dynamic Scripting을 적절히 이용하는 것이 좋다고 한다. 좀더 지식이 쌓이면 활용하기 위해서 기록해 놓는다.. ㅡ..ㅡ

[JS]자바스크립트 개발가이드..

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

이 내용은 웹월드 컨퍼런스 2007에서  Daum UI개발팀의 구경택님이 29일에 발표하신 세션의 내용을 정리한 것입니다.

현재 우리가 사용하고 있는 자바스크립트는 1.5버전을 사용하고 있다. 자바스크립트 2는 현재 Working Draft[최초의 제안국이 제출하는 초안을 말하며 국제 표준화 기구 ISO 국제 규격의 기준이 되는 것]까지 나온 상태이다.

내가 자바스크립트를 공부한지 얼마 되지 않았기 때문에 이해를 못하는 부분도 약간 있었다. 대충 이해하고 도움이 될것 같은것 위주로 정리를.. ㅎㅎㅎ

Js

// Functions are First-Class Object 
function sum(a,b) {
    return a + b;
}

var sum = function(a, b) {
    return a + b;
}

펑션이 First-Class Object라는 의미는 잘 이해하지 못했지만 두가지형태 모두 사용이 가능하다. 아래 형태는 prototype.js를 사용할 때 익숙치 않아서 이해할때 가장 어려움이 있었던 부분.

Js

// Suports functional scope only
function showSum(a, b) {
    var c = function() {
        alert(a + b);
    }
    return c;
}

var sum = showSum(2, 3);
sum();

제한적인 영역을 가지는 펑션이다. c의 경우에는 리턴을 받는 것 외에는 밖에서 제어할 수가 없다.

Js

// Supports closure 
function add_x(x) {
    return function(y) { return x + y; };
}

var f = add_x(3);
f(4);

클로저 지원이다. 말은 들은 적이 있는데 잘 감이 오질 않는다. 저걸 실행하면 f(4)가 7 이란 값을 리턴해준다. 이해는 잘 못하지만 먼가 신기하다. 클로저란게 원래는 3으로 함수를 호출했을때 x가 할당되고 함수가 끝나면 x의 값이 사라져야 되는데 그렇지 않고 남아있게 되는거다. 아직 내공이 부족해서 정학이 어떤 상황에 써야할지는 감이 잘 오질 않는다. 클로저에 대해 알아보려고 찾은 괜찮은 글이 있어서 링크를 건다.


이하는 자바스크립트를 객체지향으로 사용하는 법에 대한 부분이다.

Js

// Constructor 
var car = function(name, cost) {
    this.name = name;
    this.cost = cost;
    this.feature();
}

car.prototype.feature = function() {
    alert("name : " + this.name + "\n cost : " + this.cost);
}

var sonata = new car("쏘나타", 2000);

추상화(Abstraction)부분이다. prototype.js를 이해하려면 필수적으로 이해해야 할 부분이라고 생각된다. 처음 봤을때는 꽤나 당황했었지만 저런 패턴을 많이 사용하고 복잡한 스크립트일수록 저렇게 객체로 만들어 쓰는건 유용한것 같다. 당연히 OOP는 검증된 패턴이니까....

Js

// Overloading
var sum = function() {
    var args_len = arguments.length;
    switch(args_len) {
        case 0:
            statement.....;
            break;
        case 1:
            statement.....;
            break;
        ............
    }
}

C할때 지겹도록 배우던(배우기만 지겹게 배웠지 이해는 잘.. ㅋㅋ) 오버로딩이다. 기본적으로 자바스크립트는 오버로딩을 지원하지 않는다. 파라미터 갯수가 달라도 기본적으로 오류가 나지 않고 알아서 해주기 때문에 오버로딩을 해주지 못하는데 그걸 이런식으로 해결한 것이다. 어려운 스크립트는 아니지만 순간 "천잰데?" 하는 생각이 들었다. 아규먼트 갯수를 세어서 오버로딩을 할 수 있게 해준다. 물론 연산자 오버로딩은 안된다. ㅎㅎ

Js

// function Overloading
switch(args_len) {
    case 0:
        if(typeof(arguments[0]) == "Number") {
            Numeric Operation...
        } else if(typeof(arguments[0]) == "String") {
            String Operation....
        }
    case 1:
        statement.....;
        break;
    ............
}

오버로딩을 이런식으로 하면 아규먼트 타입에 따라서도 다르게 할 수 있다. 신기한게 참 많군..

Js

// Overriding
var car = function(name, cost, gasoline) {
    this.name = name;
    this.cost = cost;
    this.fuel = gasoline;
}

car.prototype = {
    use_fuel : function(offset) {
        this.fuel -= offset;
        return this.fuel;
    }
}

var avante = new car("avante", 1500, 2000);
var sonata = new car("sonata", 2000, 3000);

sonata.use_fuel = function() {
    return this.fuel;
}

OOP의 상속성을 보여주는 부분이다. 이를 위해서 자바스크립트는 prototype이라는 메서드를 제공하고 있다. 그냥 sonata.use_fuel()을 하면 8번라인의 use_fuel이 실행된다. 하지만 17번에서 sonata.use_fuel()을 다른 메서드로 재정의 해 줌으로써 sonata.use_fuel()을 하면 17번 라인의 use_fuel이 실행된다. Overriding된 것이다.

Js

// Encaptulation, Data Hiding
var car = function(name, cost, gasoline) {
    this.name = name;
    this.cost = cost;
    var fuel = gasoline;
    function use_fuel(offset) {
        fuel -= offset;
    }
    this._useFuel = function(offset) {
        use_fuel(offset);
    }
}

var sonata = new car("sonata", 2000, 3000);
sonata._useFuel(10);

캡슐화와 정보은닉화 부분이다. 함수를 이렇게 구성하면 4, 5번라인의 fuel과 use_fuel은 Private Member가 되고 8번줄의 _use을 통해서 Private Member에 접근한다.

이상이 OOP에 대한 부분이고 이하는 그외 몇가지 도움이 될만한 코딩들이다.

Js

// Flexibility of Javascript
var target = e.srcElement || e.target;

var index = (index >= 0) ? index : 0;

function oneRun() {
    .................
    .................
    oneRun = function() {}
}

1번은 둘중에 유효한 값이 자동으로 들어간다. (이거 꽤 유용할듯..)
나도 3항연산자는 잘 안쓰는 편이데 3항연산자로 변수할당도 가독성도 괜찮고 간단히 짤수 있어서 좋은듯...
5번줄의 oneRun은 괜찮은 아이디어같다. 이게 머냐하면 단 한번만 실행이 되어야 하는 메서드이다. 메서드를 다 실행안다음에 자신은 empty로 초기화 시켜버림으로써 단 한번만 실행할 수 있게 한다.(fake overliding)

Js

// innerHTML
var strHTML = "<div id = 'abcd'>";
strHTML += " HTML 텍스트....";
............
strHTML += "</div>";

innerHTML을 쓸때 보통 위와 같은 형태로 string을 만들어서 사용하는데 이것은 상당히 부하가 크다. 과정을 설명하자면 1번줄에서 공간을 확보하고 string을 할당하고 2번줄에서 추가되기 때문에 이전꺼는 지운다음에 string을 이어붙힌 만큼의 공간을 다시 확보하고 할당한다. 이과정이 계속 반복되는 것이다. 그래서 아래와 같이 사용하는 것이 더 좋단다.

Js

// innerHTML
var strHTML = new Array();
strHTML.push("html 텍스트");
..........
return strHTML.join("");

스트링을 배열로 만든 뒤에 join()으로 스트링을 이어붙힌 것이다. join은 인자로 각 배열을 스트링으로 이어붙혀주느데 인자로 아무것도 주지 않았으므로 text가 그냥 이어붙혀진다. 이렇게 사용할 경우 IE에서는 더 빠르고 Firefox에서는 두 방법의 속도가 비슷하다고 한다.

Js

var value = document.getElementById("inputbox").value;
var diabled = document.getElementById("inputbox").disabled;
value = "검색어";
disabled = true;

객체의 속성을 사용할때 반족될 경우 위처럼 사용한 것 보다는

Js

var oInput = document.getElementById("inputbox");
oInput.value = "검색어";
oInput.disabled = true;

이렇게 변수에 할당해서 하는 것이 더 빠르다. 전자의 경우는 매번 찾는 과정을 반복하게 된다.

Js

// form submit handler의 올바른 사용법
<form onsubmit="return handler();">
    <input type="image" ...>
</form>

function handler() {
    if(condition) {
        return false;
    }
    return true;
}

이부분은 약간 태그의 올바른 사용법에 해당하는 부분이다. 우리팀도 웹표준에 대한 부분이 잘 정립이 안되어 있기 때문에 이렇게 사용안하고 inpu type=button에다가 onclick="checkValid();"를 주어서 값이 맞을 경우에만 form.submit을 한다. 근데 이건 동작은 기본적으로(?) 같기는 하지만 올바른 방법은 아니다. 왜나하면 type=submit이란 태그가 존재하고 이를 사용하면 자동으로 submit으로 동작을 하니까...(type=image도 똑같은 submit이다. 이미지버튼이란 점 빼고...) 이부분은 약간 애매하긴 하지만 올바르게 용도대로 사용할 때의 이점도 있다. 이부분에 대해선 따로 포스팅하겠다.

submit버튼을 사용하면 자동으로 submit이 되므로 Validation체크를 할 시간이 없기 때문에 onsubmit핸들러를 통해서 Validation체크를 해주도록 하는 것이다.


또한 프레임워크 사용에 대해서도 약간 주의를 주었다. prototype.js를 사용하면서 $()만 사용하는 경우도 많은데 이럴결우 몸짓만 커지고 느려질수가 있다.(내가 그렇다. ㅡ..ㅡ $와 $F만...) 프레임워크를 사용하려면 최대한 활용을 하자...

[EP]웹월드 컨퍼런스 2007 DAY3 "개발/기술" 참가후기..

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

원래부터 있던 행사같지는 않지만 웹월드라는 거창한 타이틀로 웹월드 컨퍼런스 2007이 개최되었다. 지난 달에 알게 되었고 셋째날이 개발관련이었기 때문에 회사에서 보내줘서 갔다가 왔다.

 원래는 못갈 뻔했다. 유료컨퍼런스라서 신청이 급하지 않다고 생각했는데 다른부서에서 먼저 신청하신 분이 있어서 내가 올렸을때는 중복으로 교육받는다고 짤렸다. 우리회사가 거진 200명 규모인데 2명간다고 중복이라니.. ㅡ..ㅡ 좀 당황스럽지만 그래도 다행히 다른분이 나한테 양보를 해 주셔서 개발관련 부분에 참가할 수 있었다.

유료컨퍼런스는 처음 참가해 보는 것이었다. 이전까지는 보통 학생이었던 습성인지 항상 무료세미나만 참가했었는데 과장님이 항상 가는건 유료를 가라구 해서 이번에 처음으로 유료를 갔다 왔었는데 결론부터 얘기하자면 그닥이었다 ㅡ..ㅡ 너무 포괄적으로 하려고 해서 수준을 맞추기가 어려웠는지 유료.. 거기다가 10만원짜리라는 걸 생각하면 크게 얻는게 없었다.(물론 내가 이런걸 평가하는 건 내가 얼마나 정보를 습득했는지에 달린 것이다. 다른 사람들은 다를지도...)





오전에는 "개발 플랫폼으로서의 엡의 진화와 향후 전망"이라는 제목으로 첫 세션이 진행되었다.

이제는 웹을 플랫폼이라고 본다는 것으로 클라이언트 기술, 서버기술, 콘텐츠 기술, 오픈스탠다드로 이루어져 있는데 이 플랫폼을 통해서 Open API와 Mashup을 이용한 서비스 형태가 생겨나고 있다. 해외에는 매쉬업이 좀 활발한 편이지만 국내는 아직 쓸만한 것들이 없는 당황이다.

주요 웹 플랫폼으로는 Amazon AWS, Google API, Windows Live, Facebook F8정도가 있다.

아직은 크게 감이 오질 않는 것이었다. 이전처럼 플랫폼이라는 말에 맞추기 보다는 그냥 웹 자체가 더 어울린다는 생각이었고 결국 여기서 말하는 플랫폼은 오픈API랑 완젼히 같은 말이라고 생각되었다. 첫 세션의 특성상 개념적인 말을 할 수밖에 없었지만 뻔한 얘기라 좀 식상했다.

두번째 세션은 "웹개발자가 놓쳐서는 안될 웹기술 최신 트랜드 및 향후 전망"으로 진행이 되었다. 웹2.0과 요즘 웹의 트랜드에 대한 설명이 있는 시간이었다.

참여와 공유, 개방이라는 큰 주제를 가지고 웹 2.0의 서비스들이 이루어지고 있다.

Web Technology Family Tree (출처 : Modern Life)

OSS[Open Source Software]가 웹 2.0에서는 주요한 위치를 차지하고 있고 이제는 대형밴더들도 적극적으로 참여하면서 그 입지가 높아지고 있다.

그외에 AJAX, RSS, Open API, RIA[Rich Internet Application의 약자로 데스크톰 애플리케이션 수준의 기능을 가진 웹 어플리케이션]등이 있다.

RIA는 향상된 인터페이스, 빠른 응답, Client/Server의 분산된 부하, 효율적인 네트워크, 비동기통신등으로 대표되며 주요기술로는 Flash, Flex, AIR, Silverlight, Open Laszlo[RIA의 개발을 위한 오픈소스 플랫폼], XUL[XML User interface Language, 모질라재단이 크로스-플랫폼 어플리케이션에서 사용하기 위해 개발한 언어] 등이 있다.

출처 : http://blogs.zdnet.com/BTL/?p=6560

가트너에서 발표한 2008년 10대 전략기술에 6,7, 9,10위의 기술에 웹 관련 기술이 들어가 있는 것을 볼수 있다.

웹의 최신 트랜드로 WOA[Web-Orented Architecture]와 웹자체를 분산형 데이터베이스인 "DataWeb"으로 보는 웹 데이터베이스, 새맨틱 웹, 3D웹 들이 있다.

1세션보다는 좀 알찼다. 내가 모르는 얘기도 좀 있었기 때문에... 하지만 주제상 1세션하고 겹치는 부분도 있었기 때문에 둘을 하나로 진행했으면 더 알찬 시간이지 않을까 하는 생각이 들었다.

세번째 세션은 "개발의 성과를 좌우할 웹개발 프레임워크 최신 동향 및 선택 가이드"라는 제목으로 진행이 되었다.

전체적으로 개발 프레임워크에 대한 얘기였지만 구체적으로 얘기를 하기 위해서 주로 JAVA를 기준으로 진행이 되었다. 프레임워크 관련 잇슈가 일단은 이쪽이 가장 강하니까..

개발쪽에 관련해서는 표준화가 아직 정해져 있지 않다. 이때분에 어떤 Framework를 쓰냐에 따라 개발시간, 유지보수등이 많이 달라진다. WAF[Web Application Framework]는 웹개발을 일반적인 행동들이 원할하도록 도와주는 역할을 하고 패턴을 강제함으로써 개발을 빠르게 하고 Bug를 줄일 수 있게 한다.

WAF는 공통적으로 Model, View, Controller로 분리해서 사용하는 MVC패턴을 사용하고 있다. 이전에는 View와 Controller을 합쳐놓은 Model 1을 사용했는데 이제는 MVC를 모두 분리한 Model 2를 사용하고 있다.

WAF들은 보통 Controller패턴으로 사용자가 많아지면 부하가 커지는 PageController대신 FrontController을 사용하고 있다.

또한 MVC는 push방식과 pull방식으로 나누어져 있는대 대부분의 MVC프레임워크가 push방식을 사용하고 있으며 결과를 뷰단에 밀어넣어서 보여주는 방식이다. pull방식은 뷰단이 필요한걸 가져와서 보여주는 방식을 취하고 있다. Struts, Spring은 Push방식을 사용하고 있다. Tapestry, JBossSeam, Webwork, struts2는 Pull방식을 사용하고 있다.

WAF들은 그 종류가 많기 때문에 선택이 상당히 어려운 편이다. JAVA WAF만 하더라도 25개정도가 현존하고 있다.

JWAF에
Model : JavaBean / JDO / Hibernate(java) / ibatis(SQL)...
View : Velocity / FreeMarker / WebMacro / JSPController : Struts

WAF에서 꼭 MVC를 모두 적용할 필요가 없다. 국내에서는 Struts + JSP + Hibernate나 Struts + JSP + iBartis 조합을 가장많이 사용하고 있다. 국내에서는 Model에서 Hibernate보다 iBartis를 더 많이 사용하고 있고 해외는 그 반대이다. View단에서는 국내에서는 JSP, 해외에서는 Velocity를 사용하고 있다.

또한 WAF는 한번 선택하면 바꾸기가 쉽지 않기 때문에 신중하게 선택해야 한다고 한다.

나에게는 가장 유익했던 세션이다. 아직 프레임워크를 못 써봐서 정확한 개념이 없었는데 이번 세션을 통해서 개념을 잡을수 있었고 난 솔직히 스트러츠하면 그안에  MVC가 다 포함되어 있는 줄 알았는데 우리가 얘기하는 프레임워크가 보통 Controller쪽의 얘기였다. 그리고 맨날 얘기하는 JSP가 뷰단을 얘기하는 줄도 전혀 몰랐다. ㅡ..ㅡ 오해하고 있던 부분도 이해할 수 있었고 곧 선택해야 할 프레임워크를 고민할때도 도움이 될 내용들이었다.

네번째 세션은 "커머스 사이트에서의 오픈API, 매시업 도입 및 활용가이드"라는 제목으로 진행되었다. TTB등으로 국내에서는 오픈API에 대해서 앞서가고 있는 알라딘에서 나와서 오픈API와 TTB를 개발하면서 고민했던 부부분과 국내외 사례등을 비교하면서 API의 효과등을 이야기해 주었다.

다섯번째 세션인 "국내외 리치 클라이언트 기술의 현황과 전망"은 MS쪽에서 나

[EP]Microsoft UX 기술여행 2주차 "개발자와 디자이너를 위한 Silverlight"..

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

요즘 Microsoft에서 "커뮤니티와 함께하는 24주간의 UX기술여행"이라는 제목으로 11월부터 3월까지 DNC(DotNet Channel), Taeyo.net, HOONS.NET의 대표커뮤니티들과 함께 Silverlight와 WPF에 대한 세미나를 진행중이다.

회사에서 이번달에 세비나 가기로 한게 있었기 때문에 첫번째 오리엔테이션 날은 평일이라서 가지 못하고 지난 주 토요일(24일)에 2주차 세미나를 갔다가 왔다.

주간에 계속 근무하고 토요일날 가는거라 좀 귀찮기도 하고 그랬지만 토요일날 계속 해주니까 회사 눈치안보고 갔다 올수도 있고 여기 안가도 그닥 할게 없다는 것이지...

2주차 타이틀은 "개발자와 디자이너를 위한 Silverlight"라는 제목이어서 좀 망설였었다. 일단 난 디자이너가 아니고 우리팀도 디자이너와의 협업에 상당한 에로사항이 있기는 하지만 나같은 말단이 해결책을 내놓을수도 없는거고 나랑 직접 부딪히는 건 아니란 말이지.

좀 피곤한 터라 고민하다가 말만 듣던 실버라이트 구경이나 하자는 생각으로 포스코센터로 향했다.






2주차는 HOONS.NET의 주관(?)으로 진행이 되었다. 박경훈 님이(나이 보고 깜짝 놀랬다 ㅡ..ㅡ) 사회를 보시고 첫 세션은 "거품이 아닌 실버라이트의 실체"라는 제목으로 HOONS.NET의 커뮤니티 시삽이신 최우진님이 진행하셨다.

신문기사를 위주로 실버라이트가 대충 어떤거다라고 소개하는 정도였는데 대충만 알고 있는 나로서는 큰 내용은 없었지만 실버라이트에 대해서 감정도는 잡을 수 있었다.

약간 설명하자면 익히 알려진대로 실버라이트는 Adobe의 Flash/Flex를 대항할 기술이다. 쉽게 말하면 Flash가 지금 웹의 멀티미디어(?)쪽은 장악한거나 마찬가지인데 MS가 배알꼴려서 이꼴을 못 보겠다라는 해서 내놓은 거란 말이지(물론 세미나에서 이런 얘기를 하신게 아니라 내 말이다.. 섞어쓰니까 이런게 좀 애매하군...)

현재는 9월인가에 실버라이트 1.0이 정식으로 릴리즈 되었다. 개인적으로 버전방식이 좀 특이해서 이해하기가 어렵다고 생각되는데 실버라이트는 XAML이라는 XML을 다뤄서 멀티미디어적인 효과를 줄 수 있는데 1.0버전에는 javascript가 XAML을 다루는 역할을 수행하고 있다.

내년 여름정도에 출시될 1.1버전에서는 .Net, 루비, 파이썬등을 지원할 예정이고 자세한 세부내용은 아직 발표되지 않았고 지금 모두가 이 1.1을 목빠지게 기다리고 있는 듯 하다.(현재는 1.1 alpha까지 출시) 현재 SBS에서 Nview라는 서비스가 1.0기반으로 되어 있다.

약간의 쇼케이스 사이트들을 보자면 대표적인데 tafiti이다.

Silverlight를 처음 알았을 때 실버라이트로 된 서비스로 처음 구경했었던 사이트이다. 헤일로를 미는 덕인지 그때와는 디자인이 달라졌다.(왜 여기에 헤일로를.. ㅡ..ㅡ)

깔끔하면서도 화려한 인터페이스를 가지고 있고 해당 글을 오른쪽으로 스크랩도 가능하다. 위쪽에 나무모양 아이콘의 Tree View를 누르면 태그크라우드같은 것을 나무모양으로 상당히 화려하게 볼 수가 있다.

세션에서 보여준 예시사이트로 깜짝 놀란게 Vista Simulator였다.

실버라이트로 윈도우즈 비스타를 웹에서 구현한거다. 덩치가 있어서 로딩은 좀 느린편인데 대박이다. 비스타랑 똑같이 다 움직인다. 솔직히 타피티를 보았을때는 큰 감흥이 없었는데 이거 보고는 정말 깜짝! 놀랬다.

이젠 실버라이트 쇼케이스가 오픈되었기 때문에 많은 실버리아트 예시들을 볼 수가 있다.






두번째 세션은 "익스프레션 스튜디오와 함께하는 디자이너의 비전"이라는 제목으로 디자이너 서미연님이 진행을 하셨다. 이부분은 완젼히 디자이너쪽에만 집중된 부분이었다.

Microsoft는 실버라이트를 출시하면서 당연히 툴이 있어야 하기 때문에 Expression Studio라는 제품군을 선보였다. 이 안에는 Expression Web, Expression Blend, Expression Design, Expression Media가 포함되어 있다.

MS가 이제 Adobe랑 본격적으로 붙어보려고 하는 것이기 때문에 이 제품군은 어도비 제품군과 거의 매칭이 된다. Expression Web은 HTML을 제작하는 툴로 Dreamwever를, Expression Design은 이미지를 그리는 툴로 Photoshop을, Expression Blend는 애니메이션효과를 줄 수 있는 툴로 Flash를 겨냥하고 있다. 실버라이트를 개발하려면 일단 이 제품군들을 사용해야 한다.

Flash에서의 어려운 점은 디자이너와의 협업부분이라고 한다.(이건 솔직히 공감한다.) Flash툴에서 이미지와 ActionScript가 섞여있기 때문에 개발자와 디자이너의 영역이 이곳에서 섞여있다.(나도 프로젝트 하는데 겨우 링크 URL넣을라고 플래시 깔았다. ㅡ..ㅡ)

이 부분은 해결하기 위해 MS는 XAML이라는 걸 만들어냈다. Blend에서 만든 이미지가 XML로 출력이 되고 Visual Studio 2008에서 이 XAML에 애니메이션효과를 주어서 다룸으로써 디자인과 개발의 분리가 이루어진다.






세번째 세션은 "설버라이트 디자이너와 개발자와의 대화"라는 제목으로 디자이너 장미연님과 개발자 서금옥님이 약간의 설명과 함께 실제로 협업을 하는 것을 간단하게 시연하면서 보여주었는데 말로 설명하는 것보다 눈으로 보여주어서 이해하기가 쉬웠다.

디자이너 장미연 & 개발자 서금옥

디자이너가 본 익스프레션과 개발자가 본 실버라이트에 대해서 발표가 있었다. 일단 실버라이트를 하려면 익스프레션 스튜디오와 비쥬얼 스튜디오 2008을 같이 사용해야만 한다.

간단히 시연됐던 과정을 설명하면 Visual Studio 2008에서 프로젝트를 생성한다. 디자이너는 익스프레션 디자인에서 직접 그리던 psd나 ai를 불러오던 이미지를 그리고 이를 XAML로 내보낸다. 디자이너는 익스프레션 블랜드에서 프로젝트를 불러오고 이미지를 불러와서 같다 붙히고 사전에 협의한 네이밍을 한다. 개발자가 VS 2008에서 각 객체에 애니메이션 효과를 줌으로써 실버라이트를 사용할 수 있다.

이에 대한 발표자료는 terrydev(서금옥)님의 블로그에서 다운받을 수 있다. 간단한 소스도 있으니 처음 할때 참고하면 많은 도움이 될듯 하다.

공인석

마지막 세션은 "모션 테크닉"라는 제목으로 공도소프트를 운영하시는 공인석 님이 발표해 주셨다. 실버라이트에서 모션효과를 어떤식으로 구현하는지를 실제로 예재를 보여주면서 설명해 주었다. 웹에 계신된 쇼케이스들처럼 감탄사가 나올 모션은 아니지만 간단하면서 다양한 예제들의 구현을 실제로 설명해 주면서 실버라이트가 모션을 어떻게 다루는지 알수 있는 세션이었다.

실제적인 데모위주로 진행이 되었기 때문에 따로 말로 설명하기는 어렵고 공도님이 블로그에 올려주신 발표자료를 받아서 보는 것이 잘 모르는 내가 설명하는 것 보다 나을 것이다.

망설이다가 간 세미나였지만 생각보다 알찬 시간이었다. 전체적으로 어떻게 돌아가는 지도 몰랐고 이름과 개념 정도만 알고 있던 실버라이트의 구체적인 내용을 이해할 수 있었다. 아직 실버라이트를 실제로 만져보지 못했기 때문에 기술적인 얘기는 하기가 어렵다. 실버라이트 메뉴를 따로 만들었으니 곧 만져보는대로 포스팅을 하겠다.(만질 시간이 있을런지.. ㅡ..ㅡ)

일단 실버라이트의 가장 큰 난관은 디자인 쪽이 아닌가 싶다. 개발자들이야 보통 신기술에 관심도 많고 실무적용은 또 다른 이야기 이지만 어쨌든 관심이 있으니 많은 테스트를 해볼 것이고 기회가 되면 실무에 적용해 보는 것에도 크게 거리낌이 없을 것이다.
내가 보기에 가장 큰 문제는 디자이너에게 오랫동안 익숙한 포토샵과 일러스트레이터를 버리고 익스프레션 디자인을 사용하라고 하는 것이 문제이다. 실버라이트를 하려면 XAML이 무조건적으로 필요하기 때문인데 아무리 익스르페션 디자인이 쉽고 기존 어도비툴과 흡사하다고 해도 툴을 바꾸게 설득하는 것은 만만찮은 일임이 확실하다.

오늘 들으니 포토샵과 일러쪽에서 XAML로 출력해 주는 익스텐션이 있다고도 하던데... 어쨌든.... 다음번 세션들도 참가해야겠다. 생각보다 내용도 괜찮은것 같고 일단 공짜인데다가 바쁨을 핑계로 계속 미루기만 하던 공부를 그래두 세미나를 통해서 배울수 있으니....

[HTML]Object, Flash 위에 div 레이어 올리기..

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

오브젝트등에 레이어를 올릴 필요가 있었다. 이것은 플래시등에도 적용된다. 보통 플래시나 레이어나 태그로 해당부분을 불러온다. 오브젝트로는 보통 ActiveX를 불러오는 경우가 많고.... 이런 경우는 일반 태그와는 좀 다르게 태그위치에 입혀지다 보니 일반적인 z-index로는 div가 위로 올라오지 않고 밑으로 깔려버린다.

우리는 맵을 다루기 때문에 이 ActiveX맵이 페이지 전체를 먹어버리기 때문에 추가기능들에 대한 레이어는 맵 위에 올려야 했다. 별것 아닌것 같으면서도 은근히 어렵던.....

막상 해놓으니 간단하다. 오브젝트나 플래시는 그냥 똑같이 불러들인다. 그리고 레이어로 올릴 div를 만들고(여기서는 javascript로 활성화되기 때문에 display:none이다.) 그안에 보여줄 내용을 iframe로 넣는다.

Html

<object id="baseObj" width="100%" height="100%" >
</object>

<div id="showContents" style="display:none; width:300px; height:400px; top:20px; left:20px; position:absolute; z-index:2;">
    <iframe  src="01.jsp" id="content1" frameborder="0" scrolling="no" width="300px" height="400px"></iframe>
</div>

그냥 보여주려면 스타일을 주면 되고 보통은 이벤트로 조작을 할테니 javascript로 div의 display를 block로 해주면 object나 flash위에 레이어를 띄울 수 있다.

덧) 이건 iframe이기 때문에 파이어폭스에서는 되지 않는다는거... iframe이 표준이 될거라는 얘기도 들은적이

[Talk]개발자 이야기..

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

My Comment..
형 블로그에서 보고 거기에도 댓글 달았지만, 처음에는..
왜 IT 쪽에 왔을까 하는 생각이 컸는데.. 물론 지금도 아예 생각을 안하다라고는..
못하겠지만, 지금의 시점에서는.. 후회를 하기보단..
차라리 앞으로 어떻게 해야 더 잘할지를 고민하는게 좋은 듯 하다..
그래서 이 블로그도 개설하고, 지금은 읽어보고, 단순히 퍼나르고 오탈자 수정하고..
그러긴 하지만서도.. 어쨌거나 이런 노력들이 모여서 내 칼이 되겠징.. +_+..

[JS]파이어폭스에서 button태그에 onclick이 안먹히는 문제..

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

크로스브라우징에 대한 부분이다. 지금 멀 만들고 있는데 당장 급한 분위기는 아니고 혼자만들고 있고 해서 개인적인 욕심으로 XHTML을 지키고 브라우저 호환성을 좀 유지하면서 만들고 싶었다. 그래서 기본적인 기능 구현하면서 파이어폭스(Firefox)에서 테스트를 돌렸는데 특정버튼들이 먹히지 않는 문제점을 발견했다.

Html

<script type="text/javascript">
    function testMethod()
    {
        document.location.href="file.asp";
    }
</script>

<button onclick="testMethod();">눌러</button>

(평소처럼 복사해 온게 아니라 틀리지 않았나 몰라.. ㅡ..ㅡ)

어쨌든 로직은 필요없으니 보자면 저런 구조다. 버튼을 클릭하면 자바스크립트 메서드가 호출되는 상황.

IE에서는 아무런 문제가 없었다. 그런데 파이어폭스에서는 아무런 동작도 되지 않았다. 계속적인 테스트.....

일단 펑션자체는 잘 먹었다. <a>로 태스트했더니 location.href는 잘 동작했는데 <button>에서만 동작을 안해서 처음에는 onclick가 안되는 줄 알았는데 또 다른 <button>에서 onclick으로 호출된 펑션이 폼.submit의 형태를 띄고 있는 건 또 잘 작동이 됐다.

location.href가 안되는거냐... onclick이 안되는거냐... 엄청 고민했다.. 찾고 또 찾고....

역시 구글링... 구글링으로 찾은 외국사이트가 날 살렸다. 해결법과 이유까지 확실히....

파폭에서 <button>은 기본적으로 submit의 형태로 동작을 한다. 그래서 submit이 있는 경우는 제대로 동작하지만 submit이 없으니 동작이 무시되어 버린 것이다.

해결책은 return false;가 있으면 된다. 펑션안에 있어도 되고.... 호출할 때 onclick="testMethod();return false;"와 같이 써주거나 onclick="return testMethod();"로 써주면 정상적으로 작동한다.


덧) 이거 하는데 2시간도 더 걸렸다.. ㅡ..ㅡ 근데 평소 올블에서의 분위기로 느껴지던 웹표준과 크로스브라우징.... 막상 자료를 찾으니까 자료가 거의 없다.. ㅠ..ㅠ 아직 내가 체감하는것 만큼의 중요한 이슈가 아닌건가? ㅡ..ㅡ

[DB]MS SQL 테이블을 SQL문으로 생성하기..

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

순서로 얘기하자면 ERWin등을 통해서 모델링을 해서 쿼리를 생성해서 테이블을 만드는게 맞겠지만 간단한 거의 경우에는 꼭 그런 수순을 밟게 되는 것도 아니고 처음엔 모델링 했지만 이게 한번에 잘 되는 작업도 아니고 중간중간에 바로 디비를 수정하게 되는 경우도 생기고 어쨌든 간에 현재 사용하는 테이블에서 SQL쿼리를 생성해야 하는 경우가 있더란 말이지...

엔터프라이즈 관리자(2000이다)에서 해당 테이블에서 [모든 작업] - [SQL 스크립트 생성]에 들어간다.

그러면 현재 선택한 테입르이 "스크립팅될 개체"에 표시된다. 이곳에 나타난 것만 SQL로 생성한다.

위의 모두표시 버튼을 누르면 왼쪽의 pub의 개체라고 된 곳에 모든 테이블이 표시되고 필요한 것만 오른쪽으로 이동하면 된다. 서식이나 옵션을 보면 약간의 설정과 어떤 형태의 쿼리문으로 나오는지가 나오는데 특별한 경우가 아니면 크게 신경을 안써도 될것 같다.(사실은 잘 모르는 부분이라.. ㅎㅎ)

SQL

-- 생성된 SQL문
IF EXISTS (SELECT * FROM dbo.sysobjects WHERE id = object_id(N'[dbo].[sales]') AND OBJECTPROPERTY(id, N'IsUserTable') = 1)
DROP TABLE [dbo].[sales]
GO

CREATE TABLE [dbo].[sales] (
    [stor_id] [char] (4) COLLATE Korean_Wansung_CI_AS NOT NULL ,
    [ord_num] [varchar] (20) COLLATE Korean_Wansung_CI_AS NOT NULL ,
    [ord_date] [datetime] NOT NULL ,
    [qty] [smallint] NOT NULL ,
    [payterms] [varchar] (12) COLLATE Korean_Wansung_CI_AS NOT NULL ,
    [title_id] [tid] NOT NULL
) ON [PRIMARY]
GO

위에가 이렇게 생성한 쿼리문이다. 필요한 다른 곳에서 이 쿼리를 실행하면 디비가 생성된다. 다만 데이터는 나가지 않고 오직 테이블을 생성하는 쿼리만 만든다.(현재로써는 데이터도 쿼리문으로 생성을 어떻게 하는지를 좀 고민하고 있는데.. 쩝;;;)

[DB]쿼리분석기 개체브라우저 사용하기..

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

역시 무식하면 몸이 고생이다.. ㅋㅋㅋㅋ

쿼리를 쓸 때 간단한 거 정도는 코딩하면서 바로 입력할 수도 있겠지만 대개는 쿼리분석기에서 돌려보고 적는다. 근데 회사에서 듀얼모니터를 쓰는 것도 아니고 컬럼이름이 id, name, num등으로만 가면 아주 행복했지만 article_id, user_email등등 좀 길거나 내가 만든 DB가 아니라면 항상 컬럼 이름은 헷갈리는 일이다. 스펠링 하나만 틀려도 에러나고..

그동안은 엔터프라이즈 메니저를 띄어놓고 쿼리분석기를 약간 작게 띄어놓고 보면서 적던가 그렇지 않으면 오타를 좀 줄일라고 테이블 디자인보기 해놓고 컬럼이름을 복사하다가 일일이 붙히곤 했다.

그런데!!!

쿼리분석기 왼편에 이런게 달려있었다. 맨날쓰면서도 먼지 자세히 보지도 않았으니 이거야 원... ㅡ..ㅡ

사용할 데이터베이스의 사용자 테이블을 열면 내가 사용할 테이블의 컬럼들이 죽~ 나온다. 속성까지....

쿼리를 작성하면서 개체분석기에서 해달 컬럽을 마우스로 Drag & Drop으로 쿼리문 가운데 원하는 위치에 던져놓으면 자동으로 쿼리값이 입력된다. 테이블명도..(테이블은 저기 나온대로 dbo.까지 들어가긴 하지만...)

이번 프로젝트 같은 경우에는 내가 만든 부분에 컬럼이 조낸 많아가지고 일일이 하느라고 겁나 빡셌는데.... 이런 방법이 있었을 줄이야...

My Comment..
쿼리분석기는 꼭 사용해봐야겠다.. 지금 BCCard 에서는 SQL Tools 라는 것을 사용하는데..
그것은 *.exe 타입으로.. 걍 압축 풀어서 놔두면.. 실행이 된다..
eclipse 의 느낌이라고나 할까??.. 무튼.. 쿼리는 못하긴 하지만, 그래도 그 못하는..
쿼리의 오류를 그래도 좀 줄이려면.. 난중에는 사용해봐야지.. BC 가 그런 부분에서..
조금은 더 편하게 풀어주면 좋을텐뎅.. 아쉽다..

[DB]ERWin에서 Domain 사용하기..

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

ERWin에서 Domains사용에 대해서 써보려고 한다. 이미 한 프로젝트에서 사용하는 걸 봤구 지금 하는 거에서 내가 직접 만들어서 사용해 보고 있는데 확 편한지는 약간 아리까리 하지만 일단 쓰라니까 좋겠지~ 하면서 쓰고 있다.

ERWin에서 왼쪽의 메뉴를 보면 Domains라는게 있고 그걸 열어보면 보통 모델링을 하고 데이터타입을 정할때 골라주는 몇가지의 기본 타입들이 속해 있다. 대충 감이 오겠지만 MS SQL의 관점에서 얘기하자만 이 Domains라는게 "사용자 정의 데이터 형식"이다. 특정 데이터형식을 임의로 정해 놓고 그걸 사용하는 것이다.

Domains에서 마우스 우클릭을 하여 Properties에 들어간다.

Domain Dictionary 창이 뜬다. 새로운 도메인을 만들 것이므로 New를 눌러준다.

Blob, Datetime, Number, String 4가지가 기본적인 타입이므로 이들중 하나를 선택해 주고 Logical / Physical Name을 모두 적어준다. 당연히 Physical은 영문으로 적어주어야 겠지... OK를 눌러서 빠져나온다.

세부적인 데이터형식을 정해주어야 하므로 Edit Mode를 Physical로 바꾸어 주고 SQL Server 탬에 들어가서 보통 모델링을 할때 칼럼의 데이터형식을 정해줄때처럼 데이터형식을 골라준다. 여기에 나오는 것은 만들때 정해준 데이터형식의 하위타입들만 나온다.(Number를 선택했으면 Number관련타입들만 나타난다.)

여기서 평상시 데이터 타입 정해줄 때처럼 데이터타입을 정해주고 크기가 필요하면 크기도 정해준다. 그리고 NULL여부나 자동증가값인 경우에는 IDENTITY에 1, 1 과 같이 적어준다.

이렇게 필요한 도메인들을 죽~ 만들어 준다음에 컬럼에서 내가 만든 도메인을 선택해 주면 된다.

이렇게 도메인은 사용할 때의 이점은 비슷한 데이터타입을 여러군데 쓰는 경우가 많기 때문에 일일이 정해주지 않고 도메인을 만들고 컬럼에선 도메인만 선택해 주면 되고 크기등 변경을 해야할 때 도메인만 바꾸어 지면 해당 도메일을 사용하는 컬럼의 데이터형식을 일괄적으로 바꾸어 줄수 있다.

단점이라면 내가 만든 디비가 아니면 이해하는데 좀 헷갈린다는 것 정도?


덧) 약간의 유의점이라면 자동증가값 같은 경우 IDENTITY에 1,1등으로 설정해 주고 관계를 연결해 주면 다른 테이블의 FK로 들어가게 되는데 그 테이블에서도 자동증가값 PK를 사용하는 경우 한테이블에 자동증가값이 2개가 생겨서 sql쿼리를 실행할때 오류가 뜨게 된다. 다 만든 다음에 FK로 들어간 자동증가값들은 일일이 자동증가값을 지워주면 된다.(원래의 PK였던 자동증가값에는 영향이 없다.)

덧) 당연한 얘기인듯 하지만(난 몰랐어서...) Reserved Word는 도메인 네임으로 사용할 수 없다. 내가 걸렸던건, user, group, content 등....

[DB]ERWin 모델링하기전에 설정하기..

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

ERWin을 몇 달전에 프로젝트 할때 처음 만져보고는 그 뒤로는 남이 만든거 보거나 사용만 하다가 오랜만에 다시 만지려니까 엄청 해맸다. 멀 했던것 같은데 왜 이렇게 기억이 안나는지.. ㅎㅎ

ERWin으로 디비모델링을 하면 처음 설치했을 때는 아래처럼 나온다.

얼핏 보면 별 문제 없어보이지만 우리가 사용하는 보통의 ERWin에서는 관계표시가 저렇게 안나온다는 것이 문제이지... 메뉴가 복잡해서 찾기가 만만치 않더라...

[Model] - [Model Properties...]에 들어가면 된다.

처음 ERWin을 설치하면 둘다 IDEF1X로 설정되어 있기 때문에 맨위의 화면처럼 관계가 표시된다. 하지만 우리가 오라클이나 MS SQL에서 사용하는 노테이션은 IE (Information Engineering) 이다. 보통은 로지컬/피지컬을 모두 사용하므로 둘다 IE로 설정한다.

그렇게 하면 관계가 익숙한 형태로 바뀐다. 관계를 설정했을 때 FK를 PK로 사용하지 않으려면 관계를 Non-Identifying Relationship으로 설정하면 된다.


덧) 테이블의 모서리가 둥글게 표시되는 건 다른 테이블의 하위에 속했다는 표시이다.

[DEV]원격 컴퓨터에서 개발작업 하기..

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

보통 서버가 다른 곳에 있기 때문에 원격으로 접속해서 작업해야 하는 경우가 많다. 하지만 서버에는 내 컴퓨터처럼 개발환경이 잘 안추어져 있기 때문에 간단한 작업조차도 원격에서 하기는 쉽지가 않다. 그렇다고 서버에 비쥬얼 스튜디오랑 에디터를 종류별로 깔수도 없는 노릇이고....

계속 해서 작업하는 경우에는 네트워크 드라이브로 잡아 놓으면 편하다.

탐색기에서 내컴퓨터에서 네트워크 드라이브 연결을 누른다.

여기서 폴더에 \\아이피주소\C$라고 입력하면 해당 아이피 PC의 C루트를 네트워크 드라이브로 잡을 수 있다. 물론 접속 아이디/비밀번호는 알아야 겠지..

장기간 동안 계속 해야하는 작업이면 네트워크 드라이브로 항상 해두면 편하고 잠시 하는 것도 로컬의 HDD처럼 다룰수 있기 때문에 무척 편하다

또한 이렇게 연결된 네트워크 드라이브를 잡아놓고 비쥬얼 스튜디오나 웹 디벨로퍼드엥서 프로젝트의 경로를 해당 드라이브로 잡아도 되고 위의 네트워크 드라이브를 잡는 대신 개발툴에서 직접 그 경로로 접속을 해두 된다.


그러나 상황에 따라 저 방법을 사용하지 못하거나 굳이 원격 데스크톱을 사용해야만 한다면

그냥 아이피를 찍고 접속하지 말고 접속하기 전에 "옵션"을 누른다.

옵션에서 "로컬 리소스"탭에서 "디스크 드라이브"를 체크하도록 한다. 그렇게 하면 접속할때 경고창이 하나 뜨긴 하지만 무시해도 큰 상관은 없다.

이렇게 디스크 드라이브를 사용해서 원격 데스크톱을 연결하면 Copy&Paste를 로컬과 원격에서 모두 사용할 수 있다. text는 물론이고 파일도 로컬에서 복사해서 원격컴퓨터에 붙히거나 반대로 하는 경우도 모두 가능하다.

물론 FTP나 네트워크 드라이브보다는 불편하겠지만 원격데스크톱에선 파일을 올리고 내릴수 없는게 가장 불편한데 이걸 사용하면 해결이 가능하다.


덧)  참고로 원격데스크톱은 실행에서 mstsc 명령어이다...

[CSS]CSS 적용 우선순위..

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

최근 작업에서 가장 머리아픈게 항상 CSS였다. 코딩이나 그런 문제보다 훨씬 머리가 아팠다. 짜증도 많이 나면서 해결도 잘 되지 않고 그렇다고 CSS만 붙잡고 공부할 수도 없는 노릇이다.

그나마 처음 페이지를 만들면서 같이 CSS를 붙일때는 그나마 좀 나은 상황이지만 이미 CSS까지 붙어있는 페이지에 먼가 새로운 것을 같다 붙힐때는 항상 CSS충돌문제가 많이 생기고 쉽게 잘 해결되지도 않는다.

물론 이런 부분은 물론 CSS에 대해서 잘 모르기 때문이다.

그럼 우선 CSS의 적용 우선 순위를

1. Style : style="coloer:red;"

2. ID : #type { color: red }

3. class : .contents { color:red }

4. 조건 : P B { color : red }

5. 타입 : B { color : red }

1번이 가장 높은 우선 순위를 가지고 있다. 즉 엘리먼트에 직접 스타일을 써놓은것이 우선적으로 적용된다.

CSS가 상위의 다른 CSS와 충돌이 나서 문제가 생길때는 div등을 넣어서

#id .class {}

와 같은 식의 조건을 주어 해당 엘리먼트의 적용우선순위가 높아지게 하면 어느정도 해결 될 수 있다.

또한,

우선순위의 차이가 난다고 하더라도 하위에서 재정의한것이 아니면 상위의 있는 스타일이 적용된다. 상위에서 text-align을 정의하고 하위에서 color를 적용하더라도 여전히 text-align은 적용이 된다. 스타일에 따라 다르지만 auto로 넣던지 아니면 다른 원하는 값을 주어서 재정의 해 주어야 한다.

계속적으로 문제가 생기는 경우도 있기는 하지만 CSS에 대해서아직도 많이 배우고 있는 중이므로.. ㅎㅎ

그리고 { color : red !important } 처럼 !important라고 적어주면 우선순위와 상관없이 적용하게 할 수 있다.

[AJAX]AJAX 사용하기 기본 예제..

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

뭐 요즘은 웹에서는 기본이나 다름없이 되어버린 AJAX... 여러 사이트에서 난무하고 있는 관계로 이런 인터페이스에 대한 눈은 높아졌지만 난 아직 잘 다룰 줄을 모른다 이거지...

어쨌든 요즘은 자바스크립트랑 자바스크립트 라이브러리에 꽤나 흥미가 가고 있고 그중에서 AJAX는 거진 필수적이란 말이지... 빨리 공부해야 겠다... 이걸 왠만큼 다루기 시작하면 꽤나 재미날것 같다.

JavaScript

// AJAX Request Side
function requestTagList(tagName) {
    var url = '/ajaxfile.asp';

    var myAjax = new Ajax.Request(url,
        {
            method: 'post',
            parameters: {v:tagName},
            onSuccess: responseTagList,
            onFailure: function() { alert('HTML을 받아오지 못했습니다.');}
        }
    );
}

function responseTagList(reqResult) {
    var dataobj = decodeURIComponent(reqResult.responseText);
    $('div1').innerHTML = dataobj;
}

 

물론 이건 prototype.js를 사용한 AJAX이다. 여태까지 올리던건 그래두 내가 어느정도는 이해하고 있었는데 AJAX는 현재 거의 이해를 못하고 있기 때문에... 사용은 해야겠고 해서 prototype.js를 사용했다. 프로토타입을 사용하지 않으면 이 코드가 거진 3-4배의 불량으로 늘어난다. 프로토타입의 위대함을 새삼 느끼고 있다.

당연히 이걸 사용하기 위해서는
<script type="text/javascript" src="prototype.js"></script>
프로토타입을 불러들여야 하고 위의 코드는 당연히 javascript니까 스크립트 태그로 묶여야지....

먼가 엄청난듯 하지만 막상 보고 있으면 구조는 그리 복잡하지 않다.(prototype.js덕분에...)

Ajax.Request만들어 주고 Response할 URL적어주고 그 다음에 method는 AJAX에서의 post와 get의 차이는 아직 잘 모르겠다. 파라미터 필요하면 넘겨주고 필요없으면 ''하면 되고 그 다음은 이벤트 인데 onSuccess는 AJAX통신이 성공했을때 발생하고 onFailure는 실패했을때 발생한다. 그리고 여기선 안썼지만 onComplete는 AJAX통신이 성공하든지 말든지 일단 끝나면 발생한다.

이벤트에 해당하는 Function은 onFailure같은 방식으로 직접 써주어도 되고 onSuccess처럼 따로 Function을 정의하고 호출만 해도 된다.

JavaScript

// AJAX Response Side
<%
    tagSearch = request("v")

    sql = " SELECT bbs_num, bbs_title, bbs_writer "
    sql = sql & " FROM table "

    rs.open sql,con,3,1

    tagList = "<table border='1'><thead><tr>"
    tagList = tagList & "<th scope='col'>제목</th><th scope='col'>작성자</th><th scope='col'>작성일</th></tr></thead>"

    Do while rs.EOF=false
        bbsNum    = rs("bbs_num")
        cgName    = rs("cg_name")
        bbsTitle  = rs("bbs_title")
        bbsWriter = rs("bbs_writer")
        bbsDate   = left(rs("bbs_date"), 10)

        tagList = tagList & "<tbody><tr><td class='listSubject'>" & bbsTitle & "</td>"
        tagList = tagList & "<td nowrap='nowrap' class='listWriter'>" & bbsWriter & "</td></tr>"

        rs.MoveNext
    loop

    tagList = tagList & "</tbody></table>"

    rs.Close : con.close : Set con=nothing

    response.Write jEncode(tagList)
%>

<script language="javascript" runat="server">
    function jEncode(s)
    {
        return encodeURIComponent(s);
    }
</script>

Response쪽은 오히려 간단하다. 여기선 ASP로 구현이 되어 있는데 머 이쪽은 평소짜던 코드랑 그다지 다른게 없으므로 그냥 봐도 다른쪽 언어로 구현하는데도 큰 문제가 없을 것같다.

Response.Write로 페이지에 찍어내면 그냥 그걸 Request쪽에서 받을 수 있다. 필요한걸 만들고 찍어내면 된다. 머 XML이나 JSON을 이용할 수도 있지만 어쨌든 그냥 여기선 간단히 보았을 때....

넘기는 쪽에서 parameters: {v:tagName} 로 넘겼으므로 받는 쪽에서도 v라는 이름으로 파라미터를 받는다. 그걸 받아서 필요한 처리를 하고 코드를 만들던지 값만 넘겨서 받은 쪽에서 처리하던지 해서 필요한걸 마지막에 response.Write해주면 된다.


어쨌든 이렇게 하면 AJAX로 비동기 통신을 할 수 있다.

여기서 설명을 안한것 이 있는데 기본적으로 AJAX는 UTF-8이라고 한다. 그렇기 때문에 그냥 하면 영문은 상관없지만 한글의 경우는 다 깨져버리고 만다 그래서 그걸 해결하기 위해서 인코딩/디코딩과정을 거쳐야 한다.

Response쪽에서는 자바스크립트 메서드를 사용하기 위해서 자바스크립트에 runat="server"해서 자바스크립트를 서버사이드로 돌려서 encodeURIComponent()메서드를 사용해서 반환할 스트링을 인코딩해주고 Request쪽에서는 decodeURIComponent()메서드를 이용해서 디코딩해서 받으면 한글 문제를 해결할 수 있다.

그리고 한글 문제를 해결하기 위해서 중요한 또 한가지.... Response쪽 asp파일은 반드시 UTF-8로 저장이 외어야 한다. 페이지에 UTF-8로 캐릭터셋을 정의하라는 것이 아니라 파일을 UTF-8로 저장을 해주어야 한다. 에디터에 따라 안그런것들도 있지만 대개의 에디터들은 파일을 저장하는 인코딩타입을 정해주는 옵션이 있다. 그에 따라 UTF-8로 저장을 해주어야 한다.