728x90

관련글 : 자바스크립트(1-1) - 클로저(closure) 에 대한 이해

 
더 많은 예제코드가 필요하다면 아래 링크를 참조하자
(링크 : http://www.javascriptkit.com/javatutors/closures2.shtml)


클로저에 대한 설명은 어렵다. 어렵기 때문에 명확하게 이건 이거다 라고 이야기 하기 힘들다. 이야기 한다 해도 이해하기 위해서는 수많은 배경지식이 필요하다. 아무리 설명을 해봐야 사람들이 이미 알고 있던 부분들이 모두 다르기 때문에 설득을 해야 하는 수준이다. 인터넷에서 클로저에 대한 글들을 찾아봐도 모두 마찬가지이다.

모두가 이건 이거다 라고 설명을 하고 있지만 이해는 쉽지 않다. 자바스크립트에 이 클로저라는 녀석은 C언어에서 포인터를 배울때 만큼이나 날 혼란스럽게 한다. 이건가 싶으면 저거고, 저건가 싶으면 또 이것인 클로저를 잊지 않기 위해서라도 잠시 정리를 해둔다.

짧으면서도 설명하기 쉬운 아래 코드조각을 보자.


sayAlice() 를 실행하고, 리턴받은 함수를 또 바로 실행하고 있다. Step by Step 으로 확인해보자.

 
 

아래 단계를 따라가면서 조사식의 saylAlert 과 alice가 어떻게 변하는지 살펴보자. 

1. sayAlice() 실행
2. sayAlert 변수에 함수 할당 [function () { alert(alice); } ]
3. alice 변수에 문자열 할당 [Hello Alice]
4. sayAlert 함수 실행
5. alert(alice) 구문 실행
6. Hello Alice 출력


4번 단계가 실행 될 때, 내부의 alice 변수를 참조한다.
sayAlert 변수에 할당된 익명 함수가 선언된 다음에서야 alice 변수에 문자열이 할당 되었다. 이건 함수 내부에 선언된 함수 내부에서 부모함수(?)의 변수에 접근(참조) 할 수 있다는 것을 의미한다. 그리고 이 부분이 클로저가 만들어졌다고 볼 수 있다. 그리고 함수가 끝나서 지역변수들은 사라져야 함에도 불구하고 alice 지역변수는 계속하여 살아있는다. 클로저 때문이다.

좀 더 긴 예제인데, 간략하게 줄였다. 브라우저에서 실행하여 Step by Step 으로 보자.





1. newClosure(40); 을 호출함
2. num 지역변수에 40을 할당
3. newClosure() 종료로 함수의 생명주기는 끝나고, 리턴된 익명함수를 closure1 변수에 저장
4. 리턴받은 closure1(5) 함수를 실행
5. 익명함수이 진입 전 이므로 num 값 확인 불가
6. 익명함수에 진입하여 num 값이 생성되어 있음을 확인
7.8.9. 인자값 5를 더함으로 해서 num 값이 45가 됨을 확인


여기서 6번이 중요포인트인데, 익명함수에 진입 할 때, num의 값이 40으로 확인 할 수 있다는 것이다. 기본적으로 num은 newClosure의 지역변수 이기 때문에 함수의 생명주기가 끝남과 동시에 소멸되어야 하는 변수이다. 하지만 클로저가 생성됨으로 인해서 이 변수는 그대로 살아있게 된다. 불필요한 메모리 릭을 방지하기 위하여, 이 변수를 사용한 뒤에 더이상 필요 없다는 판단이 들면 alert('num: ' + num); 문장 뒤에 num = null; 을 추가 시켜주자. 

이런 부분들은 굳이 몰라도 충분히 프론트 개발이 가능하다. 그리고 이해하지 못해도 그냥 쓰면 된다. 하지만 우리가 클로저를 잘 이해해야 하는 이유는 이 클로저가 생성될 때, 메모리 릭이라는 무시무시한 사이드이펙트를 데리고 오기 때문이다.

IE7 이하의 브라우저가 아직도 세상에 존재 하는한, 우리는 메모리릭을 신경쓰지 않을 수 없다. 이유를 알 수 없는 상태에서 브라우저가 자주 죽는다면 메모리릭을 의심해 봐야 한다. 

위의 예제에서 굳이 이야기를 해보자면, 변수 alice를 전부 사용한 뒤에 alice = null 로 초기화를 시켜주도록 하자. 그리고 jquery 를 사용중이라면 오브젝트에 접근 할 때에는 $().data() 메소드를 사용하자.

Posted by onionmen
728x90

인터넷익스플로러가 7 버전 까지 나왔을 때, 파이어폭스는 한창 강세를 보이고 있었다. 파이어폭스의 점유율을 의식하여 부랴부랴 7 버전을 내 놓았으니 말이다.

언제부터인가 IE6를 버리고 파이어폭스를 쓰기 시작했는데, 그 때가 아마 본격적으로 웹개발을 시작하고 얼마 안돼서였을거다. 당시 파이어폭스의 확장기능에 한창 매료 되어서 헤어나올 수가 없었다. 그중 단연 최고는 파이어버그 라는 개발자도구 였다.

원하는 곳의 DOM 구조를 바로 파악할 수 있고, 파일을 변경할 필요 없이 실시간으로 수정하며 적용된 모습을 볼 수 있었다. CSS 수정, 적용이 바로바로 가능했고, 페이지 로딩속도 및 HTTP status 코드는 물론이고, 자바스크립트 디버깅까지 지원하여 이게 없으면 개발이 불가능할 정도였다.

파이어폭스가 버전업데이트가 되어서 파이어버그가 동작하지 않으면 파이어폭스 업데이트를 미룰 정도였다. (나말고도 많은 사람들이 그랬을거다) 1.4 버전인지 1.5 버전까지 사용하고, 요즘엔 잘 사용하지 않고 있어서 어떻게 발전 하였는지 잘 모르겠다. 

파이어폭스에서는 제대로 개발을 할 수 없는 환경으로 터전을 옮기고 나서 IE 에서 돌아가는 여러가지 개발자도구를 찾아서 사용해보았다. 파이어버그에 비하면 턱없이 부족한 툴 들이었지만, 어쩔 수 없이 불편함을 감수하고 사용했다.

그러다가 IE8 버전이 나오고, 새로이 추가된 개발자 도구 라는 것을 보고 커다란 발전에 기쁨의 눈물을 흘렸었다.

Dom 셀렉터, CSS 선택수정, 중단점을 삽입할 수 있는 자바스크립트 디버깅, 콘솔창 추가로 개발환경이 무척이나 편리해졌다. 이는 IE9으로 오면서 더욱 강력해 졌는데, 이에 대해서 소개를 해볼까 한다. (자바스크립트와 콘솔 위주로 감)


콘솔창

인터넷익스플로러를 실행하고 F12 를 누르면 아래와 같은 개발자 도구가 열린다.


왼쪽 탭에는 HTML, CSS, 콘솔, 스크립트 등등이 있고, 이 선택에 따라서 오른쪽 탭 영역의 UI가 변경된다. 콘솔탭을 선택하면 빈 화면이 덩그러니 나타나는데, 맨 하단에 보면 뭔가를 입력할 수 있는 입력창이 존재한다.


여긴 자바스크립트나 기타 DOM객체를 직접 입력하여 확인해 볼 수 있는 공간이다. 실제로 사이트가 전부 로드된 상태에서 콘솔창에 관련 객체 이름을 써 넣기만 하면 그에 따른 정보가 출력된다.


테스트 페이지로 만든 곳의 this 객체 정보를 호출해봤다. 단지 this 라고만 입력했을 뿐인데, 현재 document의 this객체에 대한 정보가 나타난다.

테스트 페이지에 아래와 같은 HTML 태그를 추가했다.
그리고 콘솔창에서 위 엘리먼트에 대한 객체 정보를 호출해보았다.


표준 HTML DOM method인 getElementById() 를 사용하여 객체를 호출하거나, 그냥 ID 값만을 입력하여 객체에 대한 정보를 확인할 수 있다.

이 콘솔창에서는 다른 콘솔창과 마찬가지로 페이지에 설정된 자바스크립트를 실행시킬 수 있는데, 방법은 매우 간단하다.

 
위와 같은 자바스크립트 코드를 추가하고, 콘솔창에 함수 이름을 입력하면 바로 실행이 된다.


여기 콘솔창에서 사용할 수 있는 여러가지 내장함수들이 존재 하는데, 이는 IE8은 물론이고 웹킷, 모질라계열에서도 비슷한 동작을 한다.

 window.console.log  console.log("로깅용 메시지")  로그 : 로깅용 메시지
 window.console.error  console.error("에러 메시지")  
 : 에러 메시지
 window.console.info  console.info("정보 메시지")  
 : 정보 메시지
 window.console.warn  console.warn("경고 메시지")  
 : 경고 메시지
 window.console.dir  console.dir(오브젝트)  오브젝트 내용이 출력
 window.console.assert  console.assert(식, "메시지")  식이 틀릴 경우 메시지가 출력
 window.console.clear  console.clear()  콘솔창의 내용을 모두 삭제함

콘솔창에서 사용할 수 있는 내장함수는 위와 같고, 각각 실행 하였을 때 나타나는 메시지 이다. 실제로 아래와 같은 코드를 작성하여 테스트를 해봤다.



결과창을 보면, 우리가 예상한 결과와 동일하게 출력된 모습을 볼 수 있다. console, 또는 window.console 이라고 입력하면 console에 포함된 메소드들이 출력되니 직접 입력해서 확인 해보자.

** 참고로 console.dir 은 IE9 에서 지원하는 신규메소드로 IE8에서 동작하지 않는다. console.dir(object); 로 실행 하며, 객체의 내용을 좀 더 상세하기 표현해 준다.

기존에 alert 과 document.write, iframe 등으로 디버깅을 하던 불편함은 콘솔창을 사용하면 말끔히 해결된다. 초반엔 익숙하지 않기 때문에 어색하겠지만 지속적으로 사용해보면 예전으로 다시 돌아가기 힘들어질 것이다. 

사용하지 않고 있던 사람들이라면 이번 기회에 한번 사용해보자. 이러한 콘솔창은 IE8 이상, 크롬, 사파리, 파이어폭스 에서 기본적으로 지원하고 있다.


2부. IE9으로 디버깅 하기 (2) - 자바스크립트 디버깅

Posted by onionmen
728x90

클로저는 실무에서 자바스크립트로 개발을 하다보면 자신도 모르게 사용했던 개념이다. 클로저는 몰라도 예제코드를 보면 "아하, 그게 클로저야?" 라고 되묻는 사람들이 꽤 많을 것이다.

아래 코드를 보자.

var closureTest = function() {
	var closureVar = "closure test";

	return function() {
		alert(closureVar);
	}
}

closureTest 라는 함수는 closure test 라는 문자열을 출력하는 익명함수를 리턴한다. 그리고 위 코드를 수행하면 정상적으로 closure test 메시지가 alert창으로 뜬다.

위 코드가 왜 이상한지 모르겠는 사람은 클로저에 대한 이해가 충분하거나, 아니면 자바스크립트에 대한 이해가 불충분한 사람일 것이다.

기본적으로 closureVar 변수는 closureTest 에 속한 지역변수 이기 때문에 다른 외부함수에서 호출하는 것이 불가능하다. 변수를 호출하기 위한 방법으로는 지역변수로 선언된 closureVar 변수를 전역변수로 바꿔 선언하는 방법이 있다. 

그런데 자바스크립트에서는 굳이 이렇게 하지 않아도, 함수에 속한 지역변수를 다른 함수가 호출하게 하는 것이 가능하다. 이게 바로 클로저다. 좀 더 정확하게 이야기 하면, 클로저란 자신이 생성된 함수의 context에 직접 접근(참조) 할 수 있는 것이다.

위 코드를 좀 더 쉽게 풀어보면 아래와 같다.

var closureTest = function() {
	var closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}

하지만 위 코드는 제대로 동작을 하지 않는다. closureVar 변수가 closureTest 함수에 선언되었기 때문에, closureTest2 함수에서 접근할 수 없기 때문이다. 

위 코드를 동작시키기 위해선 closureVar 변수를 전역변수로 새로 선언해야 한다.

var closureVar = "";
var closureTest = function() {
	closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}
하지만 변수가 많아진다면 이 모든 변수를 전역변수로 할당해야 하는데, 코드도 어려워지고(지저분해지고) 개발자도 힘이 든다. 변수를 모두 전역변수로 선언하지 말고, 클로저를 잘 이해하여 써먹어보자.


Posted by onionmen
728x90

오래 전 한 지인분께서 미국에 다녀오시면서 이야기를 하나 해주셨습니다.

담배를 피우고 싶은데, 흡연장소로 마땅한 곳이 없었다고 합니다. 한참을 그렇게 둘러보시다가 Smoking Free 라는 구역을 발견하고는 옳다구나 뛰어가 담배를 태우셨다고 합니다. 한참 맛있게 담배 맛을 보고 있는데, 저 멀리서 경찰이 냅다 다가오더니만 티켓을 끊으며 벌금을 요구했다고 합니다. 왜 그런지 이야기를 해보니 이곳은 자유롭게 담배를 피우라는 곳이 아니라, 담배로부터 자유로운 곳, 그러니까 즉, 금연구역 이라는 뜻이었죠.

 

다음(Daum) OpenAPI를 이용하여 업무를 진행할 일이 있었습니다. API들의 명세를 보려고 오랜만에 다음 개발자 네트워크 (dna.daum.net) 에 접속하였는데, "나만의 YouFREE 를 공개합니다." 라는 배너가 보이네요.  YouFREE하니 Smoking Free 이야기가 생각이 납니다.


유프리 공모전 배너


YouFREE는 그러니까 일종의 개인정보컨텐츠 저장함 솔루션 입니다.

 

정확하게 이야기 하자면 파일 저장함노트소프트웨어 프로그램, 정보검색위젯북마크 등의 개인 컴퓨팅에 필요한 거의 모든 정보를 저장, 관리해주는 통합 솔루션 입니다. 그리고 이런 데이터들을 USB메모리스틱 등에 담아서 들고 다닐 수 있어서, 작업환경을 축소하여 담고 다닐 수 있습니다.

 

최근 온라인 서비스들이 많이 등장하고 있습니다. 이런 온라인 서비스들의 최대 장점은, 인터넷이 연결된 상태에서는 언제 어디서든 내 정보를 동기화 시킬 수 있다는 점 일텐데요, 요즘엔 온라인과 오프라인이 연계된 서비스들이 속속 등장하고 있습니다. 구글의 기어스(Gears)를 이용한 온라인과 오프라인 동기화를 가장 큰 예로 들 수 있죠. 이런 서비스가 나온다는 것이, 온라인의 서비스들이 어딘지 모르게 2% 부족하다. 라는 것을 반증하는 셈이겠죠.

 

YouFREE 오프라인 서비스의 가장 큰 단점인 휴대성을 보완하면서, 동시에 온라인 서비스의 가장 큰 장점인 정보의 동기화를 유지한 사용자 편의성을 극대화 시킨 솔루션이 아닐까 합니다.

 

실제로 사용자들은 메모리스틱 등에 워드나 한글 파일 등을 넣고 다니지만, 그 파일을 읽어오기 위해서는 사용하기 위한 PC에 오피스나 한글이 설치되어 있어야 합니다. (물론 요즘은 온라인에서 읽을 수도 있습니다만)

또한 북마크를 유지하기 위해서 xMarks 등의 별도의 브라우져 플러그인을 설치하거나 딜리셔스, 구글툴바 등의 온라인 저장장소를 활용하여 북마크의 동기를 유지합니다.

또한 지난 검색 결과를 얻기 위해서 구글이나 네이버 등의 서비스에 가입하여 자신의 검색기록 히스토리를 남기기도 합니다

 

이 모든 것이 현대인들이 컴퓨터를 사용하는 방식과 직접적인 관계를 맺고 있습니다.
YouFREE(
이하 유프리) 는 이런점들을 잘 집어내서
하나의 오프라인 솔루션으로 통합해냈습니다.

아래 이미지는 유프리에서 지원하고 있는 서비스의 목록들 입니다.


유프리는 PHP기반의 웹서비스 이지만, 아파치 웹서버를 내장하여 별도의 서버구성 없이도 하나의 독립적인 오프라인 클라이언트 프로그램으로 동작하도록 설계, 제작 되었습니다. 여기 자바스크립트를 적절히 사용하여 사용자 편의성을 향상시켰습니다. 때문에 유프리를 제대로 사용하기 위해서는 자바스크립트를 잘 지원하고, 자바스크립트의 해석이 빠른 IE7이상 또는 파이어폭스3, 크롬4, 오페라, 사파리4의 사용을 추천합니다.


그럼 유프리에서 지원하고 있는 서비스들을 하나하나 알아볼까요?

 

1. 컨텐츠 서비스

 


컴퓨터에서 사용되는 컨텐츠들, 그러니까 문서, 음악, 사진 등 을 쉽게 저장하고 관리할 수 있는 서비스 입니다.

 

 

1.        폴더를 등록하여 파일을 복사해 넣을 수도 있다.

2.        Text 파일의 경우 새로 만드는 것도 가능하다.

3.        컨텐츠 검색을 지원하여 등록한 컨텐츠들을 쉽게 찾아볼 수 있다.

4.        컨텐츠 사용 이력을 쉽게 조회할 수 있다.

5.        이미 생성된 폴더 등을 등록하여 사용할 수 있다.

 

유프리 자체에서 폴더를 만들고, 파일을 관리할 수 있습니다. 기존 탐색기와 별다를 바 없어 보이지만 다른 곳에서 컴퓨터를 사용 할 때에도 같은 화면을 보여주기 때문에, 사용자는 굉장히 익숙한 느낌으로, 이질감 없이 프로그램을 사용할 수 있습니다.

 

또한 컨텐츠를 검색하는데 있어서 발군의 검색속도를 보여주며, 중요한 것은 내가 사용했던 컨텐츠의 사용이력을 보여주어서 어떤 파일들을 열어봤는지 한눈에 파악할 수 있다는 점 입니다. 여러 개의 문서 파일을 한번에 작업해야 할 때, 이미 작업한 문서에 대한 중복 작업을 막을 수 있으며, 동일 문서의 중복 실행을 피할 수 있습니다.

 

마지막으로 이미 생성된 폴더를 유프리로 가져올 수 있는데, 이를 마운트 시킨다고 합니다. 마운트 보다는 붙이기 등의 용어가 좀 더 친근할 듯싶기도 하지만, 마운트 로도 의미전달에는 문제가 없습니다.

 

윈도우 7 에는 탐색기에 라이브러리 라는 메뉴가 신설되었습니다. 이 개념과 비슷합니다. 라이브러리 폴더에 자신의 임의 폴더를 등록함으로서 한번에 쉽게 접근이 가능하도록 만든 바로열기 기능 입니다. 굳이 윈도우 XP에서 비교하자면 바로가기아이콘 과 비슷하다고 할 수 있겠지요.




내 하드의 폴더를 마운트 시키는 화면과 마운트된 모습.

그냥 탐색기로 USB메모리스틱 등에 파일을 담아서 다녀도 큰 문제는 없지만, 이런 관리 프로그램으로 파일컨텐츠 들을 관리하는것도 익숙해지면 정말 편리해질 듯 합니다. 다만 마운트를 시킬 경우 이동시 제대로 동작하지않을 가능성이 있기 때문에 유의해서 사용해야 합니다.

 

 

2. 노트 서비스



노트 서비스는 유프리 서비스 중에서 가장 유용하게 사용할 수 있는 서비스 입니다.

메모장보다 다양한 기능을 지원하면서 문서 관리 기능까지 제공하고, 더불어 휴대성을 보장합니다. 그리고 html로의 저장 기능도 제공해 주어 별도의 문서 편집기 없이도 훌륭한 워드프로세서로의 기능을 합니다.

 

이 노트 서비스는 온라인 웹서비스인 구글노트(링크)나 스프링노트(링크)와 비슷한 서비스 입니다. 구글노트나 스프링노트도 정말 좋은 서비스들이지만 오프라인과의 연계성에서 조금 부족한 부분이 있는 것도 사실 입니다. 이런 점을 유프리 노트서비스가 채워줄 수 있습니다.

 


노트 서비스를 처음 실행하여 보면 미리 생성되어 있는 노트 목록이 분류와 함께 제공되어 보여 집니다.

 

빨간색 테두리 안에 있는 기능들은 노트를 사용하는데 있어서 필수적인 기능들을 제공합니다.

초록색 테두리는 노트의 그룹과 각 그룹에 속한 노트 목록을 보여주고 있습니다.

파란색 테두리는 노트의 탭으로. 노트를 열면 새창으로 뜨지않고, 탭으로 생성되어 보여줍니다.

조금 진한 빨간색 테두리는 검색 및 즐겨찾기 기능을 제공하고 있습니다.

 

빨간색 테두리 안에는 각각 노트의 생성, 노트 그룹생성, 노트 삭제, 노트 이름변경, 부가기능, 휴지통보기의 기능들로 이루어져 있습니다.

 

다음은 그룹을 만들고, 노트를 만들어서 편집하는 화면입니다.

노트의 에디터는 웹에서 많이 사용하는 위지윅에디터로 복잡한 문서가 아니라면 문서 작성에 큰 무리가 없습니다. 저장을 누르게 되면 유프리 자체에 노트 내용이 저장되고, 파일로 저장하게 되면 html 파일로 익스포트 되어 내 컨텐츠에 저장이 됩니다.

 

저장된 html 파일만 따로 빼내어 공유할 수도 있습니다.


아까 조금 진한 붉은 테두리에 있던 숨겨진 메뉴를 호출한 모습입니다.

노트가 많아질 경우, 예전에 썼던 노트를 찾기가 매우 힘들어질 수 있습니다. 그 때 노트 검색을 이용하면 쉽게 노트를 찾을 수 있습니다.

 

키워드만으로도 검색이 가능하고, 노트 작성 중 등록한 태그를 추출하여 검색이 가능합니다. 그리고 노트 목록을 스크랩하여 즐겨찾기 목록으로 만드는 것도 가능합니다.

 

기본적으로 사용하는 워드 프로그램의 일반적인 기능들은 거의 담고 있기 때문에, 이것만으로도 사용하시는데 불편함은 없으실 것입니다. 작은 불편사항들은 검색이나, 휴대성으로 상쇄시킬 수 있을 듯 합니다.

Posted by onionmen
728x90

웹 사이트 최적화 기법: UI 개발자를 위한 필수...
카테고리 컴퓨터/IT
지은이 스티브 사우더스 (아이티씨, 2008년)
상세보기

200페이지도 안되지만 꽤나 유용한 책이다.
아래는 책에서 이야기 하고 있는 내용을 다시 정리할겸 요약한 내용이다.

1. HTTP 요청을 줄여라.
- 웹페이지에 접근하면 웹브라우저(익스플로러, 파이어폭스등) 에 보여지는 모든 화면들이 HTTP 요청에 의해서 나타나는 것이다. HTML 코드는 물론이고 이미지 하나하나 모두 HTTP 요청이다.
아래 이미지 에서 보이는 것 처럼 GET 방식을 통한 HTTP 요청에 대한 응답이다.

각 요청마다 짧게는 0.008초에서 길게는 3초까지의 요청에 대한 시간이 나타나고 있는데, HTTP 요청이 줄어들면 줄어든 만큼 당연히 이 시간도 짧아지기 때문에 웹페이지 로딩속도가 짧아진다.

2. CDN을 사용하라.
브라우저가 웹서버에 요청을 하게 되면 웹서버가 살아있는한 응답을 한다. 보통 서버가 위치한 곳과 응답을 요청한 곳과의 거리에 따라서 응답속도가 달라지는데 물론 이 응답속도는 이 둘의 위치가 가까울수록 더 빠르다. (A와 B가 어떤 대화를 하는데, 이 둘이 직접적으로 이야기는 못하고, 중간에 꼭 어떤 사람을 거쳐야 한다면, 다섯명을 거치는것이 빠를지, 열명을 거치는것이 빠를지 생각해보면 쉽겠다.)

A라는 업체의 서버가 서울에 있다. 이 서버에 대한 응답요청을 제주도 에서 하는것보다 서울에서 하는게 빠르다는거다.
그런데 이 A라는 업체가 제주에서 응답요청을 하는 사람에게 좀 더 빠른 응답속도를 제공하기 위해서 제주에 서버를 두는건 일종의 낭비이다. 그래서 이런 역할을 CDN이 해주는 것이다.

물론 거의 대부분이 유료이다.

3. 헤더에 만료기한을 추가해라
이는 곧 브라우저캐시를 사용하라는 말이다. 사용자가 웹페이지에 접근할 때마다 매번 이미지를 새로받고, HTML을 새로 받는다면 사용자에겐 시간이 낭비되고, 서비스 제공업자에겐 트래픽이 낭비된다. 그래서 사용자브라우저에게 이 페이지는 앞으로 한달간 변경이 되지 않을 테니 서버에서 새로 가져갈 필요가 없다고 알려주는 것이다.
이렇게 되면 HTTP요청이 줄기 때문에 응답시간이 절약되고, 여기에 서버에서 데이터가 전송되지 않기 때문에 트래픽이 줄어든다. 사용자는 온라인으로 데이터를 가져오지 않고, 자신의 컴퓨터에서 가져오기 때문에 서비스이용속도가 올라간다.

4. 데이터를 압축해라.
gzip 컴포넌트를 사용하여 데이터를 압축한다.
참고자료 링크

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 한줄을 추가해주면 된다고 한다.


위 13가지 내용들은 파이어폭스 플러그인인 YSlow를 사용하여 체크해볼 수 있다.있다.
Posted by onionmen
728x90
2007/12/09 - [Etc..] - Javascript를 사용한 rich Editor.

이전에 우리는 아래와 같은 화면을 보여주는 코드를 작성한 적이 있습니다.
사용자 삽입 이미지

이제 여기에 좀 더 기능을 추가해 보도록 하겠습니다.

우선 가장 기본적으로, 굵게, 기울임체, 밑줄긋기 의 세 버튼을 추가해보겠습니다.

<input type="button" value="기울임" onClick="doCommand('italic');"/>
<input type="button" value="밑줄" onClick="doCommand('underline');"/>

위와 같은 코드를 추가해서 효과를 얻을 수 있습니다.

doCommand 메소드안에 인자값으로 italic 과 underline 을 주었습니다.
인자값의 자세한 내용은 다음 링크를 참조 하세요.


사용자 삽입 이미지

효과가 적용되는것을 확인할 수 있습니다.
이제 우리가 원하는 대로 조금씩 가까워 지고 있습니다.

이제 원하는 글씨체를 넣어볼 차례입니다.
웹페이지를 제작하면서 글꼴은 화면을 보는 사람 입장에서 생각해야 합니다. 자신의 컴퓨터에 상용글꼴들이 설치되어 있다고 상용글꼴을 사용하면, 정작 그것을 읽는 사용자 입장에선 기본폰트로 보여지기 때문에 디자인에 영향을 줄 수 있습니다. 이는 지금 이 강좌에서도 동일하게 적용됩니다.

그렇기 때문에 우리는 윈도우 기본 글꼴을 사용해서 코드를 작성할 것 입니다. 기본글꼴의 수만해도 굉장히 많이 있지요. 우선은 간단하게 굴림체와 바탕체와 궁서체만 등록을 해 보겠습니다.

<input type="button" value="바탕" onClick="doCommand('fontname','바탕');"/>
<input type="button" value="굴림" onClick="doCommand('fontname','굴림');"/>
<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위와 같은 코드를 넣음으로 해서 다음과 같은 결과를 얻을 수 있습니다.

사용자 삽입 이미지

글꼴이 추가되면 계속 버튼을 추가해서 넣어야 합니다. 글꼴을 20개 넣는다면, 너무 길어져서 디자인을 제대로 할 수 없습니다.

우리는 <select> 라는 태그를 사용해서 이것을 해결할 수 있습니다.

<select>
    <option>바탕</option>
    <option>굴림</option>
    <option>궁서</option>
</select>

다음과 같은 공간활용이 가능한 결과물을 얻었습니다.

사용자 삽입 이미지


이제 셀렉트 박스(SELECT BOX) 의 선택값으로 글자체를 바꾸는 코드를 넣어보도록 합시다.

<select onChange="doCommand('fontname',this.value);">
    <option value="'Batang'">바탕</option>
    <option value="'Gulim'">굴림</option>
    <option value="'Dotum'">돋움</option>
</select>

화면은 동일하지만 내용물이 좀 바뀌었습니다. 버튼의 경우 클릭 이벤트를 받아야했기 때문에 onClick 이벤트를 사용했는데, 셀렉트박스의 경우 내용이 바뀌는 경우를 받아야 하기 때문에 onChange 이벤트를 사용했습니다. doCommand 의 경우 이번엔 인자값이 두개인데, 하나는 폰트를 바꾼다고 알려주는 것이고, 두번째는 어떤 폰트로 바꿀지 알려주는 것 입니다. this.value로 현재 선택된 value 값을 인자값으로 넘겨줄 수 있도록 합니다.

<select onChange="doCommand('fontname',this.value); this.selectedIndex=0;">
    <option>글자체</option>
    <option value="'Batang', 'Serif'">바탕</option>                                                 <option value="'BatangChe', ' Serif'">바탕체</option>                                   
    <option value="'Gulim', 'Sans-serif'">굴림</option>                                   
    <option value="'GulimChe', 'Sans-serif'">굴림체</option>                       
    <option value="'Dotum', 'Sans-serif'">돋움</option>                           
    <option value="'DotumChe', 'Sans-serif'">돋움체</option>               
</select>

코드를 넣고 각각의 option에 style="font-family: 'Batang';" 과 같은 스타일을 주어 직접 보여지는 보습의 폰트를 변경 할 수 도 있습니다.

사용자 삽입 이미지

동일한 방법으로 크기에 대한 코드를 넣습니다.

사용자 삽입 이미지

이제 얼추 기능이 추가된 것 같습니다.
좀 더 세심한 기능을 원하시는 분은 위 링크에 들어가셔서 기능을 연구해 보세요. Tistory의 편집창도 직접 만드실 수 있을 거예요.
Posted by onionmen
728x90

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>

        <iframe id="richEditor"></iframe>

    </body>

</html>

Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.

<head>

<title>simple rich editor</title>

<script langauge="javascript">

function load()

{

    document.frames['richEditor'].document. designMode = "On";

    }

</script>

</head>

<body onload="load();">

    <iframe id="richEditor"></iframe>

</body>

페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.

이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?

크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.

function load()

{

    if (document.getElementById('richEditor').contentDocument)

    {

        return document.getElementById('richEditor').contentDocument.designMode = "On";

    }

    else

    {

        return document.frames['richEditor'].document.designMode = "On";

    }

}

나머지 부분은 그대로 놔두고, 자바스크립트 부분만 바꾼 모습입니다. 이러면 IE와 FF 모두 잘 동작하는 모습을 볼 수 있습니다. 코드가 지저분해 보이니 리펙토링을 조금 해보면.

function load()

{

    getIFrameID("richEditor").designMode = "On";

}

function getIFrameID(aID)

{

    if (document.getElementById(aID).contentDocument)

    {

        return document.getElementById(aID).contentDocument;

    }

    else

    {

        return document.frames[aID].document;

    }

}

이렇게 해서 조금은 깔끔한 코드가 완성되었습니다.....만, 오히려 더 지저분해진 느낌입니다. 그냥 재사용성을 위함 이라고 해두죠. ^^;;;

이제 글씨들의 스타일을 변경할 수 있는 버튼들을 만들어 넣을 차례입니다.

Html:

<input type="button" value="굵게" onClick="doCommand('bold');"/>

선택된 곳을 굵게 표시할 수 있는 버튼을 만들었습니다. onClick 이벤트로 클릭하면 doCommand 가 실행됩니다.

Javascipt:

function doCommand(command, args)

{

    getIFrameID('richEditor').execCommand(command,false,args);

    document.getElementById('richEditor').contentWindow.focus()

}

doCommand 메소드 입니다. 좀 전에 리펙토링 하면서 만들었던 getIFrameID 메소드와 execCommand 메소드를 사용합니다.

execCommand메소드는 두개의 인자를 갖습니다. 다음 페이지를 참고 하세요.

doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.

Html :

<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위 코드를 추가하고 테스트를 해보면, 어떤 의미인지 잘 알 수 있을 것 입니다.

완성된 코드 입니다.

<html>

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        getIFrameID("richEditor").designMode = "On";

    }

    function getIFrameID(aID)

    {

        if (document.getElementById(aID).contentDocument)

        {

            return document.getElementById(aID).contentDocument;

        }

        else

        {

            return document.frames[aID].document;

        }

    }

    function doCommand(command, args)

    {

        getIFrameID('richEditor').execCommand(command,false,args);

        document.getElementById('richEditor').contentWindow.focus()

    }

    </script>

