행복한고니 Season2

PHP 창시자 Rasmus Lerdorf 의 특강이 2009년 4월 21일, 그러니까 어제 야후 코리아 사무실에서 있었습니다. 보다 많은 사람들과 공유하고자 간단하게 내용을 정리해봤습니다. 강의 자료는 http://talks.php.net/show/korea09 를 참고하세요.

슬라이드

강의는 전체 두 개 세션으로 진행되었습니다.

첫번째 세션에서는 단순함(Simplicity)을 강조했고, 두번째 세션에서는 보안(Security)을 강조했는데 XSS에 대한 내용이 주였습니다. 시간이나 진행 내용으로 봤을 때 Rasmus씨가 강조하고 싶었던 것은 전자인 듯 합니다.

아래는 제 기억에 의존해서 Rasmus씨의 강의를 대충 재구성해봤습니다(앞의 번호는 슬라이드 번호입니다). 아무래도 강의가 영어로 진행되다보니 전부 다 들은 것은 아니라 빠진 부분이 있을 수도 있습니다. 슬라이드를 참고해서 보시면 도움이 되리라 생각합니다.

1. 어느 복잡한 어플리케이션의 구조. 뭐가 뭔지 알아보기 힘들다.
2. 경험이 증가할수록 더욱 단순하게 만들려고 노력하지만, 대부분의 웹은 중간단계(복잡도가 증가하는)에 머물러 있다. 점점 더 복잡해지는 추세다. 야후에서 다른 사람들이 나에게 문제가 생겼다고 도움을 요청할 때마다 내가 하는 일은 코드를 지우는 것이었다.
3. 복잡성이 증가함으로써 우리가 잃게 되는 것. Scalability, Performance, Security
4. 어떤 것도 공유하지 않는 구조가 좋다. HTTP를 처음 봤을 때 그 단순함에 매료됐었다. 사람들이 Stateless한 HTTP에서 세션, 쿠키 등을 요구했었다. PHP에 그 기능을 추가하면서, 나는 그 부분을 아예 위임할 수 있도록 했다. “좋은 외부 솔루션이 많은데, 왜 내가 직접 만들어야 하지?” 그랬더니 사람들이 알아서 DB에도 붙이고(특히 단순한 MySQL이 많이 사용됐다) 그랬다. MVC 패턴은 정말 좋지 않은 생각이다. 왜 모든 것을 Controller가 제어해야 하는가? 야후 메일은 각각의 서버가 독립적으로 통신하도록 만들어져있다. (이 부분에서 특히 많은 말을 “빨리” 해서 놓친 부분이 많습니다. T^T)
5. 웹 브라우저 자체가 이미 훌륭한 Front controller이다. 독립적으로 요청하고, 독립적으로 데이터를 수신할 수 있다.
6. (지금부터는 Performance 얘기) 사용자들에게 0.2초 안에 어떤 반응이 일어나지 않으면 그 웹사이트는 문제가 생길 수 있다. 반응이 없어 클릭을 여러번 하면 여러번의 요청이 생긴다. 한번만 발생해야할 요청이 여러번 발생한다는 것이다. PHP는 느리지 않다. 대부분의 병목현상은 프론트엔드(front-end)에서 발생한다. (YSlow 시연 – 야후코리아, ㅈ신문사)
7. Siege를 사용한 퍼포먼스 테스트
8. APC를 사용한 성능 개선
9. 웹 서버의 call 프로세스를 체크하고, System call을 줄인 사례(Directory index 순서를 조절하거나 적게 지정하도록)
10. System call을 줄이기 위해 include 패스를 조절한 사례(.을 뒤로 두면 보안상 좋다는 것 같기도… -_-;;)
11. 다시 벤치마킹
12. apc 파라미터값 조정. stat는 파일의 변경을 자동으로 체크하도록 하는 인수
13. include 구조를 파악할 수 있는 툴(솔루션의 복잡성을 파악하는데 도움이 된 듯)
14. 의존성 제거
15. Callgrind를 사용한 병목구간 체크 방법(직접 시연을 해주었는데 꽤 유용한 툴이었습니다. rasmus씨가 사용한 것은 kcallgrind라는 GUI 툴이었습니다)
16. XDebug를 사용한 병목구간 체크 방법(XDebug에서 Callgrind를 지원해서 실은 거의 같았어요)
17. 불필요한 코드 제거(여기서는 과도한 XMLWriter 호출 제거)
18. 본인이 작성한 Twit
19. Twit의 성능 – 1
20. Twit의 성능 – 2
21. Twit의 구조 (그러니까 빠르다… 이런 느낌?)
22. Callgrind 체크
23. 휴식

