티셔츠의 기적, 당장 집에 있는 옷 찾아봐야 겠군여.

이를 해결하기 위한 방안으로는 1. 디스크 캐쉬 용량 늘리기, 2. 삭제 알고리즘(LRU 기반 알고리즘) 개선 두가지를 얘기하고 있습니다. 1번의 경우 브라우저가 기본 용량이 큰 상태로 출시될 때만 의미가 있을듯 하고(물론 사용자가 설정을 통해 수정할 수 도 있겠지만, 이런 방식으로는 대세에 전혀 영향을 못 미치겠죠.), 2번의 경우는 리소스의 타입에 따른 가중치를 부여한 LRU 알고리즘을 간단히 얘기하고 있습니다.

저의 경우야 개발을 위해 브라우저를 사용하는 빈도가 높아, 캐쉬를 가급적 작게 잡아 쓰고, Firefox의 경우는 메모리 캐쉬도 끄고 사용할때도 있긴 하지만, 일반적인 상황에서야 수백 GB의 디스크가 기본이라 수백 MB 정도를 브라우저 캐쉬로 사용한다고 해서 디스크 용량이 부족하진 않겠죠. 하지만 혹시 디스크 캐쉬 사이즈를 늘림으로 인해서 발생하는 문제점은 없을까요?

답이나 생각이 있는건 아니고, 그냥 궁금하네요. ^^; 웹 사용 측면만 본다면 전혀 문제될 것이 없을듯 하고, 오히려 성능 개선이 일어나는게 당연한 듯 한데… ㅎㅎ

참고로, Steve Souder 아저씨가 Browser Disk Cache를 통해 Browser Disk Cache Survey를 진행하고 있으니, 한번 참여해 보심이 어떠실지요?

그리고, 4월 초에 Mozilla Web Caching Summit가 열렸었는데, 여기서도 디스크 용량을 늘리는 것에 대한 연구가 필요하다고 결론을 내리고 있네요.

참고

• Call to improve browser caching
• Performance Research, Part 2: Browser Cache Usage – Exposed!
• Mozilla Web Caching Summit
• http://hacks.mozilla.org/2010/05/revitalizing-caching/ – 내용 보완

잘 된다고 생각했었는데, 뭔가 이상하던구요. Incremental backup 이라고는 하지만, 매번 100MB 정도씩 백업이 발생하는 것도 그렇고, 맥북 전원을 껐다 켜면 매번 디스크를 못찾겠다는 것도 그렇고… 암튼 그래서 새로 지우고 다시 시도 중입니다. 대신 순서와 방법을 좀 바꿨는데 다음과 같습니다. 기본적으로 해야 할 일들은 아래와 동일합니다.

1. Time Machine과 관련된 모든 설정을 초기화 하고, NAS에 저장된 백업 이미지 및 해당 폴더를 모두 삭제했습니다.
2. 백업용 이미지 파일을 먼저 생성했습니다. 디스크 유틸리티를 사용하지 않고 다음의 명령어로 직접 생성했습니다. 처음 생성시 이미지 크기를 200GB로 설정했고(아래의 크기 변경 과정은 수행하지 않았습니다), 파일명 규칙에서 hostname.ethernetid를 hostname_ethernetid로 변경했습니다.

   hdiutil create -size 200g -fs JHFS+X -volname "Backup" hostname_xxxxxxxxxxxx.sparsebundle

3. NAS에서 backup만을 위한 별도 계정을 만들었습니다.
4. 백업용 공유 폴더를 생성하고, backup user만이 접근할 수 있도록 권한을 설정하였습니다.
5. NAS에서 Time Machine function을 enable하였습니다.
6. NAS의 백업용 폴더에 이미지 파일 복사, 여기서 잠깐 컴 재부팅
7. Mac에서 Time Machine on, 디스크 선택(위에서 작성한 폴더 선택하고 backup으로 로그인), /Users 디렉토리를 제외한 모든 디렉토리는 백업 대상에서 제외하도록 옵션 수정, 백업 시작

잘 될지 모르겠네요… 가장 큰 문제는 자동으로 백업이 안되고 매번 디스크를 찾아서 실행해야 했던 부분인데…

그리고 재밌는건 찾아본 문서에서 이미지 파일의 파일 시스템을 HFS+J 로 하면 된다고 했는데, 저의 경우는 아래 작성한거처럼 대소문자 구분이 안되는 파일시스템이라 백업할 수 없다는 메시지만… 아마도 한글 때문이라 생각되네요.

