로그인

이메일
비밀번호
왼쪽에 걸리적 거리는 거 숨기기

'컴퓨터/웹'에 해당되는 글 124건

  1. 사파리4 베타 에서의 try-finally 사용시 문제 (3)

    2009/04/30

  2. CSS, HTML, JavaScript 레퍼런스 (2)

    2009/02/03

  3. URL 인코딩 된 EUC-KR 문자열의 디코딩 (6)

    2009/02/01

  4. AlphaImageLoader 필터 적용시에 한글 png 파일명 (3)

    2009/02/01

  5. 파이어폭스에서 text-overflow:ellipsis 쓰기 (2)

    2008/10/21

  6. 파이어폭스3 에서 eval 을 쓸 때의 메모리 사용량 증가 (4)

    2008/10/14

  7. Google Chrome, 아주 잠깐 써보고 느낀 점 (7)

    2008/09/03

  8. FireFox 에서의 innerHTML 버그 (6)

    2008/09/02

  9. 젠장! (7)

    2008/09/02

  10. 파폭에도 querySelector 함수군이 생김 (2)

    2008/07/31
◀ PREV : [1] : [2] : [3] : [4] : [5] : ... [13] : NEXT ▶

사파리4 베타 에서의 try-finally 사용시 문제

컴퓨터/웹 2009/04/30 15:23
어제 사파리4 베타 겁내 좋다고 글 올렸었는데.
문제를 발견했다.

IE 에서의 메모리릭을 방지하기 위한 여러가지 방법 중,
try-finally 를 사용하는 방법이 있는데, 설명은 치우고 뭐 아래와 같은 식으로 사용하는 방법이다.

(Language : javascript)
  1. function testFunction() {
  2.  
  3.   var aRet = [ 1, 2, 3 ];
  4.   ...
  5.  
  6.   try {
  7.     return aRet;
  8.   } finally {
  9.     aRet = null;
  10.   }
  11.  
  12. }

저렇게 사용했을 때, 다른 브라우저의 경우에는
정상적으로 testFunction 함수의 리턴값으로 [ 1, 2, 3 ] 을 받아오게 되는데,

사파리4 베타는 finally 안에서 셋팅된 값인, null 을 받아온다;
이것때문에 사파리4 에서 작성한 코드가 마구 오동작;

설마 정식 버젼에서는 고쳐지겠지?

버그 리포팅 궈궈.

I found a javascript problem.

We often use the 'try-finally' codes to avoid IE memory leak like below link.

http://dl.getdropbox.com/u/159225/safari4_bug.html

I expect the return value is [ 1, 2, 3 ],
but the function returns null.

I think it's serious bug.
I sincerely hope to fix this.

사용자 삽입 이미지

내용 추가 :

남태가 첨삭 해 줬음.

김태희 ( 때이-위기의 남자 ) 님의 말 :
  IE memory leak as the following link.
  like a below link.
  a 를 쓰던가 아니면 following 을 쓰던가 해주고

김태희 ( 때이-위기의 남자 ) 님의 말 :
  I expected the return value might be [1, 2, 3] but the function returns 'null'.
  I think it's a serious bug.
  마지막 문장 저렇게 써도 다 알아먹으니 걱정말구

영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2009/04/30 15:23 2009/04/30 15:23
,
트랙백 0 : 댓글 3 : RSS

CSS, HTML, JavaScript 레퍼런스

컴퓨터/웹 2009/02/03 18:54
우왕 여기 짱인듯.
http://reference.sitepoint.com/
닥치고 즐겨찾기.
영양가 있는 포스팅인가요
(총 1분이 투표해서 5.0점) 5.0점
2009/02/03 18:54 2009/02/03 18:54
, , ,
트랙백 0 : 댓글 2 : RSS

URL 인코딩 된 EUC-KR 문자열의 디코딩

컴퓨터/웹 2009/02/01 20:35
UTF-8 캐릭터셋의 '한글' 이라는 글자를 URL 인코딩 하면
%ED%95%9C%EA%B8%80 이고,

EUC-KR 캐릭터셋의 '한글' 이라는 글자를 URL 인코딩 하면
%C7%D1%B1%DB 입니다.

그런데 자바스크립트에서는
전자(UTF-8)의 경우는 decodeURI 을 사용해서 디코딩이 가능하지만,

(Language : javascript)
  1. var str = '%ED%95%9C%EA%B8%80';
  2. console.log(decodeURI(str)); // 결과 : 한글

후자(EUC-KR)의 경우는 디코딩 할 방법이 없습니다;