휴식 시간 이후로는 XSS에 대한 내용이었는데, 슬라이드만 봐도 어느 정도 이해할 것이라 생각합니다. 처리해야 할 게 너무 많더군요. -_-;;

그 외 기타사항으로는… Entry 포인트를 나누어라(index.php에서 다하려고 하지말고, 파일을 나누어라. 그게 웹 어플리케이션이 작동하는 방식이다), 클래스 구조를 과도하게 작성하는 것은 컴파일되는 언어에서나 해라(스크립트 언어는 그렇게 쓰라고 있는게 아니다), 클래스 상속구조가 어떻게 프레임웍이 어떻고 그건 개발자들의 자기 만족일 뿐(사용자들은 신경쓰지 않는다. 사용자들이 관심있는 것은 이 사이트가 얼마나 빨리 반응해주냐이다)… 정도가 있었습니다.

마지막에는 자신이 만들었다는(제가 듣기론?) XSS 스캐너 프로그램인 scannus 시연 장면을 보여주었습니다만, 검색해보니 공개된 것은 아닌가 봅니다. ^^;; 대신 예전에 ajaxian.com에서 봤던 XSS Rays라는 스캐너 프로그램을 링크합니다.

Slides: http://talks.php.net/show/korea09
YSlow:http://developer.yahoo.com/yslow
Siege:http://www.joedog.org/JoeDog/Siege
Xdebug Profiling: http://xdebug.org/docs/profiler
XHProf Profiling: http://pecl.php.net/xhprof
sla.ckers.org: http://sla.ckers.org/forum/list.php?3
Filter: http://php.net/filter

그리고 아래는 제가 아주 잘 나온 인증샷~

Rasmus의 특강 경청중!

Tip&Tech PHP, Rasmus, 강의, 단순함, 보안, 복잡성, 성능, 특강

Scintilla 1.77 버전이 나왔는데, 아직 패치를 실행하신 분은 없는 듯 해서 직접 패치 후 컴파일 했습니다. 패치 방법은 codewiz님, BlUE’nLIVE님이 작성하신 방법도 있는데, 너무 수정할 게 많아서 sixmen님께 힌트를 얻어 제 나름대로 수정했습니다. 덕분에 토요일 오후가 사라졌네요. ;;

다루어야 하는 파일은 ScintillaWin.cxx 파일 하나뿐입니다. 패치방법을 기억하기 쉽도록 아래에 적어둡니다. 그냥 바이너리 파일만 필요하신 분은 바로 아래에 있는 링크에서 받으시면 됩니다. 하지만, 현재 이 DLL에는 버그가 있습니다. 사용상에 중대한 영향을 끼치는 것은 아니라고 생각하지만, 경우에 따라서는 중요해질 수도 있습니다. 꼭 이 글 제일 아래에 있는 버그를 확인 후 사용하세요. 저한테는 중요한 버그가 아니라 일단 그냥 쓰기로 했습니다. -_-;;

Scintilla 1.77 한국어 IME 패치 (71)

패치 과정

아래의 모든 과정은 ScintillaWin.cxx 파일에서 이루어집니다.