엊그제 Buffalo LinkStation LS-QL을 집에 들여놓게 되었습니다. 일전에 맥북이 맛탱이 가서 새로 설치한 경험이 있던지라, 맨 먼저 Time Machine으로 백업을 시도 했습니다. 근데, 메뉴얼에 있는데로 했더니 이놈이 제대로 동작하지 않더구요. 어찌 어찌 해서 결국 성공(현재 풀 백업 중) 했고, 아래는 그 과정입니다.

0. Mac의 Time Machine 설정 끄기

큰 문제는 없는 듯 하지만, 일단 환경 설정의 Time Machine이 on 되어 있다면 off해두는게 좋을 듯.

1. 백업용 공유 디렉토리 만들기

Web Admin tool > Shared Folders > Shared Folders Setup

그냥 만들면 되는데 Shared Folder Support 항목에 Apple이 체크되어 있는지만 확인하면 될 듯.

2. NAS의 Time Machine 활성화

Web Admin tool > Time Machine

Time Machine Function을 enable로 설정하시고, Target folder는 앞에서 만든 디렉토리로 선택한 후 Apply 를 클릭합니다.

3. Time Machine 백업을 위한 번들 이미지 파일 생성

여기부터가 시키는데로 하면 안되는 부분 –;

2번에서 Time Machine을 enable 한 후 아래에 있는 Mac Information을 입력하고 Apply를 클릭하면, 백업용 번들 이미지를 생성시켜 주지만 정상 동작하지 않습니다. 그래서 일단 Admin tool에 있는 기능을 사용하지 않고 디스크 유틸리티로 직접 이미지를 생성하였습니다.

Mac의 디스크 유틸리티를 실행한 후, 새로운 이미지 버튼을 클릭하여 아래 화면과 같이 설정하여 새로운 이미지 파일을 만듭니다. 파일명과 포맷에 대해서는 아래 내용 참고하시기 바랍니다. (아래 이미지에서는 파일명이 .으로 구분되어 있는데 _으로 하는게 좋을 듯 합니다. 대부분의 문서에서 그렇게 되어 있어서.)

• 파일명은 hostname_ethernetID.sparsebundle 이어야 합니다. 그리고 반드시 en0 인터페이스(유선 네트워크 카드)의 ethernet id를 사용해야 합니다. 위 항목은 시스템 환경설정에서 확인할 수 있습니다. enternet id는 :로 분리된 16진수로 나오는데 그냥 : 빼고 붙여주시면 됩니다. 만약 id가 12:34:56:78:90:ab 이면 1234567890ab 가 됩니다. 또, 디스크 유틸리티로 만들면 확장자를 sparseimage인 거 같기도 했는데, 그냥 sparsebundle로 바꾸시면 됩니다.
• 포맷은 반드시 대소문자구분, 저널링으로 선택해야 합니다. Web admin tool에서 이미지를 만들면 대소문자 구분이 안되는 이미지를 만들어 전체 백업이 되지 않습니다. 이 문제 때문에 이미지를 직접 생성해야 합니다.

4. 이미지 파일을 NAS에 올리고 크기 변경

3번 단계에서 만든 이미지 파일을 1번 단계에서 만든 Time Machine 용 공유 디렉토리로 복사합니다. 그리고 터미널에서 아래 명령으로 파일 크기를 늘려줍니다. 이 부분은 왜 해야 하는지 잘 모르겠네요. 그냥 시키는데로… ^^

hdiutil resize -size 50g hostname.1234567890ab.sparsebundle

참고로, NAS에서 Time Machine을 enable하면 Finder의 왼쪽 공유 목록에 “NAS이름-TimeMachine”으로 컴퓨터가 하나 더 나옵니다. 거기에 보면 Time Machine 용으로 공유하는 디렉토리가 나옵니다.

5. Time Capsule이 아닌 장비의 Time Machine 지원 설정

이것도 시키는데로. 대략 읽어 보니, Time Capsule이 아닌 장비에서 Time Machine을 사용하려면 아래의 명령을 실행해야 한다고 하는 듯.

sudo defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1

6. Mac의 Time Machine 설정

Mac의 환경 설정에서 Time Machine을 켜고, 디스크 선택을 클릭해서 앞서 만든 NAS상의 Time Machine용 디렉토리를 선택합니다.

여기까지 하면 아마도 백업을 시작할껍니다. ^^

혹시 잘 안되면, Time Machine & Time Capsule support on your LinkStation 참고하시길. 제가 쓴 글은 이 문서를 기반으로 성공한 것이긴 하지만, 문서 내용과 틀린 부분이 있습니다. 특히 3단계 주의!

