simple note

업무중 해당 이슈를 해결하라는 요청이 들어와서 이틀간 웹서핑을 했다.

이슈를 요약하자면,
IE8부터는 예전과 달리 명시적으로 "새로운 세션"으로 창을  띄우지 않는 한,
모든 창과 탭이 동일한 세션을 공유할 수 있다.
따라서 이용자가 로그아웃을 하지 않고 창만 닫은 경우, 여전히 세션이 남아있어
다른 사용자가 기존의 세션 정보를 이용하여 악용할 소지가 있다.

클라이언트 측에서 세션을 공유하지 않도록 하는 해결 방법은 많이 알려져 있다.

1. 사이트에서 제공하는 로그아웃 버튼을 이용하여 명시적으로 종료하여 세션을 끝낸다.
2. 파일메뉴에서 New Session 을 선택하여 새로운 세션으로 시작한다.
3. iexplore.exe 실행시 인자로 -noframemerging  를 추가하여 실행시킨다. (-nomerge 옵션은 Deprecated 됨)
4.  Registry key 수정 : HKCU\Software\Microsoft\Internet Explorer\Main\FrameMerging
   0 - disable frame merging , 1 – enable (default)

그럼 서버측은?

찾아본 자료는 세가지 방법을 설명하고 있었다.
1. 클라이언트 웹 세션 관리기법 : 특정 프레임에 로그인시 인자값을 할당하여 해당 인자값 유무를 체크 -> 복수프레임일 경우에만 적용 가능
2. 보안세션을 파라미터로 관리 : 보안세션에 사용되는 세션 키 값을 페이지 이동시마다 파라미터로 전달 -> 단일프레임일 경우에 적용가능, 세션키 암호화 필요 , 세션관리방식 변경이 필요함
(웹 세션 키는 쿠키로, 보안세션키는 request parameter로 전달하여 관리)
3. 보안모듈을 이용하여 프로세스 추적/제어 -> 완벽한 추적은 불가능함 , 보안모듈 개발 추가비용 발생, 장애 RISK

내가 적용한 방식은 1)과 유사한데, 프레임이 필요하지는 않다.

아이디어는 IE에서 제공하는 DOM Storage에서 시작한다.
single tab의 lifetime 을 따르는 window.sessionStorage 를 활용하기로 했다.
흐름을 기술하자면 아래와 같다.

1. 로그인 시점에 sessionStorage 를 저장한다. (로그인 후)
2. 로그인 체크가 필요한 모든 페이지 내에서 sessionStorage를 체크한다.
3. 만약 sessionStorage 정보가 없는데도 서버세션이 있다면, 다른 탭이거나, 새창이라고 판단하여
세션정보를 제거하고, 최초페이지로 이동한다.
cf) 팝업의 경우에는 적용하기 어렵다....
cf) 단점은... 기존 창까지 세션아웃된다는거. (물론 피할 수도 있겠지만, 귀찮아서 패스.. )

1. // 로그인 시 저장하기
2. if(navigator.userAgent.indexOf("MSIE 8") == 25 ){
3. sessionStorage.login = "lepffm";
4. }
5.  
6. // 로그인후 체크하기
   if(session!=null){
7. if(navigator.userAgent.indexOf("MSIE 8") == 25 ){
8. if(sessionStorage.login == null){
9. document.execCommand("ClearAuthenticationCache",false);
   
10. top.document.location.href = '/';
11. }
12. }
13. }
    

참고사이트
http://blogs.msdn.com/b/ie/archive/2009/05/06/session-cookies-sessionstorage-and-ie8.aspx
http://msdn.microsoft.com/en-us/library/ee330728(VS.85).aspx
http://msdn.microsoft.com/en-us/library/cc197062(v=VS.85).aspx
http://byung.egloos.com/4970548

이 글은 스프링노트에서 작성되었습니다.

좋은 소프트웨어를 개발하는데 필요한 원칙
단순성 : 프로그램을 간결하고 쉽게짜는 것이다
명확성 : 기계뿐아니라 사람도 이해하기 쉽게 만드는 것이다
일반성 : 다양한 상황에서 잘 동작하며 새로운 상황이 발생해도 잘 적응하는 것이다
자동화 : 하찮은 작업에서 우리 자신을 해방시켜 기계가 우리를 대신해 일하게 하는 것이다 p10

잘짠코드는 대충 던져놓고 한번도 정리하지 않은 코드보다 읽기도 쉽고 이해하기도 쉬울뿐더러 대부분의 경우에 에러도 적고 분량도 적은 편이기 때문이다 p38

좋은 코드를 짜는 것은 좋은 글을 쓰는 것과 여러모로 닮았다. p14

단순성과 명확성은 최우선이자 가장 중요하다. 나머지는 대부분 이런 특징을 따라 나오기 때문이다. 제대로 작동하면서도 제일 단순한일을 수행하라. p341

///////////////////////

그닥 감흥은 없었다. 타겟이 학생들을 대상으로 한듯...

너무 비슷한 책만 읽어서 그런지 그닥 와닿는 문장도 없었다.

하지만 좋은 책이다. 아직 학생의 입장이라면 잘 읽고 배웠으면 싶다.

이 글은 스프링노트에서 작성되었습니다.

웹페이지 속도측정 작업의 교훈