</head>

<body onload="load();">

    <p>

        <input type="button" value="굵게" onClick="doCommand('bold');"/>

        <input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

    </p>

    <iframe id="richEditor"></iframe>

</body>

</html>

다음에는 위 코드에, 기능을 좀 더 추가하고, 페이지의 값을 넘겨 스크립트언어에서 받는 방법을 소개해보도록 하겠습니다.

Posted by onionmen
728x90
우연히도 미투데이에 한창 열을 올리던 도중 이런 글을 보게 되었다.

이벤트!!! =>>> 이 책이 꼭 필요하신 분.... 댓글 올리신 선착순 5분께 보내드릴께요.^^
오전 11시 15분 <- 퍼머링크

이런 놓칠 수 없는 이벤트에 난 손을 들게 되었고, 며칠 뒤 배송되어진 바로 이것.

한빛미디어에서 날아온 택배상자가 날 설레이게 했다.
사용자 삽입 이미지

테이프로 발라진 택배박스들과 다른 끈으로 매어진 택배상자는 왠지 정감이 가는 부분이었다.

사용자 삽입 이미지

박스를 개봉하고 보이는 것은 바로 이놈. 오라일리에서 출간된 자바스크립트 책이 번역되어 따끈따끈하게 내 품으로 들어오게 되었다.

