난 태그를 자바스크립트로 동적 생성할때는 아래처럼 쓰는 버릇이 있었다.

...
var input = document.createElement('input');
input.name = 'id';
input.type = 'text';
form.appendChild(input);
...


MooTools(이하 무툴)를 쓰게 된 이후로는 아래처럼 됐다.


...
var input = new Element('input');
input.setProperties({name: 'id', type: 'text'});
form.adopt(input);
...


이렇게 잘 쓰고 있는데 이상하게 ie6에서만 name이 지정 안되길래 무툴의 소스를 봤더니,


...
setProperties: function(source){
    for (var property in source) this.setProperty(property, source[property]);
    return this;
}

setProperty: function(property, value){
    switch (property){
        case 'class': this.className = value; break;
        case 'style': this.setStyles(value); break;
        case 'name': if (window.ie6){
            var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
            $each(this.attributes, function(attribute){
                if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
            });
            if (this.parentNode) this.replaceWith(el);
            return el;
        }
        default: this.setAttribute(property, value);
    }
    return this;
}
...


이 소스를 보면 name속성 코드가 ie6을 위해 따로 제작되어있다.
하지만 ie6용 코드에서는 자기자신을 바꾸지 않는다. 부모노드를 가진 객체일경우만 새로 생성해서 바꿔준다.
그러나 위에 내가 짠 코드는 속성을 설정한 후에 부모에 붙이기때문에 ie에서 작동하지 않았다..

저 오류를 발견한건 이미 저런 코딩이 몇개 더 있는 상황이라 무툴의 소스를 살짝 고쳐봤다.


setProperty: function(property, value){
    switch (property){
        case 'class': this.className = value; break;
        case 'style': this.setStyles(value); break;
        case 'name': if (window.ie6){
            if (this.parentNode){
                var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
                $each(this.attributes, function(attribute){
                    if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
                });
                this.replaceWith(el);
                return el;
            }else{
                this.name = value;
                break;
            }
        }
        default: this.setAttribute(property, value);
    }
    return this;
}
...


이렇게 바꿔서 잘 되기는 하는데 뭔가 문제가 생길지도..

그런데 이문제는 내 코딩습관이 잘못된건가.. 아님 무툴에서 구현을 잘못한건가...
나도 잘 모르겠다.


License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License
  1. 임장혁 2008.04.22 11:43 신고

    저도 동적으로 생성할 때 property가 제대로 안들어가는 경우가 있었습니다.
    왜 안되는지 한참 고민했었는데 ^^;;

    제 경우는 table에 자식들을 생성할 때였는데,
    어느 외국 블로그에 IE에선 부모에 삽입 해주고 속성들을 바꿔야 해결된다고 나와 있더라구요..

    이 문제도 그거와 비슷한 것 같네요.
    먼저 부모에 삽입해주고 하시는게 ^^

    • Widyou 2008.04.22 14:38 신고

      저도 지금은 그게 맞다고 생각합니다.
      이걸 쓰던때엔 제 스타일대로 하고싶은 고집에 라이브러리를 수정해버렸죠.

자바 스크립트 라이브러리중에 MooTools라는게 있다.
알아본 바로는 moo.fx라는 라이브러리를 어떤 이유로 고친 느낌이다.
내가 현재 진행중인 프로젝트에서 살짝 써봤는데
매우 만족하고 있다.

그전까지 난 prototype1.4를 쓰고 있던중에 1.5의 소식을 듣게되었고
그때 mootools의 존재를 함께 알았다.

mootool의 장점은 prototype를 기본적으로 본받으면서 Fx로 시작하는 클래스들이 꽤나 유용하다.

단점은 prototype1.5랑 함께 로드했더니 일부 메소드에서 에러가 난다.
같은 이름의 다른 메소드가 있어서 그런 듯 하다.
둘다 풀버전을 써서 그런건지..
prototype1.5랑 mootool의 모든 기능을 다 쓸수는 없는걸까.
아직은 그다지 불편하지 않으므로 패스...

