효율적인 자바스크립트 작성하기 Programming/WEB 2011/04/17 23:27
  자바스크립트 코드가 실행되면 '실행 Context'라는 것이 생성된다. 이 실행 컨텍스트는 코드가 실행될 환경을 정의해주는데, 페이지가 로드될 때 전역 실행 컨텍스트가 생셩되며 함수가 실행될 때마다 추가 실행 컨텍스트가 생성된다. 즉, 실행 컨텍스트의 스택이 생성이 되는 것이고 가장 상위에 있는 컨텍스스트가 현재 활성인 컨텍스트가 되는 것이다.
  각 실행 컨텍스트는 이와 관련된 휴효 범위 체인(Scope Chain)을 갖는데 이는 식별자 확인(identifier resolution)을 하기 위해 사용한다. 이 일련의 유효 범위 체인에는 해당 실행 컨텍스트에서 사용하는 유효범위 내의 식별자를 정의하는 하나 이상의 변수 객체를 포함한다. 전역 실행 컨텍스트는 자신의 유효 범위 체인에 오로지 한개의 변수 객체를 가지며 이 객체는 자바스크립트에서 사용 가능한 모든 전역변수와 함수들을 정의 한다. 함수가 생성이 되면 그 함수 내부 속성에 해당 실행 컨텍스트의 유효 범위 체인을 포함하도록 지정된다. 나중에 자바스크립트를 실행하면서 함수 내부로 들어가면 활성화 객체가 생성이 되고 this, arguments, 그리고 이름 부여된 인자들과 해당함수의 지역 변수들이 초기화 된다. 이 활성화 객체는 실행 컨텍스트의 유효 범위 체인의 맨 앞에 나오며 그 다음에는 해당 함수 속성에 포함되어 있는 객체들이 나온다.

저작자 표시 비영리 변경 금지
javascript, 자바스크립트, 효율적인
트랙백0개 , 댓글0개
jquery 1.4.2 버전 json 변경 사항 Programming/JQuery 2011/01/14 15:58

jquery 1.4.2 이전버전에서는 $.ajax 를 이용하여 data를 json 형식으로 받을 때,

{ 'key':value } {key;value} {"key":value}

어떠한 형식을 써도 되었지만.

1.4.2 버전으로 업을 한 이후에는

{"key":value} 이런 형식이 아닌 다른 형식으로 data를 가지고 온다면 json 파싱 에러가 발생을 하게 된다.

겉으로는 에러가 나지 않고, javascript가 반응이 없는 것 처럼 보일지 모르나, json 파싱에러가 나서 javascript가 더이상의 반응이 없는 것이다.

저작자 표시 비영리 변경 금지
1.4.2, JQuery, jquery 1.4.2, JSON
트랙백0개 , 댓글0개
jQuery find와 filter의 차이 Programming/JQuery 2010/08/24 10:09
jQuery 에서 filter와 find의 차이점은

  .find()는 혀재 집합의 자식들에 대해 선택하거나 동작하는 반면 .filter()는 오진 현재 요소 집합에 대해 동작한다. 선택된 요소의 자식들을 다시 한번 골라내기 위해서 현재 래퍼 집합을 컨텍스트로서 사용하여 요소 집합을 변경하려 한다면 .find()를 사용하면 된다. 하지만, 단지 현재의 래퍼 집합을 필터링한 뒤 그 집합 안에 남아있는 DOM 요소들의 새로운 집합을 얻고자 한다면 .filter()를 사용해야 한다.

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<div style="background-color:#87A3D6">
<p>jquery의 <em>find</em>와 <em>filter</em>의 차이점</p>
</div>
</body>
<script type="text/javascript">
alert("div 내에 p 태그의 length(filter 이용) : " + $("div").filter("p").length);
alert("div 내에 em 태그의 length(filter 이용) : " + $("div").filter("em").length);
alert("div 내에 p 태그의 length(find 이용) : " + $("div").find("p").length);
alert("div 내에 em 태그의 length(find 이용) : " + $("div").find("em").length);
</script>
</html>

이것을 실행하면 첫번째와 두번째는 length가 0이 나오고

그다음의 alert창은 1과 2를 보여준다.
저작자 표시 비영리 변경 금지
filter, JQuery
트랙백0개 , 댓글0개
Server.UrlEncode와 UrlDecode를 사용할때 Encoding 문제 Programming/ASP.NET 2010/05/18 10:40
특정 한글 문자열을 db등에 저장을 할때, 

Server.UrlEncode를 사용하여 인코딩 한다.

하지만 인코딩 한 사이트는 UTF-8 기반으로 되어있는 사이트이고

그 값을 불러오는 사이트는 EUC-KR 기반으로 되어있는 사이트라면

Server.UrlDecode로 인코딩한 값을 불러와도 한글이 깨져버리는 현상이 있다.

그럴때, HttpUtility.UrlDecode("인코딩할 문자열",System.Text.Encoding.UTF8);

