나를 포함한 많은 개발자들이

java.text.SimpleDateFormat이 스레스 세이프 하지 않다는 것을 잊고

static으로 선언하기 일 쑤 이다.

혹 또 잊어버릴 일이 생길 것 같아

SimpleDateFormat이 Thread-safe한지 테스트 한 결과를 알아보았다.

앞으로는 단순한 private으로만 사용해야겠다. ㅋㅋ

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2008/05/15 10:18
    댓글 주소 수정/삭제 댓글
    비밀댓글 입니다

요즘 계속 자바스크립트 관련된 포스팅을 하는 것 같은데
부쩍 관심이 늘어서 인가?
아니면 한글 정보가 부족함을 채우려고 하는 것인가?

일단 오늘의 스크립트

자바스크립트 변수를 쿠키없이 세션 변수처럼 사용하기

원리는 간단하다

window.name 으로 변수를 설정하면 페이지 리로드가 되도

그 값은 변하거나 리로드 되지 않음을 알 수 있다.

이 특징을 가지고 구현한 것인데.

물론 FireBug 같은 툴로 값을 조작할 수도 있기 때문에

보안적으로 중요한 것들은 사용하지 않는 것이 좋겠다.

하지만 간단하게 세션을 유지 하고자 한다면 이 방법도

상당히 유용한 방법이 아닐까? 싶다.

또한 서버와 브라우저간의 암호화가 가능하다면 혹은

Validate를 위한 값이라면

상황에 맞게 생성해서 사용 하는 것 또한 가능하다.

마지막으로

위 링크의 라이브러리를 보면

crossDomain도 지원해준다.

유훗~

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

구글의 AJAX 천명 이후

천대 받던 자바스크립트의 재조명이 이루어지고

점점 발전하는 하드웨어로

절대 나오지 않을 것만 같았던 구현체들이 속속히 등장하고 있다.

오늘은 가장 단순하면서 널리 사용되는 텍스트 에디터.

vi의 자바스크립트 구현체를 소개하겠다.

위 링크를 열어 보면 단순히 textarea에 수정하고자 하는 텍스트를 넣어두고

파일을 불러들이는 것을 볼 수 있다.


그리고 스타일이 들어 있는을 연결시켜 놓으면 사용 준비 완료이다.

사용 용법은

onfocus="editor(this);"


를 원하는 텍스트에리어에 넣어주면 되는 것이다.


하지만

실제로 사용될 일은 얼마나 있을지 의문이다.

나 같으면

Seaside 같은 프레임워크를 만들 때 사용하는 것이 좋지 않을까? 싶은데.

일단은 블로그 덧글쪽에 붙여보면 재미 있을 것 같은데..

귀차니즘에...

또 하나

Kay의 블로그에서 본 Syntax Highlighter

우리 같이 코드 예시를 많이 사용하는 사람들에게 필요한 스크립트이다.

물론 전에 어디에선가 보았던것 같고 나름 유명해 보이는데..

IT's Lives에서도 플러깅 시켜놔야할 것 같아

이렇게 붙어 간다. ㅎㅎ

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2008/05/15 06:22
    댓글 주소 수정/삭제 댓글
    오 vi, 좀 짱인듯?

윈도우 업데이트 사이트에서 업데이트를 하려고 할 때

언제부터인가 정품인증 모듈을 설치하라고 나온다.

그래서 몇가지는 업데이트 조차 하지 않았었는데

정품인증을 회피하는 방법에 대한 블로깅이 있어서

간단하게 요약해본다.

윈도우 정품인증을 하려고 할 때 주소창에 다음과 같이 쳐보자

아뿔사..

동작하지 않는데

엄한 에러만 뜨고

포스팅 날짜를 보니.. 2006년..

털썩

삽질한거샤?

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

Erlang과 pythone을 통합해보자는 아이디어가 많이들 나오는 것 같다.

그런 글을 읽다가 Erlang으로 만든 웹 프레임워크에 대해 알게 되었다.