다음번에는 iTunes Media 서버 시도하기!!! 요건 더 힘들거 같은 느낌이.

var domscript = document.createElement('script');
domscript.src = 'main.js';
document.getElementsByTagName('head')[0].appendChild(domscript);

이 코드만 봐 왔었는데, 아래와 같은 방식이 있네요.

var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);

코드 내용을 보면 아시겠지만 Google Analytics에서 사용하던 코드이고, 2009년 12월 버전입니다. 위처럼 사용하는 이유는 document.getElementsByTagName('head')[0]가 null 일 수 있기 때문. 나라면 그럴리가 없겠지만, Google Analytics의 경우는 모든 상황을 고려해야 할 터이니 이해가 되네요.

그런데 위 코드를 좀 더 개선한 코드가 아래라고 합니다.

var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);

JavaScript를 동적으로 로딩하기 위해서는 무조건 script 태그가 존재할테니, document.getElementsByTagName('script')[0]는 null이 될 수 없겠네요. 이 코드는 마찬가지로 Google Analytics의 2010년 2월 버전입니다. 앞 코드의 경우 로딩되는 스크립트 태그가 정확히 어디에 붙을지 모를 수 있는데, 이러한 불확실성을 조금은 제거한거라 생각되네요.

마지막 코드는 jQuery에서 사용하는 방식입니다.

var head = document.getElementsByTagName ("head")[0] || document.documentElement;
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore(script, head.firstChild);