이 걸 사용하면 깨지지 않는 한글 문자열을 볼 수가 있다.
저작자 표시 비영리 변경 금지
ASP.NET, euc-kr, httputility, Server, urldecode, urlencode
트랙백0개 , 댓글0개
웹에서의 `충분히 빠르다`다의 의미 Programming/WEB 2010/04/23 18:17
  • 0.1 초 : 사용자 자신이 UI에서 보여주는 개체들을 직접 조작한다고 느낄 수 있는 최대 시간. 예를 ㄷ르면 사용자가 한 테이블에서 한 열(column)을 선택한 그 순간 부터 해당 열이 선택되ㅣ었다는 반응이 화면에 보여질 때까지 시간을 들 수 있다. 한 열을 기준으로 정렬을 한 경우에도 이 정도의 시간만 걸리면 이상적이라고 할 수 있을 것 같다. 이때 사용자는 자신이 직접 테이블의 내용을 정렬하고 있다는 느낌을 갖는다.
  • 1초 : 사용자가 컴퓨터가 작업을 끝낼 때까지 과도하게 기다릴 필요 없이 자연스럽게 명령을 내린다는 느낌을 가질 수 있는 최대 시간. 0.2에서 1.0초 정도 지연되는 경우 사용자는 무언가 오래 걸린다는 것을 인지하게 되며 명령에 대한 결과가 사용자의 동작에 대한 직접적인 결과라기 보다는 컴퓨터가 현재 명령을 처리하기위해 '일'을 하고 있다고 느낀다. 예를 들어 보자. 테이블의 내용을 선택한 열을 기준으로 정렬하는 작업이 0.1초 이내에 완료되지 않는 경우에도 왠만하면 1초 이내에는 완료가 되어야 한다. 그렇지 않으면 사용자는 UI가 굼뜨게 반응을 한다고 느끼게 되고 현재 하고자 하는 작업의 '흐름'이 깨지게 된다. 1초 이상 지연되는 경우에는 현재 작업을 수행하기 위해 컴퓨터가 작업을 하고 있다는 것을 커서의 모양을 바꾸는 등의 방법을 통해 사용자에게 알려주는 것이 좋다.
  • 10초 : 사용자가 현재의 작업에 열중할 수 있는 최대 시간. 10초 이상 소요되는 작업의 경우에는 현재까지 완료된 작업의 비율을 퍼센트로 표시를 해주어야 하며 눈에 잘 띄는 곳에 진행 중인 작업을 중지시킬 수 있는 방법 또한 제공해야 한다. 10초 이상 걸리는 작업이 완료된 후에는 작업하던 UI로 돌아왔을 때 어디에 무엇이 있었는지 다시 훑어봐야 할 것이라는 가정을 하는 것이 좋다. 10초 이상의 지연 시간은 사람이 일하는 도중에 현재 작업하던 일을 잠시 그만 두고 다른 일을 하는 등의 자연스럽게 쉬게 되는 경우에나 인정할 수 있다.

참조 : 초고속 웹사이트 구축(위키북스) 에서
영문 URL : http://www.useit.com/papers/responsetime.html
저작자 표시 비영리 변경 금지
웹, 초고속 웹 사이트 구축, 충분히 빠르다
트랙백0개 , 댓글0개
웹 성능을 위한 14가지 규칙 Programming/WEB 2010/04/23 17:34
  1. HTTP 요청을 줄여라
  2. 콘텐츠 전송 네트워크를 이용하라
  3. 헤더에 만료 기간을 추가하라
  4. Gzip 컴포넌트
  5. 스타일시트는 위에 넣어라
  6. 스크립트는 아래에 넣어라
  7. CSS Expression을 피하라
  8. 자바스크립트와 CSS를 외부 파일에 넣어라
  9. DNS 조회를 줄여라
  10. 자바스크립트를 최소화하라
  11. 리다이렉트를 피하라
  12. 중복되는 스크립트를 제거하라
  13. ETag를 설정하라
  14. 캐시를 지원하는 Ajax 만들기
저작자 표시 비영리 변경 금지
규칙, 성능, 웹
트랙백0개 , 댓글0개
C#의 Random 클래스 Programming/C# 2010/04/21 09:33
C#에서 간단히 랜덤값을 얻는 함수는 System.Random 클래스 이다.

이 클래스를 이용해서, Random한 값을 출력하는 문자열을 리턴하는 함수를 만들때 유의 할 점이 있다.

해당 함수에서 매번 Random 클래스를 인스턴스화 시켜서 사용하면, 같은 값을 리턴하게 된다.

// 랜덤 문자열 만드는 함수
public static string GetRandomCharacter(int length)
{
    Random random = new Random();
    
    StringBuilder sb = new StringBuilder();
    int value = 0;
    for (int i = 0; i < length; i++)
    {
do 
{
   value = random.Next(48, 90);
} while(value > 57 && value < 65);

sb.Append(Convert.ToChar(value));
    }

    return sb.ToString();
}
// 함수 호출
for (int i = 0; i < 20; i++)
{
    Response.Write(GetRandomCharacter(32)+"<br/>");
}

