언제인지 모르겠지만 지난 9월 이후 크롬 개발자도구(F12)가 느려져서 디버깅하는데 애를 먹고 있었다.


이 문제와 관련해 크롬 업데이트 이후 발생하는 문제이니 구글에서 곧 패치해 주겠지라고 생각하고 무시하고 있었다.


그러나 역시 구글 문제가 아니었다.


해결책 : Ahnlab safe transaction 프로그램을 삭제하면 다시 빨라진다.




사용자 이벤트가 발생할 때마다 특정 테이블의 ROW를 show, hide 해줘야 할 경우가 있다.


$("input[name=autoType]").click(function() {

            if ( $(this).val() == 1 ) {

                $("#autoType_2, #autoType_3, #autoType_sub").hide();

            }

            else if ( $(this).val() == 2 ) {

                $("#autoType_2, #autoType_sub").show(); $("#autoType_3").hide();

            }

            else {

            $("#autoType_3, #autoType_sub").show(); $("#autoType_2").hide();

            }

        });


....

<table>    

    <colgroup>

        <col width="120" />

        <col />

    </colgroup>

    <tr id="authType_2"> .... </tr>


    <tr id="authType_3"> .... </tr>


    <tr id="authType_sub"> .... </tr>

....

</table>


위 코드는 정해진 엘리먼트 클릭 시 클릭한 값에 대응하는 ID 기반의 엘리먼트 요소를 찾아서 화면에서 보이거나 숨기는 코드이다.


IE를 제외하고 의도한데로 모두 잘 동작한다. 그러나 IE7 및 IE8, 9, 10 버전 호환성 보기에서 show, hide 되는 테이블 ROW의 border가 없어지지 않고 화면에 잔상으로 남는 경우가 생긴다. (귀차니즘으로 화면캡쳐는 생략 ㅠㅠ)


CSS도 건드려보고 jQuery API로 개삽질을 해봤으나 해결방법은 의외였다.


<table>    

    <!-- <colgroup>

        <col width="120" />

        <col />

    </colgroup> -->

    <tr id="authType_2"> .... </tr>


    <tr id="authType_3"> .... </tr>


    <tr id="authType_sub"> .... </tr>

....

</table>


위와같이 column 형식 선언부를 없애주면 잘 동작한다. 이런 개 씨X랄 메롱스런 IE !!







IE8 이하 버전에서 jQuery Validation Plugin 사용 시 아래 에러가 발생함


SCRIPT3: 구성원이 없습니다.

 

jquery-1.6.4.min.js, 줄 2 문자 29472


구글신에 따르면 jquery.validate.js 파일에서 아래 부분을 수정하면 된다.

기존
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

수정
if (!$.browser.msie || $.browser.version > 8) {
    // Add novalidate tag if HTML5.
    this.attr('novalidate', 'novalidate');
}


클라이언트단

$.getJSON( 

    "http://www.somesite.co.kr/api/index.jsp?callback=?", 

    {

        param1: encodeURIComponent("한글")

        parma2: ABCD

    }

);


서버단

java.net.URLDecoder.decode( request.getParameter("param1"), "UTF-8" );


node.js 설치는 http://finkle.tistory.com/91 글을 참조하세요.


$ cd

$ npm install ejs

$ npm install jade

$ npm install -g express

$ npm list installed


'자바스크립트 > node.js' 카테고리의 다른 글

cygwin에 node.js & npm 설치  (0) 2012.04.25

1. node.js 설치에 필요한 cygwin 패키지 (미설치 상태라면 설치해준다.)

Dev 패키지

  • gcc g++ C++ compiler
  • gcc mingw-g++
  • gcc4-4++ G++ subpackage
  • git
  • make
  • openssl
  • pkg-config
  • zlib-devel
  • Python – install


Web 패키지

  • wget
  • curl



2. node.js 설치

$ git clone http://github.com/ry/node.git

$ cd node

$ git fetch --all

$ git tag

$ git checkout v0.4.9 

(화면에 표시된 목록에서 최신 버전을 선택해준다. 관례상 짝수는 안정화, 홀수는 개발버전을 의미한다.)


$ cd node

$ ./configure

$ make

$ make install

$ node -v


make를 실행할 때 error가 발생할 경우에는 버전을 달리해서 체크아웃 받은 후 다시 위 절차를 수행하면 된다.


3. 추가적인 작업