재밌는 부분은 appendChild 대신 insertBefore를 사용했다는 점입니다. 주석에서 쓰여 있듯이. IE6의 bug(http://dev.jquery.com/ticket/2709, http://dev.jquery.com/ticket/4378) 때문이라는데, 이 부분은 찬찬히 확인해 봐야 할 듯.

본 글은 High Performance Web Sites blog의 appendChild vs insertBefore을 바탕으로 작성되었습니다.

추가적으로 appendChild vs insertBefore의 내용을 보면, 아래와 같은 내용이 나옵니다.

It turns out that not all web pages have a HEAD tag, and not all browsers will create one when it’s missing.

즉, 어떤 브라우저들은 HEAD 태그가 존재하지 않는 경우 자동으로 생성해준다는 것인데, 사실 대부분의 브라우저가 자동으로 HEAD 태그를 생성하는거 같습니다. 그 다음번 포스팅인 AutoHead – my first Browserscope user test을 보면 이를 위해 테스트를 수행했고, 그 결과 페이지가 AutoHead Browserscope User Test 입니다. 아주 많은 브라우저들이 자동으로 생성해 준다는 것을 알 수 있네요.

오호 이런것이… ^^

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

각 브라우저별 지원 버전 확인해 봐야겠음.
참조: http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/

장점은 완성도 높은 에디터, 기본적으로 제공되는 다양한 컴포넌트, MockStore를 통해서 얻을 수 있는 다양한 템플릿들이라고 할 수 있을듯 합니다. 특히나, 개별 컴포넌트들의 속성 설정이 훌륭해 보이네요.

단점이라면, 지원되는 액션이 다른 페이지로의 링크 밖에 안된다는 점이 가장 아쉬운 점입니다. 목업툴이 평면적이고, 이해/확인하기 어려운 ppt 문서를 대체하도록 사용되었으면 하는데, MockFlow는 결과물 자체로 봤을때는 PowerPoint 보다 그리기 편한 툴 정도로 밖에 안보이네요. 그리고, 세부적인 description이나 note를 작성하기 위한 방법도 따로 없는거 같아 아쉽구요.

채팅 기능이나 협업 기능도 의미는 있겠지만, 이보다는 좀 더 동적인 목업이 가능한 툴이었으면 했는데 아쉽네요.

아. 참고로 Flash로 구현되어 있고 그래서인지 한글이 안되는 문제가 있네요.

수학에서의 closure는 특정 집합의 원소들을 가지고 연산한 결과가 동일한 집합에 속하게 되면 해당 집합은 대상 연산에 대해 닫혀 있다라고 표현한다. 예를 들어 자연수 더하기 자연수는 항상 자연수가 되므로 자연수 집합은 더하기 연산에 닫혀있는 집합인 것이다. 하지만 자연수 빼기 자연수는 음수가 나올 수 있으므로 자연수 집합은 빼기 연산에 닫혀있지 않는 집합이다.

참고: Closure (mathematics)

프로그래밍 언어에서의 closure는 자유 변수를 가진 프로시저를 나타내는 기법이란 의미로 사용된다(컴퓨터 프로그램의 구조와 해석, p.127).

Syntax

font-face를 정의하는 syntax는 다음과 같고,

@font-face {
    font-family: <a-font-name>;
    src: <source> [,<source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
    [unicode-range: <U+nnn-nnn> [,<U+nnn-nnn>]*];
}

실제 사용은 다음과 같이 합니다. @font-face에서 명시한 font-family를 일반적인 폰트 이름처럼 사용하면 됩니다.

@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

새로 알게된 내용들

local hint : src descriptor에는 서버에 있는 폰트 url을 명시하는 url hint 외에도 local hint를 이용해서 로컬에 있는 폰트를 지정할 수 있습니다. 또한 소스를 하나 이상 명시할 수 있습니다. 이들을 사용하는 이유는, 해당 폰트가 설치되어 있으면 설치된 폰트를 사용하고 그렇지 않은 경우에만 다운로드 받도록 하기 위함입니다.

@font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue"),
         local("HelveticaNeue"),
         url(MgOpenModernaRegular.ttf);
}

format hint : 여러 가지 유형의 폰트를 지원할 수 있으므로 source의 포맷을 명시하는 format hint 키워드가 있습니다. CSS Fonts Module Level 3(W3C Working Draft 18 June 2009) 문서에서는 “truetype”, “opentype”, “truetype-aat”, “embedded-opentype”, “svg”를 예제로 들고 있는데, 실제 브라우저에 따라 지원의 차이가 있을 수 있고 또 다른 포맷이 생길수도 있습니다. 참고로 IE에서는 format hint를 인식하지 못하며 포함된 경우 이를 무시하게 됩니다.

@font-face {
    font-family: Gentium;
    src: url(Gentium.ttf) format("opentype");
}

Cross Browsed @font-face

IE의 경우 eot 파일을, 그 외 브라우저(위에서 언급한 것들)에서는 TrueType 및 OpenType만을 지원하므로 크로스 브라우징이 가능하게끔 코딩을 해야 합니다. 앞서 언급한 src descriptor의 format hint를 이용하여 다음과 같이 코딩할 수 있습니다. 다음 코드에서 어떤 @font-face를 먼저 코딩하는지가 중요합니다.

@font-face { /* for IE */
  font-family: Gentium;
  src: url('Gentium.eot');
}
 @font-face { /* for non-IE */
  font-family: Gentium;
  src: url('Gentium.ttf') format('opentype');
}

Ajaxian의 @font-face: How to embed it, and how it looks across browsers에서는 하나의 @font-face에 src descriptor를 두 번 선언해서 사용하고 있습니다. 이런식으로도 가능하다면 위 코드는 다음과 같이 변경할 수 있습니다.

@font-face {
  font-family: Gentium;
  src: url('Gentium.eot');
  src: url('Gentium.ttf') format('opentype');
}

Bulletproof @font-face syntax

Bulletproof @font-face syntax을 읽고 추가한 사항입니다.

위의 Cross Browsed @font-face 단락에서 제시한 방법 모두 겉으로 보기에는 크로스 브라우징에는 문제가 없으나, IE에서 조금 이상한 request가 발생하는 문제(?)가 있습니다. IE에서는 먼저 Gentium.eot 파일을 요청(HTTP request)하고 다음번 src에 대해서는 Gentium.ttf’)%20format(‘opentype 로 요청을 발생시킴니다. IE가 src를 파싱하는 구조때문인것으로 보이는데 이 경우 404 응답(response)이 올 것입니다.

다음 코드는 이러한 문제를 해결하기 위한 것으로 ttf를 요청할 때 반드시 local hint를 먼저 입력하는 방식입니다. 이 방식은 non-IE 브라우저에서는 로컬에 설치된 경우 이를 사용할 수 있다는 장점이 있으며, IE에서는 local hint 자체를 인식하지 못하므로 파싱 오류가 발생할 것이고 어떤 요청도 하지 않게 됩니다. 참고로 local hint가 2번 사용된 것은 OS X의 Safari에서는 전체 폰트 이름과 Postscript 이름이 틀린 경우 Postscript 이름만을 사용하기 때문에 이를 추가해 준 것입니다(두번째 local hint에 있는 이름).

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot);
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url('GraublauWeb.otf') format('opentype');
}

@font-face{
  font-family:'Graublau Web';
  src: url('GraublauWeb.eot'); /* here you go, IE */
}
@font-face{
  font-family:'Graublau Web';
  src: url(//:) format ('no404'), url('GraublauWeb.otf') format('opentype'); /* tricky! */
}