1. case WM_IME_STARTCOMPOSITION: 를 찾습니다.
아래의 소스를 다음과 같이 수정합니다. 한글 키보드일 때만 작동하도록 되어있으며 이 부분은 sixmen님 소스를 그대로 사용했습니다.

case WM_IME_STARTCOMPOSITION:// dbcs
	ImeStartComposition();
	// 여기부터
	if (LOWORD(GetKeyboardLayout(0))==MAKELANGID(LANG_KOREAN, SUBLANG_KOREAN)) {
		// if the current IME is the Korean IME, do not show the default IME window
		return 0;
	}
	// 여기까지가 추가된 부분입니다.

나머지 글 읽기…

Tip&Tech Scintilla, 버그, 오픈소스, 컴포넌트, 패치

일단 예제

다음의 도형들은 모두 CSS”만” 사용해서 그렸습니다. 이미지나 <canvas> 또는 VML과 같은 기술도 사용하지 않았습니다.

기본

다들 아시다시피 CSS에는 경계선을 그릴 수 있는 border 속성이 있고, 상하좌우 4개의 방향에 대해 굵기, 색상, 타입을 각각 지정할 수 있습니다. 예를 들어, theBox라는 아이디를 가진 엘리먼트의 왼쪽에만 빨간색 1px 굵기의 실선을 보여주고 싶다면 다음과 같이 작성합니다.

#theBox { border-left:1px solid red; }

기본적으로 CSS에서 다루는 영역은 사각형입니다. 그래서, 4개 변의 경계선은 다음과 같이 설정할 수 있습니다.

#theBox { border:1px solid red; }

그런데, 각각의 경계선이 만나는 지점은 어떤 모양으로 그려질까요? 확인하기 위해서 각각의 경계선 색깔을 달리하고 좀 더 크게 작성해보면 다음과 같은 모양을 얻을 수 있습니다.
경계선이 만나는 지점을 확인하세요

<b style="border:40px solid;border-color:red blue green yellow;display:block">경계선이 만나는 지점을 확인하세요</b>

보다시피, 각각의 경계선이 만나는 지점은 사선 형태를 이루고 있습니다. 슬슬 무슨 일이 일어날 것 같죠? ^^ 그 다음에는 내부 컨텐트를 없애보겠습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block"></b>

이 상태에서 상단의 선을 없앱니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>

자… 이 상태에서 삼각형을 만들기는 쉽습니다. 좌우 경계선의 색상을 투명으로 만들어버리면 됩니다. 상단의 경계선처럼 없애지 않는 이유는 지금처럼 너비를 0으로 설정한 상태에서 좌우 경계선마저 없애면 전체 엘리먼트의 크기가 0이 되어 아예 화면에서 보이지 않기 때문입니다. 말보다는 눈으로 확인하는게 쉬울 듯 하여, 좌우 경계선을 아예 없애보았습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>

화면에는 안나오지만 분명 존재하고 있습니다. -_-;;;
0이던 너비를 40px 정도로 줘봤습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>

경계선이 다시 보이는 것을 확인할 수 있습니다. 다시 삼각형을 만드는 부분으로 돌아가서 좌우 경계선의 색상을 투명으로 만들어보겠습니다.

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>

드디어 CSS만으로 삼각형을 만들었습니다!

응용

삼각형에서 너비를 조금 주면 사다리꼴을 만들 수 있습니다. 백문이 불여일견! 일단 보시죠!

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none"></b>

그리고 상단을 남겨두고 하단을 없애면 반대 모양의 사다리꼴을 얻을 수 있습니다.

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-bottom-style:none"></b>

이 두개를 합치면 육각형을 만들 수 있죠.

색깔을 같이 맞추면 다음과 같이 보일 것입니다.

참고링크

아래 링크로 가시면 더 많은 예제를 볼 수 있습니다.

• A study of Regular polygons
• Dissecting CSS Polygons
  

Tip&Tech CSS, Polygon, tip, 다각형, 삼각형, 팁