node.js가 사용하는 DNS 설정파일(/etc/resolv.conf)에 구글 공용 DNS 값을 넣어준다.

nameserver 8.8.8.8

nameserver 8.8.4.4


4. npm 설치

$ cd

$ curl http://npmjs.org/install.sh | sudo sh


끝.


※ 위 과정이 불편하다면 그냥 http://nodejs.org에서 윈도우용 인스톨러를 내려받아 설치하면 된다.


'자바스크립트 > node.js' 카테고리의 다른 글

npm을 이용한 ejs, jade, express 설치  (0) 2012.04.25

IE9에서 내용이 많은 Big 테이블을 Ajax로 불러들일대 Cell이 한 칸씩 밀리는 버그가 있다.

<td> 사이에 공백이나 개행문자가 있으면 발생한다.

아래와 같이 해결한다. (jQuery를 사용할 경우의 코드임)

if ( $.browser.msie ) {
    var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
    $('#테이블_감싼_DIV').html( ($('#테이블_감싼_DIV').html() + "").replace(expr, '><')  );
}

※ new RegExp('>[ \t\r\n\v\f]*<', 'g'); 이 정규식은 HTML 코드 >와 < 사이에 있는 공백, 탭, 개행문자 등을 모두 제거하라는 의미다.

여러모로 IE는 우리 개발자를 사랑하신다. ㅠㅠ

출처 : http://stackoverflow.com/questions/7267014/ie9-table-has-random-rows-which-are-offset-at-random-columns


var popup = window.open(

    "http://www.otherDomain.co.kr/login.do?id=xxxx&pass=2222", 

    "pp", 

    "width=300, height=3000, left=4800");


setTimeout(function(){

    popup.close(); 

    self.focus();

}, 1000);


IE에서는 서로 다른 도메인 간에 frame이나 iframe을 이용해 위와 같은 로그인 처리를 해도 세션 쿠키가 브라우저에 기록되지 않아 리프레시 한번 더 해줘야만 로그인이 적용되는 경우가 있는데, 이 경우 위와 같은 편법을 이용하는 것도 하나의 방법이다.

당연히 편법이므로 다른 방법이 없다는 상황에서만 .... 적용하는 것이 좋겠다.

 

'자바스크립트' 카테고리의 다른 글

크롬 개발자도구(F12) 느려짐 해결  (0) 2016.11.12
파이어폭스에서 jQuery 기반의 웹 어플리케이션 개발 시 아래 환경에서 발생하는 에러이다.

파이어폭스 플러그인으로 FirebugAdblock plus를 설치한 경우 발생

원인은 Adblock plus에서 필터링되는 특정 구문을 사용하거나 경로를 호출했기 때문이다.

localhost에서 개발중이라면 아래와 같은 예외규칙을 Adblock plus에 추가하자.


파이어폭스에서 원인을 알 수 없는 스크립트 오류가 발생할 경우, IE 등의 타 브라우저에서는 정상 작동한다면 90% 이상이 파이어폭스 플러그인 문제일 가능성이 농후하다.

덕분에 오늘도 삽질했다.



ExtJS를 실무에 적용하고자 기술검토를 통해 파일럿 프로그램을 개발하고, 실무(회사 솔루션)에 적용해본 지 약 2개월이 지나가고 있다. 그간 개발하면서 ExtJS에 대해 느껴왔던 점에 대해 기록해본다.

제일 처음에는 GWT(Google Web Toolkit)에 기반한 GXT를 내려받아 적용해 봤는데 아래와 같은 문제점이 있었다.

GXT 적용기

1. 소스 변경 후 화면을 통해 바로바로 확인하는 웹 프로그램의 특성상 기본적으로 JavaScript로의 컴파일을 통해 화면을 생성하는 GXT는 일반 JSP 작업보다 생산성면에서 불편했다. - 물론 이것은 GWT 기반이기 때문에 피할 수 없는 문제다.
(특히 내 컴터의 512MB + 256MB 메모리로는 이클립스와 같이 돌리기에는 쿨러돌아가는 소리가 너무 크다 ㅠㅠ)

2. 화면 레이아웃을 잡는데 너무 많은 고통이 수반된다.
GXT에서 모든 화면 레이아웃은 Layout 클래스를 이용해 만들어야 한다. 예전에 Swing이나 AWT 이용해 화면 UI를 만들어봤던 나도 이 작업은 너무 어렵고 힘들었다. 복잡한 화면을 표현해야 하는 웹 프로그램의 특성 상 어찌보면 이 부분은 GXT를 이용해 개발해야 할 경우 넘어야할 가장 큰 산인듯 싶다.