앞으로는 mootool의 사용법도 차차 올려야겠다.


License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License

난 처음엔 시멘틱 웹이라는게 뭔지 몰랐다..
존재자체도 몰랐다

어느날 인터넷 여기저기서 웹 2.0이다 뭐다 하고 떠들어대고 난 후에 AJAX를 알았고
웹2.0에 대에 조사를 하기 시작했다.
AJAX를 코딩해보니 AJAX는 그냥 javascript라는걸 알게 되었다.
그리고 웹2.0에 대해 알면 알수록,
시멘틱웹에 대해 알면 알수록,
다 개소리라는걸 알았다.

그렇다.. 다 개소리다..

시맨틱웹? 웹2,0?
뜬구름잡는 이야기다.
그냥 웹이 발전될 뿐 웹2.0이라는 패러다임은 없다.
웹은 웹이다.



License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License
  1. sunyruru 2007.03.02 15:52 신고

    맞는 얘기네요 ㅎ
    웹은 그냥 웹이고, 변경된 것 없이 기존기술을 쓴 것 뿐인데..

    • Widyou 2007.03.02 19:50 신고

      댓글 감사합니다.
      그렇죠. 기존기술의 간단한 응용을 2.0이라고 한다면 2.0붙일거 무지 많을거에요

  2. N.com 2007.05.24 18:58 신고

    말씀대로 2.0은 별 의미가 없죠.
    웹2.0하면서 예를 들은 서비스들을 보면 이미 한국에선 서비스하던 것들이 많고, 사실 외국이야기를 우리나라에도 들먹이는 듯한 느낌이 어느정도 있습니다.

    하지만, Ajax와 시멘틱웹은 다릅니다.
    개인적으로도 이름만 섞어놓은 Ajax라는 단어를 그렇게 긍정적으로 보는건 아니지만, 예전같으면 그냥 찔끔찔끔 DHTML이나 끄적여야 했던 자바스크립트들이 비동기통신을 만나면서 하나의 어플리케이션이 이뤄질 수 있는 수준까지 됨에 대한 파급효과는 상당하죠. 예전엔 ActiveX나 플래시나 자바어플릿이 아니면 죽어도 못할것이라 하는걸 웹브라우저 자체 해석엔진만 가지고도 전부 해낼 수 있게 됐습니다. 이정도라면 상징적 의미로 Ajax라는 단어를 쓰는데 큰 문제는 없다고 생각합니다.

    시멘틱웹도 마찬가지인데, 이 단어는 꼭 쓰지 않으면 안된다고 생각합니다. 아시다시핀 아직까지 보편적으로 사용되는 html코딩은 테이블기반의 야매코딩이 대부분이죠. 화면구성에만 신경을 쓰고 html문서 자체의 문서로써의 가치는 너무 떨어집니다. 그래서 사람들이 xhtml 표준코딩 해라 시멘틱한 코딩 해라 하는거죠. 제목은 <h1>태그해서 강조해주고! 디자인요소는 문서랑 큰 연관없으니 <div>하고 등등 식으로 적절하게 써주고 디자인은 css로 따로 빼버리는거죠. 그렇게 하면 html파일이 문서로써의 가치를 발휘할 수 있죠. 그래서 의미있는 웹인 시멘틱웹이라고 부르는 겁니다. 또, 이렇게 코딩하면 시각장애인분들도 손쉽게 사이트를 돌아다니실 수 있습니다. 이래저래 좋은거죠.

    • Widyou 2007.05.25 08:06 신고

      저도 이 포스팅을 쓸땐 시맨틱웹과 웹2.0의 차이를 잘 몰랐었습니다. 지금도 완벽하게는 이해가 부족하지만 시멘틱웹은 xhtml기반의 방탄웹정도로 해석하고 있습니다. 어떤 브라우저로 봐도 기획자의 의도대로 화면을 알수 있게 해주는 웹표준 같은거라고요.
      좋은 말씀 감사합니다.

+ Recent posts