양파맨의 겨울나기

• .은 .을 무시
• +는 +이후 문자열 무시

• 자바스크립트 기반. 정확히는 구글의 V8 엔진 기반. 서버사이드 자바스크립트.
• 멀티스레드는 지원하지 않음. 어차피 웹은 latency가 길기 때문에 차라리 싱글스레드를 이용한 이벤트 루프가 낫다.
• 자바스크립트 언어 자체가 논블로킹 IO를 지원하기 때문에 접속마다 스레드를 생성하는 방식보다 동시접속 성능면에서 우수하다. 특히나 long-lived 를 지원해야 하는 리얼타임 웹에서 제격이다.
• 파일IO 자체가 너무 느리기 때문에 디스크에서 데이터를 읽어 오는 사이에 다른 일을 할 수 있도록 비동기 IO를 구현하는 서버를 선택.

[강은성/SK커뮤니케이션즈 보안담당 이사 : 현재 기술로 보았을 때 이것은 안전합니다.]

• 패스워드의 생성규칙 가이드
  

  ---

1. 패스워드는 8자 이상 12자 미만으로 이루어져야 합니다.
2. 패스워드에는 특수문자가 필수로 들어가야 합니다.
3. 아이디와 같은 문자열은 사용할 수 없습니다.

1. 자릿수 8자리 이상 12자리 이하
2. 대입 시 특수문자를 필수로 입력. 예) votmdnjem! , votmdnjem!@, qlqjs!@#
3. 아이디와 같은 문자열은 제거

1. 자신이 자주 사용하는 비밀번호를 넣고 회원가입 버튼을 누른다.
2. 그럼 경고창이 뜨겠지. "특수문자가 필수임ㅋㅋ" 
3. 그렇게 되면 사용자는 짜증을 낸다.
4. 그리고 기존 비밀번호에 ! 또는 !@ 등을 추가해서 회원가입을 완료할 것이다.

• 패스워드 생성규칙의 강제화
  

  ---

'사용자들에게 이렇게 시켰으니 적어도 1234와 같은 비밀번호를 사용하지 않겠지'
'유추하기 어려운 강력한(특문이 포함된) 패스워드이니 쉽게 깨지지 않겠지'
'난 보안을 지키기 위해서 최선을 다했어. 해킹 당해도 내책임 아님'

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

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

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

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

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

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

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


콘솔창

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

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()	콘솔창의 내용을 모두 삭제함

IE9이 출시 되었습니다. 물론 꽤 오래전에 출시되었죠. 베타버전부터 사용중 이었고, 정식버전이 출시되기를 꽤 기다렸습니다. 기다렸던만큼 출시된 정식버전 IE9은 꽤 높은 완성도가 높았습니다.

기존에 있었지만 부각되지 않았던 기능들, 그리고 새롭게 추가된 기능들을 위주로 하여 IE9을 알아보겠습니다.

1. 주소창 검색

IE8의 주소창과 검색창

기존에는 웹사이트 주소를 입력하는 주소창과 검색을 담당하는 검색창이 분리되어 있었습니다. 기존에 검색창은 검색제안이나 비주얼서치 등의 새로운 기술을 내놓음에도 불구하고 접근성의 문제로 자주 쓰이지 않았죠.

주소창 검색에서 검색어 제안을 사용하는 모습

사이트 고정으로 시작표시줄에 등록된 모습

윈도우7 시작표시줄에 joinsmsn 사이트를 고정시켰습니다. 파비콘이 아이콘이 되어 원클릭 접속이 가능합니다. 이는 기존에 사이트바로가기와 크게 다른 점은 없는데요, 나중에 설명드릴 사이트 점프 기능에서 차이점이 드러납니다.

사이트고정 기능으로 사이트에 접속하게 되면, 위 이미지에서 보이시는 것과 같이 이 창은 joinsmsn 을 위한 사이트 입니다. 라고 파비콘으로 표시를 해줍니다. 좀 더 깔끔한 모습을 원하신다면 파비콘의 크기를 64*64 사이즈로 변경해주세요.

고정방법은 여러가지가 있지만 가장 간단한건 고정시키고 싶은 사이트에 접속 한 뒤 그 사이트가 열려있는 탭을 작업표시줄로 잡아끄는 것 입니다.

탭을 끌어서 시작표시줄에 놓는 모습

작업표시줄에 등록이 되면 사이트의 파비콘이 아이콘이 되며, 사이트 접속시 고정된 사이트임을 알려주게 됩니다.

시작표시줄에 등록된 모습

페이스북을 사이트 고정시켜놓고, 아이콘에서 오른쪽 버튼 혹은 왼쪽클릭 후 잡고 끌면 위와 같은 메뉴가 나타납니다. 페이스북 같은 경우는 뉴스나 메시지, 이벤트 등의 메뉴로 바로 갈 수 있고, 트위터나 위 이미지의 joinsmsn 에서도 기능을 제공하고 있습니다. 

IE8에서 웹슬라이스 라는 기능을 제공했었습니다. 신기능이지만 잘 사용하지 않는 기능중 하나죠. 개인적으로 이 기능도 웹슬라이스의 뒤를 따르지 않을까 걱정도 되지만 이런 기능들이 잘 활성화 되면 좀 더 웹을 편리하게 사용할 수 있을 텐데 말이죠. 기능의 활성화를 빌어봅니다.

조만간 사이트에 점프리스트 추가 하기를 포스팅 할 예정입니다. (매우 간단합니다.)

3. 보안 강화

MS에서 IE8 출시부터 강조했던 것이 하나 있는데, 바로 보안입니다. IE8 에서는 XSS필터, ClickJacking방지, 탭색변경, 스마트주소표시줄, 스마트스크린 등의 보안 기능을 대거 추가 하였고, 내부적으로 메모리 보호에 강화된 점을 내세웠죠. IE9 에서도 물론 보안 강화를 갖고 나왔습니다. 이미 IE8에서 웬만한건 추가 했기 때문에 특별한 것은 없고, 눈에 띄는 거라면 추적방지 기능과 엑티브액스 필터링 정도 입니다.

의외로 제3사쿠키를 활용하는 사이트들이 많이 있습니다. 스스로도 개인정보 보호에 힘써주세요.

4. 자주 방문하는 사이트

about:blank 라는 문구가 낯이 익으신 분들은 저처럼 성격이 좀 급하신 분들 아닐까 합니다. 웹사이트의 시작페이지로 about:blank 를 넣으면 브라우저가 실행됨과 동시에 빈페이지가 뜨기 때문에 조금이나마 쾌적한 인터넷 환경을 만들 수 있습니다.

IE9 에서는 about:Tabs 라는 시작페이지를 공식적으로 지원하기 시작했습니다. 브라우저를 실행하면 방문했던 페이지들을 빈도수 별로 리스트업하여 보여줍니다.

타 브라우저에 비해서 업데이트도 쉽지 않은데 말이죠.

7. 끝

• 모바일용 게시판으로 변환
• 디시인사이드 로그인 가능
• 디시인사이드 게시물 작성 가능
• 디시인사이드 댓글 작성 가능
• 루리웹 로그인 가능
• 루리웹 게시물 작성 가능
• 루리웹 댓글 작성 가능

$.fn.Alert = function() {
	return alert(this[0].id);
}

(function($) {
    $.fn.Alert = function() {
	return alert(this[0].id);
    }
})(jQuery);

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

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

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

	return closureTest2();
}

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

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

	return closureTest2();
}

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