3. 크로스 브라우징 - 국내 웹 개발자에게 늘 삽질의 은공(?)를 제공하는 IE가 항상 문제다. 파이어폭스하고 크롬에서는 정상으로 보이나 IE는 6, 7, 8 버전별로 모양새가 다 다르게 나온다. ㅠㅠ  CSS 삽질이 필수로 요구된다.

도입하는데 부닥친 가장 큰 문제는 크게 위 3개로 요약된다. 기타 자잘한 문제는 GWT가 기본적으로 가지고 있는 문제이므로 별도 언급하지는 않겠다.

ExtJS 적용기

ExtJS는 그 자체가 JavaScript 이기 때문에 GXT가진 1번 문제는 해결된다.
아울러, 화면 레이아웃은 JSON(JavaScript Object Notaion) 형식으로 꾸며나가면 되는데 초기 학습비용은 높은 편이나 몇개의 산을 넘다보면 익숙해지는데 오랜 시간이 걸리지는 않는다.

역시나 크로스 브라우징 문제는 ExtJS에서도 발생했다. 그러나 몇가지 수동으로 패치작업을 해주면 IE에서도 원하는 모양으로 표시되도록 할 수 있는데 배포사에서 이 부분을 좀 신경써 주었으면 좋겠다. (ExtJS 상용 라이센스를 구입하는 사람도 있으므로 ....)

다음은 ExtJS에 익숙해지기 위한 필수 지식이다.

1. JavaScript - 너무 당연하다.
2. JSON - ExtJS에서는 거의 대부분의 코딩작업을 JSON 형식으로 선언하며, 심지어 서버에서 처리한 결과 조차도 JSON으로 받아 화면에 표시하게 된다. (물론 사용자가 선택할 수는 있다.)
3. ExtJS API - 항상 곁에두고 참조해야 한다. 특정 객체의 프로퍼티, 메소드, 이벤트 등을 알고 사용하기 위해서는 어쩔 수 없다. Java 프로그래밍 할때의 Code Insight 기능은 JSON 형식을 사용하는 ExtJS에서 한계가 있기 때문에 API는 개발을 마칠때까지 수시로 참고해야 된다.

다음은 내가 느꼈던 ExtJS의 장점이다.

1. 초기 학습비용은 매우 높은 편이나 익숙해지면 개발생산성이 약 2배이상 향상된다.
2. 지저분한 UI 코드가 사라지고, 장문의 HTML 코드를 이용하는 일이 거의 없어진다.
3. ExtJS 배포 컴포넌트 만으로 다양한 UI를 구현하는데에는 한계가 분명히 있다. 그러나, 수많은 이용자들이 공개한 다양한 플러그인을 사용한다면 웬만한 UI 나 업무처리를 구현하는데 문제가 없다.

결론

시간이 충분치 않거나 팀원들의 학습능력이 받쳐주지 않을 경우 함부로 ExtJS를 도입하지 말 것을 권장한다. Java프로그래밍을 잘 하는 것과 JavaScript를 잘하는 것은 전혀 별개의 영역이다.
그러나, 개발시간에 여유가 있고 참여하는 팀원들의 지적욕구가 충만하다면 ExtJS는 충분히 도입할 만한 가치가 있는 UI 기술이다.

초기 학습비용이 다른 기술에 비해 높은 편이지만 일단 JSON 형식과 API에 익숙해지면 기존에 MVC 프레임웍의 View 기술을 대체할만한 매력이 충분한 녀석이다. 특히 UI 개발시간이 단축된다는 점과 지저분한 UI 코드가 사라진다는 점이 특히 매력적이다. (노파심에 언급하자면 ExtJS는 Model, Controller 영역하고는 무관한 기술이다)

자, 당신의 선택은 무엇인가?


※ 참고 : 회사에서 적용한 ExtJS 기반의 솔루션 기술 일람

UI단 : ExtJS, JSP(with taglib, Sitemesh)
Server단 : Spring, iBatis (MVC 컨트롤러는 ExtJS에 맞게 별도로 개발함)
WAS : Tomcat 5.X
DB : Oracle 10g XE
기타 : Jakarta commons, Log4j 외

+ Recent posts