기존 운영중인 홈페이지를 다른 서버로 이전후 SMS, MMS 가 동작하지 않아 수정을 원한다는 요청을 받았다.

알고보니 기존 운영업체와 손을 끊고 다른 업체와 손을 잡자 기존 업체에서 SMS 를 끊어버린것이다.

다른 업체에서는 서버호스팅 업체에 의뢰하여 기존 운영데이터를 신규 서버로 옮긴후 동작하게 해두었다.

운영환경을 확인해보니

resin 3.0.27

apache 2.2.16

mysql 5.0

서버 LANG 은 ko_KR.EUCKR

홈페이지는 utf-8

mysql 언어셋은 euc-kr 


MMS 발송때문에 biz.ppurio.com 의 JAVA 라이브러리를 사용하고 있었다.

특이한것은 뿌리오 업체에 SMS, MMS 를 발송하기전에 기존 운영업체의 서버에서 일 발송 허용 건수 레코드를 가져와서 뿌리오 라이브러리를 호출하고 있었다.

뿌리오 접속정보도 홈페이지 업체가 아닌 운영업체의 아이디였다.

운영업체에서 SMS 를 발송해주고 클라이언트들에 대해서 요금을 징수하는 형태인가보다.


먼저 뿌리오에 회원가입을 먼저 한후 요금을 충전하였다.

그리고 운영업체 DB에 접속하여 SMS 발송내역을 다운받은후 신규 서버에 업로드했다.

기존 운영업체와 연결되는 부분을 제거한후 SMS 를 발송해보니,

SMS 는 정상적으로 발송이 되는데, MMS 의 한글이 ???????????? 이렇게 표시되었다.......

언어셋을 euc-kr 로 바꿔봐도 안되고 발송 부분만 따로 떼어서 UTF-8, EUC-KR 아무리 바꿔도 안되었다. 킁....


뿌리오 업체에 문의해보니 j_uds_lib.jar 파일을 교체하라고 한다.

해당 파일을 뿌리오에서 받은후 resin/lib 에 업로드하고나니 홈페이지가 아작났다.

헉!!!!!!!

jsp 소스가 그대로 나와버리는것이다. -_-;;

resin 을 잘 모르면서 그냥 손댄게 화근이었다.

업체에서는 난리가 났다. 하루 광고비가 엄청난데, 홈페이지가 깨져서 보이니... 이걸 어떻게 해야되냐고.

서버업체에도 문의를 해봤지만 자기들도 딱히 모르겠다고 한다.

이런 제길....

j_uds_lib.jar 파일을 다시 원복하고, resin , apache 를 재시작했는데도 안되었다.

2시간동안 낑낑거리다가 재시작을 계속 반복했는데, 어느순간 정상작동............

헐!!!!!!!


2시간동안 엄청 진땀을 빼서 그런지 너무 피곤했다.

하지만, 오기 발동.........


현재 운영중인 서버와 동일한 환경을 맞추어서 linux 를 세팅했다.

동일하게 j_uds_lib.jar 파일을 교체하니 jsp 파싱되지 않았다.

80 포트로 접속시에는 jsp 소스가 그대로 노출되고, resin 접속포트인 8080 으로 접속하니 그대로 잘 나왔다.

그렇다면, 이건 resin 과 apache 와 연결이 끊어진것이라 판단하고.

http://서버IP/caucho-status 로 접속하여 확인하니

Virtual Host : www.example.com

Virtual Host : www.example.com:80

이렇게 두개 있었다.




왜 같은 도메인이 두개 떠 있는지 이해가 가지 않아, 이리저리 검색해보니..

/tmp/localhost_6802 파일을 지우고 resin , apache 를 재시작하라는 글이 있었다.


해당 파일을 지우고 재시작하니.... 홈페이지가 따닥.

정상적으로 떴다...



MMS 발송테스트도 해보았는데 한글이 안 깨지고 잘 발송되었다.

결국 현재 서버와 뿌리오 연동모듈이 안 맞아서 그런것이다.


실 운영서버에 그대로 적용하고 했는데도 잘 안되어서, 확인하니,