아직 깊이 파보지는 않았지만 슬적이라도 봐둘 만한 내용인 것 같다.

으흠

추가로 Erlang으로 만든 웹 서버

멀티코어와 분산 처리( 컴퓨팅 클라우드 ) 시대에 있어서

얼랭이 많은 각광을 받을 것 같은데

실상

어떻게 전개가 될지...

자바쪽에서는 하둡이 떠오르고 있는데

"과연 그렇게 많이 뜰까?" 라는 생각을 지울 수 없다.

얼랭처럼 새로운 패러다임에는 새로운 언어가 필요한 것 아닐까?

ps. 물론 HTML때도 Java때도 이런 예측은 항상 빗나갔다. ㅋ
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 정재훈
    2008/04/29 22:56
    댓글 주소 수정/삭제 댓글
    '얼랭처럼 새로운 패러다임에는 새로운 언어가 필요한 것 아닐까?'

    이 말에 어느 정도 동의합니다.

Photoshop Express

2008/03/31 15:14
Adobe 새로운 서비스

Photoshop Express에 가입했습니다.

제 갤러리 주소는

hyukhur.photoshop.com

입니다.

으흠

오래동안 사용하던 아이디가 있는데 이참에

바꿔야 하나 고민되긴 하네요..

일단 어도브의 선전을 기대합니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'indirect' 카테고리의 다른 글

Erlang과 웹프레임워크와 관련된 움직임들  (1) 2008/04/29
Photoshop Express  (2) 2008/03/31
HTML 5  (0) 2008/03/25
Eola Patch 종료, Flash 연동  (0) 2008/03/20
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 정재훈
    2008/04/01 10:28
    댓글 주소 수정/삭제 댓글
    역시 adobe라 flex인가요? 그 느낌이 많이 나네요.^^
  2. 2008/04/01 17:05
    댓글 주소 수정/삭제 댓글
    네 그 느낌 그대로 가져온것 같습니다.

    회사에서 틈틈히 써봐야겠어요.. ㅋㅋ

    정품을 쓰기엔 너무 부담스러워서..

HTML 5

2008/03/25 14:21

HTML 5

등장 배경

  • HTML5의 시작은 WHATWG (Web Hypertext Application Technology Working Group) 그룹
  • 적용이 지연 되고 있는 XHTML 2.0을 대체할 표준으로 HTML의 업그레이드 버전
  • HTML 4 -> XHTML 1.0 -> DOM2HTML -> HTML 5 -> XHTML 2.0
  • 표준 정의에 모호한 점이 있어서 구현에 어려움이 있었다.

용어 정의

  • Web Application 1.0 : WHATWG에서 만들고 있었던 HTML5
  • Web Form 2.0 : XHTML의 XForms의 영향을 받아 HTML4에서의 form을 Web Form 1.0으로 정의하고 Web Form 2.0으로 확장하였다.

지원 브라우저

New Features

  • 레이아웃 엘리먼트 : 캘린더 컨트롤, 어드레스 카드, 데이터그리드, 게이지 및 프로그레스 미터, 드래그 앤 드롭, 메뉴
  • 프로그래밍 가능한 DOM 확장 서버에서 보내진 DOM도 포함된다.
  • 사실상 표준인 XMLHttpRequest 공인
  • canvas엘리먼트를 이용한 동적 비트맵 그래픽

문법

HTML 5 Sample Code HTML ver. text/html MIME type
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
HTML 5 Sample Code XHTML ver. application/xhtml+xml , application/xml
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

문자 인코딩

  • HTTP 헤더의 Content-type 에 표기
  • 문서 시작 부분에 Unicode Byte Order Mark(BOM) 캐릭터 사용
  • head 엘리먼트의 첫 요소로 meta 엘리먼트를 이용한 charset 속성 정의
    • <meta carhset="UTF-8">
    • 기존의 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