웹2.0이라는 잘팔리는 단어를 달고 나온 이 책은, 겉만 번지르르한 것이 아니었다.
단지 웹 여기저기에 널려있는 코드들을 모아서 엮어놓은 책이 아닌, 역시나 Hello World 로 시작하는 하나의 프로그래밍 언어 책이었다.

내가 지금까지 본 자바스크립트 책은(두권도 안되지만) 단순히 코드의 집합책이었다.
때문에 코드의 일관성도 없었고, 이게 왜 이렇게 되어야 하는지에 대한 의문도 풀어주지 않았다.

copy & paste는 잊으라는 당당한 요구조건과 함께 등장한 이 책은 처음 시작하는 초보자나, 어느정도 웹개발 경험이 있는 중급자가 보기에도 무난한 내용으로 구성되어 있었다.

아직 정확한 평가를 내리기엔 이르지만, 기본을 다지는데 많은 도움을 줄 수 있을 것 같다.
내가 지금까지 쌓아온, 허술하고 부실한 탑이 무너지지 않게 해줄 수 있는 한장의 벽돌같은 책이라고 할까.


덧붙임.
세상에서 가장 오해가 많은 언어(링크 클릭) 라는 자바스트립트에 관한 책이다.
위 링크를 따라 들어가보면 다음과 같은 문장이 있다.
"다음 단 한 권의 책만 추천합니다.
JavaScript: The Definitive Guide (5th Edition) by David Flanagan."