홈페이지가 UTF-8 인데, 서블릿이 EUC-KR 이어서 그런것 같았다.


아래 명령어로 해당 파일을 직접 컴파일했다.

javac -classpath .:/usr/local/resin/lib/j_uds_lib.jar -encoding utf-8 com/xxxx/xxxx/메세지매니저.java


이틀동안 삽질한것이 해결되는순간...... 기쁘다.

이번에 MS 에서 XP 는 IE8 까지, 윈도우 7은 IE9 까지 강제 업데이트를 진행하기로 하였답니다.
웹개발자들에게는 환영할만한 소식입니다.
드디어 개발시 IE6 을 고려하지 않아도 되게 될듯 합니다.ㅠㅠ

서론은 이쯤에서 끝내고, Placeholder 란 뭔가.
 

 
위 화면은 제가 주력으로 사용하는 모포털(daum)의 로그인 화면입니다.
아이디와 비밀번호 입력창에 회색으로 희미하게 적용된 부분이 있습니다.

그렇습니다. Placeholder 는 텍스트 박스에 미리 희미하게 입력되어 있어서 사용자들의 입력을 도와주는 기능을 말합니다. (HTML5 에서 적용되는 input attribute 입니다.)

아래는 HTML5 의 Placeholder 를 지원하는 브라우저입니다. 


 Browsers  Placeholder Support
 IE 9 이하  X
 Firefox 3.7 +  ✓
 Safari 4.0 +  ✓
 Chrome 4.0 +  ✓
 Opera 11  ✓

역시나 진리의 갑 MS.....
지원하지 않는군요.... 

그래서 대부분의 사이트에서 Placeholder 를 사용하기 위해 Javascript 를 사용하는데요.
일반적으로 input 태그에 value 에 값을 넣고 글자색을 희미하게 합니다.
이런 경우 값 체크를 제대로 하지 않으면, Placeholder 라고 넣어둔 값이 Submit 되는 경우가 발생합니다.


그럼, 이를 방지하기 위해 다른 방법을 써보죠.
스타일시트에 아래 코드를 적용합니다.

label.absolute { 
    position: absolute; 
    color:#999; 
    display: none; 
    cursor: text
}
input.focusbox { 
    border:1px solid #23adb2;
}
input:focus { 
    outline: #23adb2 solid thin 
} 

input:focus 는 크롬을 위해서 넣어둡니다. ^^.
포커스시 유저 인터페이스는 동일해야 하므로 맞추는게 낫지요.

아래 자바스크립트 코드를 페이지의 하단에 넣어줍니다.

jQuery(function () {
    if (!("placeholder" in document.createElement("input"))) { 
        jQuery(":input[placeholder]").each(function () {
            var $this = jQuery(this);
            var pos = $this.offset();
            if (!this.id) this.id = "jQueryVirtual_" + this.name;
            if (this.id) {
                if (jQuery.browser.version  < 8) {
                    $this.after("<label for='" + this.id + 
                        
"' id='jQueryVirtual_label_" + this.id + 
                        
"' class='absolute'>" + $this.attr("placeholder") + 
                        
"</label>");
                    $("#jQueryVirtual_label_" + this.id).
                        
css({"left":(pos.left+5), "margin-top":3, 
                       
"width":$this.width()});
                }
                else {
                    $this.after("<label for='" + this.id + 
                   
"' id='jQueryVirtual_label_" + this.id + 
                   
"' style='left:" + (pos.left+5) + 
                    
"px;margin-top:2px' class='absolute'>" + 
                    $this.
attr("placeholder") + "</label>");
                }
            }
        }).focus(function () {
            var $this = jQuery(this);
            $this.addClass("focusbox");
            jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
        }).blur(function () {
            var $this = jQuery(this);
            $this.removeClass("focusbox");
            if(!jQuery.trim($this.val())) 
                jQuery
("#jQueryVirtual_label_" + $this.attr("id")).show();
            else jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
        }).trigger("blur");
    }
}); 

이렇게 하시면 Placeholder 를 지원하지 않는 브라우저에서 Placeholder 역할을 대체할수 있습니다.