DOCTYPE

  • 기존 DOCTYPE 예 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML V5 의 예 : <!DOCTYPE html>
  • 원래 목적은 초기 HTML은 SGML subset으로 규정되었기 때문에 DTD선언을 하도록 했지만 현재는 사용하지 않고 있다.
  • http://www.w3.org/TR/html4/loose.dtd 사이트에 상당한 부하가 걸리고 있다.

언어

새 요소들

Structure
section 문서 및 어플리케이션 영역 표시, H1~h6와 함께 사용할 수 있다.마치 책의 챕터 같은 부분이 될 수 있다.
header 문서 내 머리말 부분을 표시할 때 사용합니다.
footer 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.
nav 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.
article 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.
A typical blog page today
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>

<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>


<div class="post" id="post-1000571">
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>

<div class="entry">
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>

</div>

<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">&laquo; Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>

<div id="right" class="column">
<ul id="sidebar">
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>

</body>
</html>
A typical blog page in HTML 5
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>

<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>


<article>
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>

<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href="/blog/page/2/">&laquo; Previous Entries</a>
</nav>
</section>

<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</footer>

</body>
</html>
Block Semantic Elements
aside 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다. 노트, 팁, 사이드바, 등 주흐름 외의 정보를 묵어서 표현
figure 그림이나 비디오 같은 블럭 레벨의 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.
dialog 대화 기능을 표시할 때 사용할 수 있습니다.
Inline Semantic Elements
m(ark) 별도로 표시한 컨텐츠를 표시하는데 사용합니다.하지만 em과 다르게 강조되어 표시되지는 않습니다.
time 날짜나 시간을 표시하는 데 사용합니다.
meter 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.
progress 다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.
Embedded media
  • video, audio : 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중 source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.
Interactivity
details 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다. 각주나 주석처리에 용이하다
datagrid 트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. 지금을 HTMLDataGridElement을 통해 조작할 수 있다.
menu type, label, autosubmit 같은 새 속성을 가집니다. 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다. HTML4에서 삭제되었다가 가시 부활
command 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.
Edit menu
<menu type="popup" label="Edit">
<command onclick="undo()" label="Undo"/>
<command onclick="redo()" label="Redo"/>
<command onclick="cut()" label="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()" label="Paste"/>
<command onclick="delete()" label="Clear"/>
</menu>
그 외
  • event-source : 서버가 보낸 이벤트 파악하는 데 사용합니다.
  • output : 자바스크립트로 수행된 결과값을 표시하는데 사용합니다.
  • datalist : input의 list 속성을 위한 요소

추가 속성

  • input : list, autocomplete, min,max, pattern, step
  • 전역 속성
    • contenteditable : 편집 가능 영역
    • contextmenu : 컨텍스트 메뉴를 지정 할 수 있다.
    • draggable : Drag&Drop API에 사용 할 수 있다.
    • irrelevant : 더 이상 의미가 없다.
  • 반복 템플릿 기능용 전역변수
    • repeat
    • repeat-start
    • repeat-min
    • repeat-max

등등

API

  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
    • Firefox, Safari 에서 현재 지원중
    • W3C의 Scalable Vector Graphics(SVG)가 인-브라우저 일러스트레이션을 보여주는 방식 와 다른 방식
    • Javascript가 그릴 수 있도록 빈 공백을 제공한다.
    • OpenGL 스타일
    • simple 3D maze
canvas 예제
<html>
<head>
<title>Canvas demo</title>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById ('hello');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect (25, 25, 50, 50);
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onload="draw ();">
<canvas id="hello" width="100" height="100"></canvas>
</body>
</html>
  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
  • 온라인/오프라인 이벤트 기능.
  • 새 전역 contenteditable 속성과 함께 지원 되는 편집 API 기능.
  • 새 전역 draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
  • 네트웍 API.
  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
  • 다중 메시징 처리 기능.
  • event-source 요소와 함께 사용할 서버 전달 이벤트 기능.