(Language : javascript)
  1. var str = '%C7%D1%B1%DB';
  2. console.log(?????(str)); // 디코딩 할 방법이 없음

디코딩을 하기 위해서는 자바스크립트 내에서 EUC-KR 을 UTF-8 로 컨버팅 하는 작업을 수행해야 하는데요,

처음에는 EUC-KR 문자열을 그냥 몇번 더하기 곱하기 해주고 몇 번 쉬프트 하면 UTF-8 문자열로 컨버팅 할 수 있을 줄 알았는데, 이를 위해 컨버팅 방법을 찾아봤는데 딱히 방법이 없더군요;

결국 맵핑 테이블을 만드는 수밖에 없다는 결론에 이르러 맵핑 테이블을 사용한 디코딩 코드를 만들었습니다.

소스코드 첨부합니다. (맵핑 테이블 데이터 때문에 파일 사이즈가 꽤 되네요;)

unicode.js

사용은 아래와 같이 합니다.

(Language : javascript)
  1. var str = '%C7%D1%B1%DB';
  2. console.log(decodeURIforEUCKR(str)); // 결과 : 한글

파일 사이즈가 조금 작은 놈을 하나 더 만들어 봤습니다.
대신 초기화 속도가 좀 느립니다 (제 PC 에서 0.2~0.3초 정도)

unicode.compact.js

제가 만든 코드이긴 하지만 가능한 클라이언트 사이드에서 EUC-KR -> UTF-8 컨버팅 할 작업을 만들지 않아 이 코드를 가능하면 안 쓰는 것이 좋지 않을까 생각합니다.
영양가 있는 포스팅인가요
(총 6분이 투표해서 4.0점) 4.0점
2009/02/01 20:35 2009/02/01 20:35
, , , ,
트랙백 0 : 댓글 6 : RSS

AlphaImageLoader 필터 적용시에 한글 png 파일명

컴퓨터/웹 2009/02/01 16:52
한글로 된 이미지 파일을 보여주고 싶을때, 해당 경로를 찾지 못 하는 것을 막기 위해
일반적으로 아래와 같이 파일명을 URL 인코딩해서 사용합니다.

(Language : html4strict)
<img src="%C7%C7%BF%A3%C1%F6.png" />

마찬가지로 CSS 에서 경로를 지정하고자 할 때도 같은 식으로 사용합니다.

(Language : css)
div { background:url('%C7%C7%BF%A3%C1%F6.png'); }

그런데!

Internet Explorer 6 이하의 브라우저에서는 알파 채널 PNG 를 지원하지 않기 때문에
이를 표현하기 위해서 filter 스타일에 사용하는 AlphaImageLoader 라는 놈이 있는데요,

이 놈을 사용할 때는 다릅니다.
아래처럼 이미지 파일의 경로를 지정해주면 안됩니다.

(Language : css)
div {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%C7%C7%BF%A3%C1%F6.png', sizingMethod='image');
}

그러면 어떻게 해야 할까요;

구글을 아무리 뒤져봐도 멀티바이트 문자로 된 URL 을 쓸 일이 없는 양키들이 대부분이라 당췌 답을 찾을 수 없었습니다.

결국 혼자 개고생 고생 해서 수시간여의 삽질 끝에 알아냈습니다;

URL 인코딩 된 파일명을 한번 더 URL 인코딩해서 쓰면 됩니다.
결국 % 를 %25 로 바꿔주고 하면 되는거죠.
아래는 수정된 코드입니다.

(Language : css)
div {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%25C7%25C7%25BF%25A3%25C1%25F6.png', sizingMethod='image');
}

하아.
정말 IE 바스타드.
영양가 있는 포스팅인가요
(총 1분이 투표해서 5.0점) 5.0점
2009/02/01 16:52 2009/02/01 16:52
, , ,
트랙백 0 : 댓글 3 : RSS

파이어폭스에서 text-overflow:ellipsis 쓰기

컴퓨터/웹 2008/10/21 13:26
예전에 text-overflow:ellipsis 썼을 때에는 IE 에서만 지원하는 스타일이었는데,

어느샌가 Opera, Safari, Chrome 등등에서도 모두 지원하는 CSS 스타일이 되었군요~
CSS3 스펙에도 포함되고 말이죠~ 세상 참 좋아졌습니다-_-; ㅋㅋ

MS 만의 독단적인 text-overflow, filter, ime-mode, expression 같은 CSS 스펙들이 예전에는 참 마냥 미워보이기만 했는데 요즘에는 결과적으로 꽤 괜찮은 짓 같았다는 생각이 드네요~

