Rev. 2.73

머리털나고 처음으로 배포했던 Node.JS용 모듈인 Clog를 0.1.2 버전으로 업데이트했습니다. 이 마이너 업데이트는 종전과 로그 출력방법이 동일하며 새롭게 configure 메서드가 추가되었습니다. 이 메서드를 이용하면 콘솔의 유형 단위로 로그를 필터링 할 수 있습니다. 사용 방법은 다음과 같습니다.

var clog = require('clog');

// display level configration:
clog.configure({'log level': 2});
//=> {'log': true, 'info': true, 'warn': false, 'error': false, 'debug': false}

// custom display level configration:
clog.configure({
  'log level': {
    'log': true,
    'info': true,
    'warn': false,
    'error': true,
    'debug': false
  }
});
//=> {'log': true, 'info': true, 'warn': false, 'error': true, 'debug': false}

configure 메서드는 객체를 인자로 받으며 'log level' 속성에 정의된 디스플레이 래밸의 숫자 또는 커스텀 래밸 플래그들로 구성된 객체를 인식하도록 만들었습니다. 래밸의 수는 log, info, warn, error, debug순으로 허용할 단계를 의미합니다. 즉 2를 기입하면 log와 info만 출력하게 되는 것이죠. 만약 당신이 모든 로그를 제외한 경고만 출력하고 싶다면 다음처럼 작성하면 됩니다.

clog.configure({
  'log level': {
    'log': false,
    'info': false,
    'warn': true,
    'error': false,
    'debug': false
  }
});

// or

clog.configure({'log level': 0});
clog.configure({'log level': {'warn': true}});

또한 configure 메서드는 나중에 다시 정의해도 문제되지 않으며, 커스텀 레이블도 필터링 할 수도 있도록 처리되었습니다. 커스텀 레이블을 사용중이라면 다음과 같이 필터링 할 수 있습니다.

clog('server', 'start listening on port 3000');  // custom head
clog.configure({'log level': {'server': false}});

이 옵션들을 잘 이용하면 운영과 개발 모드를 구분하여 자동으로 필터링하거나 어떤 상황에서 특정 메시지만 출력하도록 하는 동적인 구현도 가능할 거예요. 다음 업데이트에는 사용자 지정 색상을 지원하도록 할 예정입니다만, 언제 실행에 옮길지는 저도 잘 모르겠습니다; 끝으로 GitHub를 통해 이 아이디어를 주신 Antoine Musso씨와 여로모로 전파에 힘써주신 A.J님, Outsider님 그리고 Clog를 애용해 주시는 모든 여러분들께 감사드립니다.

Comments

사내 개발자가 아닌 분들을 대상으로 하는 HTML5 발표가 있어서 자료를 조사하던 중 Bartek Szopka씨가 만든 impress.js를 발견하고 소개했습니다. 보시던 분들의 반응이 아주 좋더군요. impress.js는 CSS3와 자바스크립트를 이용하여 인상깊은 프리젠테이션을 웹기반으로 만들어 줍니다. 화면 전환에는 다양한 CSS transition과 3D transform이 사용되었습니다.

HTML5의 스펙들 중 classListdataset API를 사용하기 때문에 이를 지원하지 않는 브라우저에서는 정상적으로 작동하지 않는다고 합니다. impress.js가 제대로 작동하는 브라우저는 현재 크롬과 사파리밖에 없습니다. 위 데모를 작동시키려면 프레임 영역을 클릭하고 방향키를 눌러보세요.

Comments

iOS 기기용 웹앱이나 네이티브앱 개발시 유용하게 사용될 수 있는 치수들입니다. 특히, 모든 iOS 기기를 지원하는(유니버셜) 앱을 개발할 때 자주 찾게 되는 자료중 하나입니다. 스테이터스 바, 네비게이션 바, 탭 바, 키보드 등의 사이즈를 세웠을 때와 눕혔을 때로 구분하여 측정했습니다.

아이폰의 화면 치수

아이폰에서 해상도를 계산할 때 굳이 레티나 디스플레이의 해상도(640 x 960)를 의식하여 계산할 필요는 없습니다. 단순히 이미지가 사용되는 곳에 더블픽셀(@x2)의 고해상도 이미지를 한 셋트 더 준비하면 된다는 사실만 기억하세요.

Portrait - 세웠을 때

앱 시작시 나타나는 오프닝 이미지는 기본으로 320 x 367 픽셀의 "filename.png"로 설정하고 레티나용으로 표시될 이미지는 640 x 734 픽셀의 "filename@2x.png"로 설정하면 됩니다.

iphone_portrait_dimensions.jpg
iPhone Portrait Width: 320px
iPhone Portrait Height: 480px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 367px
Tab Bar Height: 49px

Keyboard Height: 216px

iphone_portrait_keyboard_sizes.jpg
키보드가 나타난 상황에서는 메인 스크린의 일부와 탭바를 가립니다. 키보드 크기를 제외한 나머지 영역의 크기를 계산할 때 참고하세요.

Landscape - 눕혔을 때

아이폰을 눕혔을 때 나타나는 변화는 메인 컨텐츠 영역의 높이가 480에서 219픽셀로 줄어드는 것이고 네비게이션 바의 높이가 44에서 32픽셀로 줄어든다는 것입니다. 오프닝 이미지는 기본으로 480 x 219 픽셀 그리고 레티나용(@2x)은 960 x 438 픽셀입니다. 참고로 아이폰의 앱 시작 이미지는 세로와 가로 모두 준비할 필요가 없습니다. 자신의 앱이 가로와 세로 중 어디에 최적화 되어있는지를 판단하여 한가지만 준비하면 됩니다.

iphone_landscape_dimensions.jpg
iPhone Landscape Width: 480px
iPhone Landscape Height: 320px

Status Bar Height: 20px
Nav Bar Height: 32px
Main Content Area Height: 219px
Tab Bar Height: 49px

Keyboard Height: 162px

iphone_landscape_keyboard_sizes.jpg

아이패드의 화면 치수

아이패드는 아직 레티나 디스플레이를 지원하지 않기 때문에 더블픽셀(@2x) 이미지를 준비할 필요가 없습니다.

Portrait - 세웠을 때

ipad_portrait_dimensions.jpg
iPad Portrait Width: 768px
iPad Portrait Height: 1024px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 911px
Tab Bar Height: 49px

Keyboard Height: 264px

ipad_portrait_keyboard_sizes.jpg

Landscape - 눕혔을 때

아이폰과 달리 아이패드는 화면을 눕혔을 때 네비게이션 바의 높이에는 변화가 없습니다.

ipad_landscape_dimensions.jpg
iPad Landscape Width: 1024px
iPad Landscape Height: 768px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 655px
Tab Bar Height: 49px

Keyboard Height: 352px

ipad_landscape_keyboard_sizes.jpg

Comments