HTMLDocument 확장 (document.)

  • getElementsByClassName
  • innerHTML ( HTMLEelemnt에서 document도 가능)
  • activeElement, hasFocus : 포커스를 확인 가능하다
  • getSelect(): 선택된 객체 반환
  • designMode, execCommand : 문서 편집용

HTMLElement 확장

  • getElementByClassName
  • innerHTML
  • classList : className 접근용
  • has,add,remove,toggle
  • a, area, link : rel과 유사한 relList

Web Form 2.0

  • 브라우저에서 사용할 수 있는 form 위젯들 향상시키는 것이 목적이다.
  • form이 submit되기 전에 Validation 생성자로 체킹이 가능하다.
    • required, min, max 속성 추가
  • DOM에 조건검사 지원
    • validity 속성, invalid 이벤트 추가
  • auto-completion 브라우저가 기억하고 자동 완성을 제공할 수도 있고, list 속성으로 넘겨 줄 수도 있다.
  • 로딩시 자동으로 포커스를 가져오는 autofocus
  • 텍스트-홀딩 방식의 적절한 언어 선택을 위한 inputmode
  • 파일 업로드 : 예상 파일 유형 지정 및 파일 크기 제한
  • Form 요소 템플릿 반복가능
  • new Type : datetime, number, range, email, url, add, remove, move-up, move-down
Web Forms 1.0에서 5~10까지 숫자 입력
<input type="text" id="numValId" name="numVal" onkeyup="checkData()">
<script>
function checkData(){ Data 타입 검증, 최대/최소값 검증}
</script>
Web Forms 2.0 에서의 5~10까지 숫자 입력
<input type="number" min="5" max="10" name="numVal" oninvalid="예외처리">
Template & input
<table>
<tbody>
<tr id="order" repeat="template" repeat-start="3">
<td><input type="text" name="row[order].product" value=""></td>
<td><input type="text" name="row[order].quantity" value="1"></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order">Add Row</button></p>
<p><button type="submit">Submit</button></p>

참고 문헌

크리에이티브 커먼즈 라이선스
Creative Commons License

'indirect' 카테고리의 다른 글

Photoshop Express  (2) 2008/03/31
HTML 5  (0) 2008/03/25
Eola Patch 종료, Flash 연동  (0) 2008/03/20
Google Calendar 와 Microsoft Outlook Sync 시키기 (최종)  (0) 2008/03/10
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

소송이 협의된 결과로

패치가 종료되었다.

4월쯤 패치 나오고

6월쯤 강제 업데이트 될듯..

IE Blog
MSDN

구현 방식은 기존 코드로 돌아갈 것이라고 한다.

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

구글 캘린더를 여러 캘린더를 통합시켜주는 툴로서 사용하기 위해 여러가지 시도를 한 적이 있다.

먼저 아웃룩부터

2007/04/30 - [direct] - Google Calendar 와 Microsoft Outlook Sync 시키기

그리고 iCal

2007/04/13 - [direct] - Google Calendar 와 Apple iCal Sync 시키기

하지만 iCal에서 사용하던

GCALDaemon의 문제와 Outlook 플러그인의 문제로

모든 것을 포기했는데..

2007/05/03 - [direct] - 심각하다 google Calendar, iCal, Outlook..

다시 시도한 것이 가장 많이 사용하는

아웃룩..

2008/01/24 - [indirect] - Sync All My Life in the network



하지만 구글에서 싱크를 지원하기 시작하였다.

http://www.google.com/support/calendar/bin/answer.py?answer=89955

설치도 무척 쉽고 동작 여부는 확인 못해봤지만

아직까지는 잘 동작하고 있다.

기능 역시 무척 단순

딱 내쓰따일이야~

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 허혁

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

스탠포드 대학에서 Mac OSX 용 Cocoa Programming 강의가 열렸다.

한동안 페이지 접속이 원활하지 않다고 싶었는데