뭐 아무튼, 이런 좋은 text-overflow 라는 CSS 스타일을
아쉽게도 FireFox 에서는 여전히 지원하질 않습니다.

IE 다음으로 브라우저 점유율이 높은 FireFox 이기 때문에 이를 무시하고 개발하기 좀 망설여지게 되는데요, 방법이 없을까 하고 구글링을 하다가 보석같은 코드를 만났습니다~


위의 코드인데요, 매우 훌륭하지만 몇가지 문제가 있습니다.

  1. 해당 부분 글자가 선택이 안됨
  2. 해당 부분에 태그를 사용할 수 없음
 
이 중 첫번째 문제를 꼼수를 통해 해결 해보았습니다.

구현방법은 설명하기 귀찬; 소스코드를 통해 각자 알아서 파악하세요;

IE6, IE7, FF3, Opera9, Safari3, Chrome 에서 테스트 해 보았습니다.
혹시 다른 브라우저 버젼 쓰시는 분 알려주시면 ㄳ
IE8 beta2 에서는 안되더군요.
이건 스크립트 문제라기 보단 그냥 IE8 beta2 의 CSS 문제인 듯?

두번째 문제는 제가 XUL 을 할 줄 몰라서 방법이 있을런지 모르겠네요.
몇가지를 시도해 보았는데 잘 안됩니다;

아시는 분 알려주세요~
영양가 있는 포스팅인가요
(총 4분이 투표해서 3.5점) 3.5점
2008/10/21 13:26 2008/10/21 13:26
, , ,
트랙백 0 : 댓글 2 : RSS

파이어폭스3 에서 eval 을 쓸 때의 메모리 사용량 증가

컴퓨터/웹 2008/10/14 14:56

일반적으로 JSON 스트링을 객체로 바꿀 때는 eval 을 사용합니다.
이를 테면 아래 처럼요.

(Language : javascript)
  1. var json = '{ hello : "world", foo : [ 1, 2, 3 ]}';
  2. var obj = eval('(' + json + ')');


그런데 오늘 회사동료가 저런식으로 반복해서 썼을때 파이어폭스3 에서 메모리 사용량이 치솟는 다고 하네요. 그래서 테스트로 한시간 정도 돌렸더니 마구 올라서 막 메모리를 몇 백메가씩 먹더군요-_-;

뭔가 파이어폭스3 의 버그인 것 같긴 한데 사용하는 입장에서 어찌 할 도리도 없고, 뭔가 회피 할 수 있는 방법이 없을까 이것저것 해보다가 아래처럼 했더니 (왜인지는 모르겠지만) 확실한 개선을 보여주었습니다.

(Language : javascript)
  1. function evalEx(sStr) {
  2.   return (new Function('', 'return ' + sStr + ';'))();
  3. }
  4.  
  5. var json = '{ hello : "world", foo : [ 1, 2, 3 ]}';
  6. var obj = evalEx(json);


문제도 해결하고 eval 쓸때 앞 뒤에 (, ) 도 안 붙혀줘도 되고, 괜찮은듯?

영양가 있는 포스팅인가요
(총 3분이 투표해서 5.0점) 5.0점
2008/10/14 14:56 2008/10/14 14:56
, ,
트랙백 0 : 댓글 4 : RSS

Google Chrome, 아주 잠깐 써보고 느낀 점

컴퓨터/웹 2008/09/03 10:23

겁나 빠르다;
웹페이지 뜨는 속도 분 아니라 전반적인 동작이 겁나 빠르다;

특히 자바스크립트로 구현하는 애니메이션은
뚝뚝 끊기기가 쉬운 기능인데, Chrome 은 완전 부드럽게 움직인다;
(세계에서 제일 빠르다고 주장하는 Opera 랑도 비교해봤는데 Chrome 이 훨 낫다;)

지금까지 발견한 불편한 점은

사용자 삽입 이미지

텍스트큐브의 편집창 글자가 왤케 작지;


..이랑 입력창에 포커스가 가면 사파리 처럼 주변에 지멋대로 테두리를 표시해 강조해준다.

사용자 삽입 이미지

포커스가 가니까 생긴 노란 테두리

이런거 싫은데-_-;
이런 기능 제공할꺼면 꼭 저런거 비활성화 시키는 확장 CSS 스타일도 꼭 제공했으면;;


다운로드는 여기에서

http://www.google.com/chrome


IE 가 느리다는 이유로 FireFox 를 쓰는 사용자라면, Chrome 을 쓸 가치가 충분히 있는듯.

