"함수에 속한 지역변수를 다른 함수가 호출하게 하는 것이 가능하다. 이게 바로 클로저다."
라는 설명은 그냥 내부함수에서 외부함수의 변수를 접근할수 있다. 즉 scope, 유효범위에 대한것 같네요 ^^;
"클로져는 자신의 외부에 선언된 변수를 참조가 아닌, 복사본으로 가지는 함수"라고 봄이 맞지않나 싶네요 http://asrada2001.tistory.com/201 여기를 참고하시면 더 이해가 빠를듯합니다
주요이슈로는 HTML5 지원, CSS3 지원, 속도향상, 자바스크립트 엔진 교체 등이 있습니다.
자바스크립트의 엔진을 Webkit SunSpider 로 교체하여 획기적인 웹서핑 속도향상이 예상됩니다. IE8 버전에 비해서 여섯배정도 성능 향상이 있다고 나오는데요, 아마 정식 버전에서는 더 빨라질 것 같습니다. IE8도 이전 버전들에 비해서 정말 많은 렌더링 성능의 향상이 있었던 제품인데, IE9과 IE7, IE6 과는 어느정도 차이가 날까요.
그 외에도 당연히 지원되야 하는 것들을 지원한다고 광고하고 있습니다. 웹개발자 입장에서는 반갑기도 하면서 또 힘들기도 하네요. 국내에서 IE6만이라도 사라져준다면 감사하겠는데 말이죠.
올해 안에 정식버전이 출시되었으면 좋겠네요.
IE9는 비스타 SP2 이상에서 동작합니다. GPU를 사용하기 때문이라고 하네요.
프리뷰페이지는 크롬에서 모든 데모가 활성화 되고, IE8에서는 일부 데모만 확인할 수 있습니다.
200페이지도 안되지만 꽤나 유용한 책이다.
아래는 책에서 이야기 하고 있는 내용을 다시 정리할겸 요약한 내용이다.
1. HTTP 요청을 줄여라.
- 웹페이지에 접근하면 웹브라우저(익스플로러, 파이어폭스등) 에 보여지는 모든 화면들이 HTTP 요청에 의해서 나타나는 것이다. HTML 코드는 물론이고 이미지 하나하나 모두 HTTP 요청이다.
아래 이미지 에서 보이는 것 처럼 GET 방식을 통한 HTTP 요청에 대한 응답이다.
각 요청마다 짧게는 0.008초에서 길게는 3초까지의 요청에 대한 시간이 나타나고 있는데, HTTP 요청이 줄어들면 줄어든 만큼 당연히 이 시간도 짧아지기 때문에 웹페이지 로딩속도가 짧아진다.
2. CDN을 사용하라.
브라우저가 웹서버에 요청을 하게 되면 웹서버가 살아있는한 응답을 한다. 보통 서버가 위치한 곳과 응답을 요청한 곳과의 거리에 따라서 응답속도가 달라지는데 물론 이 응답속도는 이 둘의 위치가 가까울수록 더 빠르다. (A와 B가 어떤 대화를 하는데, 이 둘이 직접적으로 이야기는 못하고, 중간에 꼭 어떤 사람을 거쳐야 한다면, 다섯명을 거치는것이 빠를지, 열명을 거치는것이 빠를지 생각해보면 쉽겠다.)
A라는 업체의 서버가 서울에 있다. 이 서버에 대한 응답요청을 제주도 에서 하는것보다 서울에서 하는게 빠르다는거다.
그런데 이 A라는 업체가 제주에서 응답요청을 하는 사람에게 좀 더 빠른 응답속도를 제공하기 위해서 제주에 서버를 두는건 일종의 낭비이다. 그래서 이런 역할을 CDN이 해주는 것이다.
물론 거의 대부분이 유료이다.
3. 헤더에 만료기한을 추가해라
이는 곧 브라우저캐시를 사용하라는 말이다. 사용자가 웹페이지에 접근할 때마다 매번 이미지를 새로받고, HTML을 새로 받는다면 사용자에겐 시간이 낭비되고, 서비스 제공업자에겐 트래픽이 낭비된다. 그래서 사용자브라우저에게 이 페이지는 앞으로 한달간 변경이 되지 않을 테니 서버에서 새로 가져갈 필요가 없다고 알려주는 것이다.
이렇게 되면 HTTP요청이 줄기 때문에 응답시간이 절약되고, 여기에 서버에서 데이터가 전송되지 않기 때문에 트래픽이 줄어든다. 사용자는 온라인으로 데이터를 가져오지 않고, 자신의 컴퓨터에서 가져오기 때문에 서비스이용속도가 올라간다.
5. 스타일시트의 위치
스타일 시트는 head 태그 사이에 넣어라. 다른곳에 스타일시트가 위치할 경우 페이지 로딩이 점진적이지 않고 멈춘 후 한꺼번에 보여진다.
6. 스크립트는 아래에 넣어라
페이지 하단에 스크립트를 위치시키는 것이 웹페이지 로딩에 빠르다고 한다.
하지만 난 head 사이에 넣고 있다.
7. CSS Expression을 피하라.
background-color: expression( (new Date()).getHours()%2 ? "#FFF" : "#000" );
IE에서는 위와같은 표현식이 가능하다. 하지만 쓰지말라고 한다. 어차피 쓸일이 없을것 같다.
8. 자바스크립트와 스타일시트는 외부파일로 빼라.
9. DNS조회를 줄여라.
결국 외부도메인 참조하는 것을 줄이라는것. keep-alive를 사용한 적절한 캐시도 좋다.
10. 자바스크립트를 최소화 해라
압축등을 사용해서 자바스크립트의 용량을 줄여라. 물론 CSS도 줄일수 있으면 줄여라.
11. 리다이렉션을 줄여라
리다이렉션할 주소 끝에 "/" 슬래시를 붙이지 않는다면 슬래시(/)을 붙여서 리다이렉트가 발생한다. 그 외에도 document.location 과 같은 자바스크립트 코드의 사용을 줄여라.
12. 중복스크립트를 없애라.
자바스크립의 코드의 중복을 제거하라. 모듈화 하여 적절하게 사용하라. 프로그램의 크기가 커져서 관리가 어려울 경우 별도의 hash 함수를 만들어서 스크립트를 관리하라. <- php 창시자인 rasmus 는 html코드를 php가 생성하는 것에 대해 부정적이었다. 어느 것이 좀 더 효율적인지는 직접 체크해봐야 할듯하다.
13. ETag를 설정하라.(또는 삭제하라.)
ETag는 웹서버와 브라우저간의 캐시유효성을 체크하는 메커니즘이다. 대부분은 기본설정을 이용하면 되지만 여러대의 웹서버를 가진 웹어플리케이션의 경우는 기본설정이 성능저하의 요인이 된다.
설정을 변경하든가 삭제하라. 아파치의 경우는 설정파일에 FileETag none 한줄을 추가해주면 된다고 한다.
4년~5 년 전만 해도, 게시판에 글을 쓸 때 폰트의 크기를 키우거나, 색상을 변경하고 싶으면, 사용자가 직접 HTML 태그를 사용해서 글을 작성해야 했습니다. 그나마도 게시판에서 HTML을 지원해 줘야 가능한 일이었습니다. 그러다가 점점 기술이 발전해 나가고, 사용자의 편의를 신경 쓰게 되니, ActiveX를 사용한 웹게시판이 포털사이트를 중심으로 등장했습니다. 귀여운 아이콘도 넣을 수 있도록 말이죠. 하지만 최근 반ActiveX 지향적인 바람이 불면서, MS IE에서만 동작하는 이러한 게시판에 대한 원성이 높아지고 있습니다. ActiveX를 도입했던 많은 곳에서 이제 ActiveX 를 제거하고, javascript를 사용한 에디터 게시판으로 전향했습니다. 별도의 프로그램을 설치하지 않아도 되는 rich 게시판은 사용자에게 유용하게 사용될 수 있습니다. 물론 이전에도 이런 기술은 존재 하였고, 몇몇 곳에서 이미 도입하여 사용하고 있었지만, 조명을 받기 시작한 건 얼마 되지 않았습니다.
본 포스팅에서 크로스브라우징이 가능한 RICH Editor를 제작해보도록 하겠습니다.
보통 게시판을 제작할 때, 글 내용을 입력하는 부분은 <textarea> 라는 태그를 사용합니다. 하지만 <textarea>는 text 외에 어떤 html도 입력할 수 없고, 입력하더라도 단지 입력만 될 뿐 외관상 아무런 영향을 미치지 않습니다. 그래서 이 부분은 frame 의 designMode 라는 DOM을 사용하여 처리하게 됩니다. 그럼 코드를 작성해 보도록 하겠습니다.
<html>
<head>
<title>simple rich editor</title>
</head>
<body>
<iframeid="richEditor"></iframe>
</body>
</html>
Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.
페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.
이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?
크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.
function load()
{
if (document.getElementById('richEditor').contentDocument)
doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.
댓글을 달아 주세요