Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

서버측 페이지가 2번 로딩되는 문제

개발을 하다보면 항상 머리아프게 고생시킨 문제는 어이없는 무제인 경우가 많다. 이번에도 역시 그랬다. 이 문제 때문에 하루 업무를 다 날렸다. 오전 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번 로딩되는 현상이 클라이언트 사이드인 자바스크립트는 그냥 무시해 버린 것이다.



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


<!-- // 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분만에 해결했다. ㅡ..ㅡ 역시 개발을 막 굴러야대... 경험이 짱이야....

이날의 교훈.... 웹표준은 어렵다... 경험이 짱이다.. 일단 막 구르고 보자...
2007/12/13 01:23 2007/12/13 01:23

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

 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. XBAP1 : Xbap을 이용하면 WPF로 만든 것을 그대로 웹으로 올릴수 있다. (단 IE에서만 가능하다.), 모든 코드를 HTTP를 통해서 받으며 Sendbox보안모델의 적용을 받는다.


3. 실버라이트 : 실버라이트 플레이어에서 실행되며 Sendbox보안 모델의 적용을 받는다, 운영체제에 상관없이 사용할 수 있으면 대부분의 브라우저를 지원한다.
WPF는 CS단을 위한 것 이지만 Xbap2을 이용하면 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로 만드는데 이렇게 퀄리티가 좋을 수 있다니... ㅠ..ㅠ 공도님이 프로젝트를 진행하셨다고 한다...

사용자 삽입 이미지
죽인다... 동영상을 보면서 옆에서 끌어다가 화면에 던지면 PIP3로 동작한다.  PIP화면을 이동할수 있고 클릭하면 주화면과 바뀐다. 풀스크린으로 볼수도 있고 아래 관련영상도 나오고 현재 영상의 일부구간을 따로 저장할 수도 있다.

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

  1. XAML Browser Application [Back]
  2. XAML Browser [Back]
  3. Picture In Picture : 화면안에 또 하나의 화명을 보여주는 것을 말한다. [Back]
2007/12/12 01:21 2007/12/12 01:21