영양가 있는 포스팅인가요
(총 1분이 투표해서 5.0점) 5.0점
2008/09/03 10:23 2008/09/03 10:23
,
트랙백 0 : 댓글 7 : RSS

FireFox 에서의 innerHTML 버그

컴퓨터/웹 2008/09/02 16:46

이미 아시는 분들도 있겠지만 Internet Explorer 의 경우는 <TABLE>, <THEAD>, <TBODY>, <TR> 엘리먼트의 innerHTML 이 읽기전용이라서 innerHTML 을 셋팅 할 수 없는 문제가 있습니다.

그리고 <SELECT> 도 innerHTML 가 읽기전용은 아니지만 막상 사용하면 동작이 이상해지는 문제가 있죠.

IE 에서 이런 문제가 있다는 건 많이 알려진 내용인데요, 오늘 팀원 한 분이 제가 짠 코드가 이상하게 동작한다는 제보를 해주셔서 발견한 문제를 공유드립니다.

이 문제는 IE 가 아닌 FireFox 에서만 발생하는 문제인데요, parentNode 가 존재하지 않는 엘리먼트에다가 innerHTML 로 셋팅하려고 할 때 문제가 발생합니다

이를 테면

(Language : javascript)
<table><tr id=”HELLO”></tr></table>
…
var hello = document.getElementById(“HELLO”);
hello.innerHTML = ‘<td>hello</td><td>world</td>’;


위와 같은 코드에서는 hello 의 parentNode 가 존재하기 때문에 문제가 안 생기지만

(Language : javascript)
var hello = document.createElement(‘tr’);
hello.innerHTML = ‘<td>hello</td><td>world</td>’;
alert(hello.innerHTML); // 결과 : helloworld


위의 코드에서는 hello 의 parentNode 가 존재하지 않기 때문에 문제가 생기는 데요,
innerHTML 에서 텍스트 부분만 쏙 빠져서 적용되네요;

모든 종류의 엘리먼트에 대해서 이런 문제가 생기는 건 아닌 것 같고,
조금 테스트 해본 바로는 THEAD, TBODY, TR 엘리먼트의 innerHTML 을 다룰 때 이런 문제가 발생하는 것 같습니다.

내용이 긴데, 3줄 요약하면,

  1. 파이어 폭스에서
  2. parentNode 노드가 존재하지 않는
  3. THEAD, TBODY, TR 엘리먼트의 innerHTML 을 셋팅하면 이상하게 동작한다

DOM 다루실 때 참고해주세요~

영양가 있는 포스팅인가요
(총 2분이 투표해서 2.5점) 2.5점
2008/09/02 16:46 2008/09/02 16:46
, , ,
트랙백 0 : 댓글 6 : RSS

젠장!

컴퓨터/웹 2008/09/02 11:24
지금 있는 브라우저들만으로도 충분히 힘들거든?
왜 또 구글에서는 브라우저를 만든다고 나서는거야 ㅠㅠ

http://news.naver.com/main/main.nhn?mode=LS2D&mid=sec&sid1=105&sid2=283&nt=20080902110348

아까 대강 봤더니 그래도 WebKit 엔진이라 다행,
그런데 자바스크립트가 멀티쓰레드로 돌아간다고 본 것 같은데...;
그럼 지금까지 싱글쓰레드로 가정하고 작성했던 코드들에게 대혼돈이 찾아온다?!?!
영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/09/02 11:24 2008/09/02 11:24
,
트랙백 0 : 댓글 7 : RSS

파폭에도 querySelector 함수군이 생김

컴퓨터/웹 2008/07/31 11:41
파폭에도 querySelector 함수군이 생긴다는 소식을
회사 동료를 통해 들었다.
요즘 RSS 구독을 성의있게 안 하다 보니까 새로운 소식에 무뎌지는군;;;

http://www.dustindiaz.com/firefox-31-brings-good-stuff/

이제 저런 함수군을 사파리(WebKit), IE8, FF3.1 에서 (오페라는.. 어떤지 기억이 안남;)
모두 지원하게 되니

슬슬 예전에 만든 CSS 셀렉터엔진을 저런 네이티브 함수를 쓰도록 고쳐야 하는데...
만만찮은 규모의 작업일 듯 싶다;

아으앙
영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/07/31 11:41 2008/07/31 11:41
, ,
트랙백 0 : 댓글 2 : RSS
◀ PREV : [1] : [2] : [3] : [4] : [5] : ... [13] : NEXT ▶