샘플파일을 첨부하니 다운받아서 확인해보세요.





아래 링크에서 바로 확인할 수 있습니다.

http://jsfiddle.net/d9bnV/ 
 

.
  1. brillo 2012.12.13 14:28 신고

    좋은정보 감사합니다~

  2. 피클 2012.12.31 03:28 신고

    좋은정보 감사합니다. sir에서 보고 왔습니다.

  3. 베짱희 2013.08.14 09:37 신고

    오! 감사합니다. 많은 참고가 되었네용!

모바일 웹사이트 프레임워크 3종 비교



이번에 모바일 사이트 만들면서
3가지 종류의 모바일 사이트 프레임워크를 사용해 봤습니다.


1. iui   (http://code.google.com/p/iui/)

2. jqtouch (http://jqtouch.com/)

3. iwebkit (http://iwebkit.net/)


5점 만점
iui jqtouch iwebkit
UI 4 5 3
생산성 4 5 3
속도 5 4 3


iui 와 jqtouch 는 페이지 이동시 target 을 _self 또는 _webapp 로 주지 않을 경우

상단 head 부분(상단 툴바 , 사이트 로고 및 주메뉴) 은 그대로 두고
ajax 로 데이터를 불러와서 보여집니다.
(이때 dom 노드를 신규 추가하면서 url 을 추가한 dom 의 id 에 맞게 재구성하여
 url hash 를 따로 구성해서 사용하더군요. 그래서 속도는 빠름,
 단점 : 아이폰에 내장된 사파리 브라우저의 뒤로가기 버튼 먹통
          링크 타고 타고 놀다가 뒤로 가기 누르는 순간 앵커 태그가 대부분 먹통 되는 현상 있음)

iwebkit .  걍 노가다 - _ - .
 속도는 느리지만, 개발하기엔 제일 편함.............


[결론] 모바일도 노가다가 최고.      
          iwebkit 으로 개발 완료.
.
아쿠아표 웹 그리드 속도 업....

기존 버전에서 ..

키보드로 셀 이동시 버벅버벅이는 문제..

FF 는 괜찮으나,

IE 에서 CPU 점유율 100% 까지 치고 올라가는 문제. ㅠ.

개선을 위해 소스 건드렸으나, 기존 소스 판독 불가..

주석이 있으나 판독 불가.ㅋㅋ.

아 십라~~ ㅋㅋ. 난 왜 이러지.. 그저 웃지요 ^_^.

다시 만든다.. 이번엔 조금 알고리즘을 바꿔서...

와방 ㅋ 굳ㅋ.

전에보다 속도 더 빨라지고 스크롤 바 역시 딱 셀에 맞춰서..

훗. 조금 뻑이 있지만. 뭐, 아직 완성본도 아니고..

조금씩 손 보자....





슈발 -_-.. 이거 올려놓고 IE 에서 테스해보고 좌절..

존나 느림.................

다시 알고리즘 개선 --;
.
  1. 모던보이 2008.08.29 20:01 신고

    우왕ㅋ 엑셀이네ㅋㅋ

코드 재활용성을 높이기 위한 표준안 확립.

코드 재활용성을 높이기 위해 많이 고민했는데도 불구하고,
사이트가 커질수록 조금씩 함수와 XML 문서의 규격이 조금씩 틀어지고 있다.
함수의 역할 자체가 달라지니 그건 어쩔수 없겠지만..
재활용성을 높이기 위한 뭔가 고민이 있어야 되지 않을까.?

2008.08.15 초안

XML 문서에 대한 표준을 세워서 결과를 출력하자.

현재 사용하는 XML 문서의 예.



- base_cols 를 지정하여 가장 기준점이 되는 nodename 을 지정
- header 의 하위 노드들은 각 노드의 이름은 cols 가 되어 cols 의 value 는 data 의 nodename 으로 지정
- data 의 하위 노드는 list 로 구성되며 list 의 하위 노드로 구성

2008.08.27 수정
 
- -_-... XML 노드가 4천개쯤이었나..?
  초과할 경우 XML 로딩 에러 발생..
  저번에 이 문제 때문에 노드를 1000개로 제한했었나?
  이건, 뭐~.. 안 적어두니 알 수가 있어야지...

.

사내 MES 프로젝트에 사용하기 위한 드래그 앤 드랍.

dhtmlgoodies 인가 -_? 거기껄 쓰려고 했는데.

드래그앤드랍 트리메뉴는 거기껄 쓰는데 이건 초큼..

이 부분은 라우팅 정보도 ajax 로 확인해야 되고 해서.

어쩔수 없이 새로 코드를 만들어야되었다는.....

MES 를 웹으로 올리다보니 ㅠ.

장난아니게 으윽. CS 로 하면 간단할껀데. 라기 보다는..

웹보단 수월하겠지.? ㅋ.

일일이 모든 폼이랑 자스 검사에다가 휴....

장난 아니다 ㅠ.

이번꺼는 생산계획 수립할때 우선순위를 부여하기 위한..

javascript ......... ㅠ.

머리가 지끈.............


.
지금 심심해서 만드는 짤방 사이트에 쓰고 있는건데요.

js 파일을 전체 로드할 필요없이......

필요할때만 불러서 쓰는거에여~.

FF 쓰시는 분들은 Firebug 에 보시면 HTML 탭에 head 에 script 가 생성되는거 볼수있스빈다.

IE, FF 는 되는거 확인했는데 나머지는 몰라요.......

안 깔려있어서 테스트 못해봄.

 
이렇게 두개의 함수로 나눠서 쓰는데요.
head 의 자식노드로 script 를 추가하는겁니다.
function_check 함수는 뭐할때 쓰냐하면 -_-.
다른js 파일에 있는 함수를 부를때......

function_check('함수명', '인자', 0, '함수가 존재하는 js파일');

이렇게 불러서 쓰구요.
세번째 인자  time 은 다른데 쓸려고 한건데....
뭐에 쓸려고 한지 까묵음 -_-; ㅋㅋ;

dy_loaded 배열은 이미 로드한건 또 로드할 필요없이 체크할려고 둔 거구요.
head 의 자식노드 체크하는거보다 배열체크하는게 더 편해서 저렇게 한거에요.

eval 함수가 자원을 초큼 소비하긴 하지만.....
eval 말고 string 으로 넘어온걸 따로 바꾸질 못해서요.
다른 방법 좋은거 아시는분 있으시면 댓글로 달아주시면 감사.

링크에 테스트용으로 달아두었는데요.

맨 처음에 사람모양 아이콘 (login.js) 파일에 있는 함수를 부르는거구요.
글구 메뉴를 클릭하다가 보면 하위 메뉴가 없는 메뉴에서 잠깐 지연현상 보일껍니다.
그 역시 (content.js) 파일에 있는 함수를 부르는거구요.

링크에 테스트 주소 넣어둡니다.

loading(), loaded() 함수는 ajax 로드할때 빙글빙글 돌아가는 아이콘 보여주는 함수입니다.
쓰는거 그대로 올리다보니 --;
ㅈㅅ.

.


별걸 다 만드는 아쿠아. -_-.....

바코드까지 레이어로 그리고...

VML 로 그래프 노가다.......

이번엔 그리드를 웹으로 구현.?? 이거 뭐. 완전 노가다네......

아직 완벽하게 그리드처럼 안되네.

어플의 그리드는 각 컬럼간의 이동 . 각 컬럼 사이즈를

마우스로 드래그해서 사이즈 조정까지........

Extjs 의 Grid 컴포넌트는 그런 기능이 다 있던데.

문제는~~~~~~~~~ 넘 무거워 -_-;

Extjs 의 특정 패키지와 build 파일을 골라서 써야되는데 고르지도 못하겠고.

통짜로 부르니 Ext-all.js 와 Ext-base.js 두 파일을 합치니 700KB 가 넘어가버리네.

얼~~. 그 모든 점을 용납하고서도... 기능이 좋긴 좋던데. 뭐 하나 수정하려면 눈알 빠지도록 쳐다봐도 모르겠다는거. ㅋㅋ

이건 뭐 내가 바보니 ㅡㅡ;


 



PS. 2007 년 11월 21일.
      테이블 상단의 THEAD 부분을 복사하여 스크롤 고정.
      테이블의 rows 가 천라인 넘어가니 브라우저가 뻗어버리는 현상 발생.
      테이블을 복사하는게 아니라 테이블을 생성하는 쪽으로 방향 급변경

PS. 2007년 11월 24일.
      마우스 오버시 배경색 변하는건 바꿔야될듯.
      IE 의 경우 랜더링 문제인지 조낸 버벅임.....
      데이터의 갯수가 500 라인을 넘어가면 버벅임. 실제 클릭시 클릭한 노드를 찾아오지 못하는 현상
        (찾아오긴 찾아오지만 굉장히 느림)
      알고리즘 계속 구상중........ㅠㅠ.

이전버전 : http://www.i-swear.com/402
.
  1. 임호병 2007.11.21 19:15 신고

    자랑갤로~

어째 디자인이 눈에 익죠 -_-;

죄송합니다. 이 몸이 디자인이 안되어서 좀 빼겼습니다 -_-;

하지만 그대로 복사하진 않았다는거.

나름 포토샵에서 따라서 그렸습니다.... 응? 그게 그건가 ㅡㅡ;;

뭐 암튼.................

Wink 가 조금 이상해서 화면이 마우스를 잘 못 따라가는데 보는데는 지장없으니.

아이콘에서 노란 물음표가 아니라 노란 느낌표군...... -_-; 다시 SWF 파일 만들기 귀차나서

패스................

ㄱㄱ!





앞으로 메세지 박스는 요넘으로다가 써먹어야겠습니다.

아쿄쿄~* 나름 예외처리도 했다는거 ...... 나름이........... 레이어가 안 뜨면 window.alert 띄우고 끝.

뭐? 어쩌라고 -_-; IE 6 이랑 IE 7 , FF 2 에서 다 작동되는데 ........

사파리? 패스....... 맥? 패스........... 아쿄쿄~*

오늘따라 유난히 패스가 많네요. 축구도 못하는데.ㅋㅋ

샘플 예제 ) http://dev.i-swear.com/aquamsgBox/info.php
.


  1. 날코더 2007.11.10 17:10 신고

    반다이크 브라운을 살짝 더 섞어서 마구 문지르시면 더 색상이 예뻐지지 않을까요..

    어때요? 참 쉽죠?

    • 알찬돌삐 2007.11.10 17:11 신고

      반다이크 브라운이 먼가욘.????
      글구 길마님. 길원이 이케 열심히 활동하는데
      뭔가 지원은 없는가요.?
      우왕ㅋ굳.

  2. AgentSmith 2007.11.10 17:11 신고

    굳~~~~~~~~~~~~~~~

  3. Maro 2007.11.10 17:23 신고

    오오.. 멋지군요 +_+!!

아쿠아가 현재 만들고 있는거.

이걸 웹 그리드라고 해야될런지.

아무튼 웹에서 INPUT 태그가 수십개씩 생겨버리면

페이지가 굉장히 느려진다 ㅠㅠ.

100행 200행 넘어가버리면 이건 뭐..... 후덜덜.

어플처럼 1000행이 넘어가더라도 어떻게 스무쓰하게

처리하는 방법이 없을까 하고 고민하다가.

아래처럼 하는게 어떨까 하는데.

뭐 이런게 공개된게 있을라나......

사용자가 변경한 데이터는 아무래도. json 으로 처리해야되려나.

어케 처리하지. 그것도 고민이네.








PS. 캐삽질. PHPSCHOOL 회원들에게 물어보니 훨 좋은게 넘 많은 ㅠ_ㅠ
LINK : http://extjs.com/deploy/dev/examples/grid/totals.html
         http://www.activewidgets.com/general.demos/
.
  1. AgentSmith 2007.11.06 10:41 신고

    색깔바라 ㅋㅋㅋ

  2. 맞을꺼야 2007.11.06 12:22 신고

    임호병

  3. Maro 2007.11.06 14:18 신고

    헛.. 앜후아님 블로그로군요 :) 자주 들릴게염~

+ Recent posts

티스토리 툴바