속도측정에 쓰이는 비슷비슷한 툴은 많다
하지만 적절한 툴을 찾기는 어렵다.
브라우저에 플러그인 된 경우 사용하기 편리한 점은 있으나 가장 보편적인 브라우저(IE)를 지원해야 제대로 활용이 가능하다.

각 정보의 의미를 정확하게 이해해야 한다.

특정 회수 이상 수행하여 평균값을 사용하고 목표를 정하여 멈출 시점을 정하자 

주요지표 

총시간 

서버시간 

렌더링시간 

요청수 

데이터양 

문제점 진단 

- 서버냐 리소스냐 

- 정말 느린가 (as-is) 비교 

- 무엇으 개선할 것인가 : 302  expire gzip text? 개선 대상 선정

이 글은 스프링노트에서 작성되었습니다.

고객이 웹사이트가 느리다고 불평하는 바람에
웹화면 성능 측정을 하면서 알게된 것.

실제 서버 시간은 그리 많지 않은데 왠 이미지는 그리도 많이 붙여놓았는지..
무수히 많은 304 메세지들.

304는 "Not Modified" 즉 변경사항이 없으므로 웹서버에서 다시 다운 받을 필요없다는 서버의 메세지다. 이경우 서버로부터의 실제 data 다운로드는 일어나지 않는다.

하지만 자주 변경되지 않는 데이터를 가지고
애초에 서버에게 물어보는 행위 자체가 불필요한거 아닌가...
그래서 서버에 물어보지 않도록  Expire 정보를 명시하기로 했다.
여러 게시글에서 추천하는 사항이다.

어디서 설정하나.. 한참을 헤멨지만.
수정할 파일 : %web_app_home%/config/obj.conf

1. <Object ppath="/a/b/c/img/*">
2. PathCheck fn="set-cache-control" control="max-age=86400"
3. </Object>

 물론 전체를 잡아도 될거지만 내경우에는 img, css, js, htm 등만 대상으로 했다.

서버 stop 후 다시 start ...

max-age를 왜 하루로 잡았냐구? 지금은 테스트 기간이라서 자주 바뀔 소지가 있다.

이제 좀더 빠른 속도를 체감할 수 있다.

참고자료
http://blogs.sun.com/walter/entry/how_to_add_expires_header

 http://www.mnot.net/cache_docs/

http://whiteship.me/2465

이 글은 스프링노트에서 작성되었습니다.

토요일 쿠키상자에서 피자만들기하러 갔다.

 먼저 피자 익는거 기다릴때 먹을 접대용 피자를 만들고...

그다음에 본격적으로 구름표 피자만들기

밀가루를 감싸안고 흡족한 표정

 평평하게 피자도우를 펼 준비

잘 부풀도록 포크로 마구마구 콕콕거리기

 드디어 완성

셰프 구름양의 피자 완성 기념촬영 윙크~~~~

이 글은 스프링노트에서 작성되었습니다.

웹페이지 속도 측정 등으로 검색해서는 잘 안나오더라..

마침내 찾은 툴들

httpwatch : 익스플로러와 firefox에 기생하여 돌릴수 있는 http monitoring 툴

http://www.httpwatch.com

베이직 버전을 무료로 쓸수 있는데 기능이 조금 부족하네요.

필터 기능을 이용하여 리소스 유형별 갯수를 얻을수도 있다.

피들러 : http://www.fiddler2.com/fiddler2/

비교적 알려진 공개툴

아이콘 설명은 http://www.fiddlertool.com/Fiddler/help/ui.asp 을 참조하자.

 timeline 기능이 재미있다. (autoscale chart 기능을 체크해두면 더 가독성이 높아진다. )

좀더 디테일한 기능이 많은데 생략~

IBM Page Detailer : http://alphaworks.ibm.com/tech/pagedetailer

약간 기능이 부족한듯 하다. 차트와 디테일 기능을 제공한다.

YSlow : 파이어폭스 플러그인 (firebugs 플러그인이 먼저 설치되어야 한다.)

 proxymotion : http://www.proxomitron.info/    http://en.wikipedia.org/wiki/Proxomitron
아직 안써봤다.

iewatch : http://www.iewatch.com/   상용으로 trial제공하는듯. 아직 안써봤다.

개선안

•  캐시 만료기간 지정
•  스크립트 파일 합치기
•  gzip 적용 : html, js, css 등 텍스트 파일에만 대상으로 할것

참고글 : http://blog.pages.kr/254

이 글은 스프링노트에서 작성되었습니다.

2010/06/05 

 쿠키상자라는 근처 과자가게에서 주말마다 어린이용 요리강좌? 를 한다.

이번엔 싱싱한 과일  젤리!!!

예쁜 앞치마 입고 한컷

 제빵걸은 다소 부담스럽지만 아이들에게 참 재밌게 대해준다.

구름이 잘해랏. 

이 글은 스프링노트에서 작성되었습니다.

풀잎을 뜯어 이것저것 조형을 하는데..

내가 볼때는 외계로 보내는 신호?

뜻은 노라죠~~~ 

이 글은 스프링노트에서 작성되었습니다.

 옆집 또래친구와 한창 신나게 논다.

둘이 서로 만나면 좋아 죽는다 ^^

이 글은 스프링노트에서 작성되었습니다.

물감 잔뜩 칠해서 손도장 찍기 놀이후 한컷 2010 5/26 

이 글은 스프링노트에서 작성되었습니다.