비교가 가능했다면 좋았을 텐데 아직 번역본도 나오지 않은듯 하고, 접할 기회가 없었기에 얼마나 대단한 책인지는 아직 모르겠다. 자바스크립트계의 대단한 책인 것임엔 분명하겠다. 기회가 된다면 꼭 한번 읽어보고 비교해봐야겠다.


내가 두번째로 받게 된 책. IT EXPERT시리즈 중 하나인 영상처리프로그래밍 이라는 책.

두번째 이벤트!! 이 책이 필요하신 분은 '손'이라고 댓글을 달아주세요. 선착순 3분께 보내드릴께요. 그리고 이 책이 필요한 이유에 대해 공감가는 댓글을 달아주신 2분을 뽑아서(제 맘대로 뽑습니다.ㅋㅋㅋ) 보내드릴께요.
오전 11시 36분 <-퍼머링크예요.

이런 링크가 보이자 재빠르고 또 손을 들었다.

그리고 며칠 후 다음과 같은 택배가 도착했다.

사용자 삽입 이미지

역시나 끈으로 매어져 있는 날개물류 택배상자.

사용자 삽입 이미지

이러한 내용물을 담고 있는 이 책의 이름은 바로 이것이다.

사용자 삽입 이미지

비쥬얼스튜디오2005로 설명이 진행되고 있어서 상당히 도움이 될만한 책이다.
영상처리쪽과는 전혀 관계없는 사람이지만, 학부때 들었던 멀티미디어 과목이 생각나 다시한번 그래픽처리를 해보고 싶은 생각이 든다.