이러한 결과가 나온다.

// 랜덤 문자열 만드는 함수
public static string GetRandomCharacter(Random random, int length)
{          
    StringBuilder sb = new StringBuilder();
    int value = 0;
    for (int i = 0; i < length; i++)
    {
do 
{
    value = random.Next(48, 90);
} while(value > 57 && value < 65);
sb.Append(Convert.ToChar(value));
    }
    return sb.ToString();
}
// 함수 호출
Random random = new Random();
for (int i = 0; i < 20; i++)
{
    Response.Write(GetRandomCharacter(random, 32)+"<br/>");
}
이전의 코드와 달리 함수를 호출 하는 부분에서 Random 함수를 인스턴스화 시켜서 랜덤한 문자열을 출력하는 함수(GetRandomCharacter)함수를 호출한다.
이런식으로 어느정도는 랜덤한 값이 나온다.
저작자 표시 비영리 변경 금지
C#, Random, 문자열
트랙백0개 , 댓글0개
JQuery Ajax 호출시 한글 깨짐 현상 Programming/JQuery 2010/04/13 13:32
웹 페이지가 UTF-8로 셋팅이 되어 있으면 한글을 Ajax로 전송해도 깨지지 않지만,

웹 페이지가 EUC-KR 과 같은 형식으로 셋팅이 되어 있으면,

한글을 Ajax로 값을 넘길때, 한글이 깨져서 전송이 된다.

그럴 경우 간단히 해결하는 방법은

한글 데이터를 escape 함수로 인코딩하여 값을 넘긴다음

받은 곳에서.

인코딩 된 값을 디코딩 하여 저장하면 간단히 해결이 된다.
저작자 표시 비영리 변경 금지
AJAX, JQuery, UTF-8, 한글
트랙백0개 , 댓글0개
iframe 과 JQuery Programming/JQuery 2010/04/07 15:37
1. 부모 페이지에서 iframe 내부 DOM 셀렉터를 이용하여 엑세스 하기
- 부모페이지(parent.html)
<html>
 <head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_ChangeBackground").bind("click", function () {
$("#iframe").contents().find("#div_child").css("background-color","#ffff00");
});
});
</script>
 </head>
 <body>
<input id="btn_ChangeBackground" type="button" value="  Iframe 내부  배경 색상 변경" />
<iframe id="iframe" src="child.html" width="500" height="500"></iframe>
 </body>
</html>
- 자식 페이지(child.html)
<html>
 <head>
 </head>
 <body>
<div id="div_child" style="width:50px; height:30px">
iframe 내부 
</div>
 </body>
</html>

2. 자식 페이지에서 부포 페이지에 엑세스 하기
- 부모페이지(parent.html)
<html>
 <head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_ChangeBackground").bind("click", function () {
$("#iframe").contents().find("#div_child").css("background-color","#ffff00");
});
});
</script>
 </head>
 <body>
<input id="btn_ChangeBackground" type="button" value="  Iframe 내부  배경 색상 변경" />
<iframe id="iframe" src="child.html" width="500" height="500"></iframe>
 </body>
</html>
- 자식 페이지(child.html)
<html>
 <head>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
$(document).ready( function() {
$("#btn_ParentAccess").bind("click", function() { 
$(top.document).find("body").append("<div id=\"div_unable\" style=\"position:absolute;display:block;top:0px;left:0px;background-color:#ffffff;opacity:0.4;filter:alpha(opacity=40);width:100%;height:100%\"></div>");
});
});
  </script>
 </head>
 <body>
<input id="btn_ParentAccess" type="button" value="  부모 페이지  " />
 </body>
</html>


저작자 표시 비영리 변경 금지
iframe, JQuery
트랙백0개 , 댓글0개
JQuery 에서 Ajax 호출시 Cache 문제 Programming/JQuery 2010/04/07 14:01
JQuery 에서 Ajax로 페이지를 요청하고 그 페이지를 받아서 보여주는 경우에

가끔씩 캐싱처리가 되어, 새로 업데이트 된 내용이 나오지 않는 경우가 생긴다.

이럴 경우, Ajax를 호출 하기 전에 

$.ajaxSetup({cache:false});

이 코드를 삽입하여 Ajax 호출 시 cache 처리를 하는 것을 막아야 한다.

이것을 이용하게 되면 Ajax 로 요청 하는 페이지 URL 뒷 부분에 랜덤으로 값이 붙여

Cache 처리를 막는다.

가령

CommentArea.aspx 페이지를 Ajax로 요청을 하게 되면

실제적으로는

CommentArea.aspx?_=1270616257167   - 1번째
CommentArea.aspx?_=1270616273776   - 2번째

이렇게 호출을 한다.

저작자 표시 비영리 변경 금지
AJAX, Cache, JQuery, load
트랙백0개 , 댓글0개