번역서가 아니라 그런지, 상당히 친근감 느껴지는 그런 책이다.
단지 영상처리에 대한 부분만 아니라, 깔끔한 코드작성법에도 도움이 될 듯 하다.(예제코드들이 상당히 예쁘다.)

이 책의 추천사는 김용성씨가 작성하였는데, 정말 읽어보고 싶은 책이었다.

챕터 하나하나에서 다루는 모든 예제는 하나의 프로그램으로 통합된다고 하니, 기가막힐 노릇이다.

구성과 코드만으로도 이분야 종사자들은 꼭한번 읽어봐야할 책이라고 생각된다.


세번째로 받게된 책.

세번째 이벤트: 이 책이 필요하신 분은 '손'을 댓글에 남겨주세요. 선착순 세 분 그리고 필요성에 대해서 공감할 수 있는 댓글을 올려주신 두 분께 책을 보내드립니다.^^
오후 2시 39분 <- 퍼머링크예욤

사용자 삽입 이미지

이제는 친숙한 끈포장.

사용자 삽입 이미지

이런 책이 들어 있었다.

어디서 많이 본듯한 이 책은 바로

사용자 삽입 이미지

HeadFirst의 최신작. 세상을 설계하는 객체지향 방법론 이라는 책이다.

책의 난이도는 초급자가 바로 시작하기엔 약간의 거부감이 생길 수 도 있을 정도이지만, 부록부분의 객체마을에 오신것을 환영합니다. 라는 파트를 마련해두어 중급초반의 책을 초중급으로 낮추었다.

방법론에 관한 책이기 때문에 난이도를 따지는것도 우습지만, 책속의 코드를 이해하기에 초보자는 부담이 있을 것으로 보인다.

오늘 받은 이 책은 내 HeadFirst 컬랙션을 완성시켜주는 마무리책이 되었다는 점에서 기념할 만 하다.
어서 열심히 읽고, 나름대로의 철학을 만들어가야겠다.

사용자 삽입 이미지

설마 이런일이 일어나진 않겠지. 대참사라니..



이렇게 좋으 책을 보내주신 하치님 감사해용~♥

사용자 삽입 이미지

▲ 증정삼종셋트


Posted by onionmen
이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2024.10
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday
Today
Total