아이처럼

신지식 연동 테스트 1

2009-08-25T11:55:19Z

신지식 연동 테스트 1

[tip]IE title bug(플래쉬, anchor)

2009-01-07T17:40:28Z

웹 페이지내에 플래쉬를 임베드 해서 사용하는 경우,

또, anchor를 사용할 경우 ie에서는 타이틀에 이 anchor name들이 들러 붙는 현상이 있습니다.

ie6/7 버그 라고 하네요

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/c91e3dc4-ef05-47f9-b799-db149e3ddc80/

직접 title을 변경하는 방법이네여~

그 법 집어치우라(고은광순)

2008-11-28T10:09:23Z

그 법 집어치우라(고은광순)

한 남자가 임신한 아내를 무릎 꿇게 했다.
사랑하는 여자가 생겼어. 내 빚을 갚아주면 친권 확실히 포기할게. 퍼 퍽 퍽너와 아이들을 한시라도 빨리 떠나겠다니까. 퍼 퍽 퍽

남자는 5년간 아이들을 한 번도 보러오지 않았다. 아이들이 보러가면 핸드폰을 바꾸거나 전원을 꺼놓았다. 남자는 친권을 확실히 확실히 포기했고 법원은 아비의 성을 떼어주었다.남자는 새여자와 깨가 쏟아진다 여기저기 떠벌이고...

어미는 분노와 슬픔 속에서도 엄마성 아이들을 보며 웃었다.찢어진 가슴에 소금을 채우고도 안도의 숨을 쉬었다.

오... 어미가 떠나자 엉성한 법은 후딱 생물학적 아비에게 친권을 던져주었다.폭력? 외도? 도박? 성격파탄? 알콜중독? 무책임? 무능력???법은 알려고도 하지 않았다. 탐욕을 부추기고 뻔뻔함을 부추겼다.

'권리'를 손에 쥐자마자 남자는 자기가 버린 여자의 통장에 자물쇠를 채웠다.통장에 남은 돈을 모두 보고하시라. 내가 투명하게 '관리'해주리라.돈. 돈. 돈. 남은 돈이 얼마냐니까!!! 내가, 내가, 내가 관리한다니까!!!

통장을 관리하던 할머니, 엄마의 엄마는 아이들 신발도 사줄 수 없게 되었다. 소송을 하라고? 변호사를 사라고? 통장이 묶였는데? 두 손발이 묶였는데?아... 무엇보다 억장이 무너져 숨을 쉴 수도 없어요...

통장에 자물쇠를 채우도록 허락한 그 법은 잘못된 법이다. 미련한 법이다. 게으른 법이다, 띨띨한 법이다. 불친절한 법이다.그 법, 집어치우라.

아이들은 '권리'로 키우는 것이 아니라 사랑으로 키우는 것이다.'권리'를 행사하는 재미에 아이들의 울음소리를 듣지 못하는가.'권리'를 행사하는 맛에 아이들을 사랑으로 키워온 사람들의 가슴에 비수를 찌르는가.

못난 법이, 모자란 법이 그런 권력을 주어도 사양해야 옳거늘, 오로지 돌봄이 필요한 자들에게 따스한 에너지를 보태주어야 옳거늘, 법보다 더 중한 책임도 사랑도 팽개치고 주먹 쥐고 떠난 자가 이제 주먹 쥐고 돌아와 제일 먼저 하는 일이 그 법을 앞세워 통장을 움켜쥐는 것인가.

많은 아버지들이 처자식을 부양코자 등이 휘게 일하는데 그동안 하지 않았으니 그것만으로도 감사하게 생각하고, 아이들을 사랑으로 돌볼 할머니와 삼촌이 있으니 감사하게 생각하라.

아이들이 커서 두 발로 찾아오면, 고개 숙여 안아주라.가장 큰 아픔과 슬픔을 가지고 추워 떠는 그들에게 가장 필요한 건,그들을 그대로 존중해주는 것.

하늘처럼, 태양처럼, 바라지도 말고 의심하지도 말고 그저 줄 일이다.
어디, '가족'에게 와서 엉성한 법을 들이대며 족쇄부터 채우려드는가?
그 법, 집어 치우라!
< 출처: 검색하기 href="http://search.daum.net/search?w=tot&q=%B4%D9%C0%BD%C4%AB%C6%E4&nil_profile=newskwd&nil_id=v20081128095910841" target=new>다음카페 한부모 진실방(http://cafe.daum.net/hanbumojinsilbang) >

document.documentElement

2008-09-03T19:28:06Z

document.body => document.documentElement

그냥 �스 모드를 사용하다가 , DTD를 사용하게 되면.

기존에 잘 작동하던 것들이 안 먹힐때가 있다. 이것저것 깨지기도 하고..

DTD를 바꾸기 쉽지 않은 이유다.. ㅡㅜ

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 에서

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

로 DTD를 변경 한 경우, 스크립트에서 알아둬야 할것.

�스 모드에서는 document.body.scrollTop 같은 값을 사용한다.

하지만, loose.dtd 이상인 경우에는 document.body대신, document.documentElement를 사용하면된다.

tag : 자바스크립트, document.documentElement

구글의 브라우저 크롬

2008-09-03T19:22:16Z

http://www.google.com/chrome

아직 많은 테스트를 해보진 않았지만.

첫 느낌은 많이 가볍다 이다.

크로스 브라우징 해야할 또 하나의 브라우저가 생긴건가?/ ㅡㅜ

Ajax 애플리케이션의 보안 위협 극복하기 (한글)

2008-08-14T11:00:12Z

Ajax 애플리케이션의 보안 위협 극복하기 (한글)

매시업 애플리케이션을 보안화 하는 팁과 베스트 프랙티스

http://www.ibm.com/developerworks/kr/library/x-ajaxsecurity.html

euc-kr 페이지에서 utf-8로 form으로 submit을 날릴때,

2008-07-09T11:52:37Z

http://alfresco.pe.kr/blog/115

원래 euc-kr 페이지에서 utf-8로 form으로 submit을 날릴때,

인코딩 문제 때문에 고생했었네요..

이건 파폭에선 잘 먹는데 ie에선 안먹히네요.

그래서 아래 사이트를 이용하여, 아래와 같이 해결했습니다.

document의 charset을 임시로 바꿨다가 다시 되돌려 놓는 방식을 사용하네요 ^^

잘됩니다 ~~~

* 참고 자료

http://alfresco.pe.kr/blog/115

[자바스크립트]배열

2008-06-16T20:24:52Z

참고 도서 : prototype & scriptaculous 인 액션 - 10장 배열로 보다 쉽게

10. 배열

Array는 일반적으로 두가지 형태가 존재한다.

숫자 기반 배열(Numerical Array)들은 순서대로 정렬되며, 배열의 엘리먼트들은 그들의 숫자 인덱스를 통해 추출된다.

연관배열(Associative Array)은 숫자가 아닌 키값을 이용하여 엘리먼트들을 저장하며, 접근한다. 다른 언어들에서는 map, hash, dictionary라고 불려진다.

자바스크립트에서는 내장된 Arrary타입은 숫자기반 배열의 기능을 제공한다.

크기 제한이 없고, 배열의 길이는 런타임에 확장되거나 축소 될 수 있다. 고로. 링크로 연결된 리스트에 가깝다

자바스크립트의 모든 객체에는 실행 시에 이름을 주어 임의적인 속성을 할당 할수 있기 때문에 연관배열로 사용될 수 있다.

따라서 키-값과 같은 쌍으로 저장하기를 원한다며, 그냥 일반적인 객체를 사용할 수 있다.

- Array를 스택 처럼 다루기 : pop(), push(), shift(), unshift()

자바스크립트 Array는 스택처럼 동작한다. 스택은 끝부분에만 엘리먼트를 추가하거나 삭제할 수 있는 아이템들의 컬렉션이다.

push() - 길이를 1증가 시키면서 array의 끝부분에 엘리먼트를 추가한다.

pop() - 배열의 가장 끝부분에 엘리먼트를 제거하여, 해당 엘리먼트를 리턴한다.

shift(), unshift() Array의 앞부분에서 작동한다.

- slice(), splice(), concat()를 사용하여, 자르고 변경하기

1. slice()

var clouds = ['cumulus', 'numbus', 'cirrus', 'cumulonimbus' ];

show("some clouds", clouds);

show("a subset" , clouds.slice(1) );

=> slice() 에 넘겨지는 첫번째 파리미터는 결과 Array에 포함되는 첫번째 엘리먼트의 인덱스이다,

=> numus, cirrus, cumulonimbus

show("another subset", clouds.slice(1, 3));

=> slice() 의 메소드에 두개의 파라미터로 호출할 경우, 두번째 파라미터는 잘라질 마지막 인덱스를 나나태며, 이 인덱스에 해당하는 엘리먼트는 결과에 포함되지 않는다.

=> nimbus, cirrus

2. concat()

두개의 Array를 합쳐서 하나의 'Array 결과로 리턴한다.

var alpha = ['a', 'b']

var alpha2 = ['c', 'd', 'e']

var str = alpha.concat( alpha2 );

show('alpha', str);

=> a, b, c, d, e

3. splice()

splice()의 첫번째 파라미터는 작업의 시작 인덱스이다. 두번째 파라미터는 삭제될 엘리먼트의 개수이다,

splice()는 또한 지워진 엘리먼트들을 대신하는 엘리먼트를 Array에 추가할 수 있도록 해준다.

var clouds = [ 'a', 'b', 'c', 'd']

show('original', clouds);

=> a, b, c, d

var removed = clouds.splice(1, 2, 'e', 'f', 'g');

show('removed', removed);

=> b, c

show('modified', clouds);

=> a, b, e, f, g, d

인덱스의 위치를 나타내는 파라미터들의 뒤에 추가로 세개의 파라미터를 전달하였고,

이 값을 Array에서 제거된 엘리먼트들의 뒤에 추가되었다. 추가되는 엘리먼트의 개수와 삭제되는 엘리먼트의 갯수는 동일할 필요 없다.

tag : 자바스크립트, 배열

구글 스트리트 뷰 업그레이드

2008-06-13T12:44:27Z

구글 지도가 또 좋아 졌답니다.

무서운 구글.. ㅎ

구글 스트리트 뷰 서비스 범위가 넓어졌고,

얼굴 흐리기 기술도 보강되었다고 합니다.

http://heomin61.tistory.com/486

tag : 맵

[웹표준]4대 브라우저별 개발툴

2008-06-11T20:45:01Z

PC를 다시 받으면서 4대 브라우저를 모두 설치했다

오페라랑 사파리는 아직 익숙치 않다..

-각 브라우저별 개발툴-

* IE

- IE Developer toolbar 설치

- http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

* FF

- 파이어 버그 설치

- https://addons.mozilla.org/ko/firefox/addon/1843

* 오페라 9.50 beta : 개발자 도구 내장

- 도구/고급설정/개발자도구 선택

- http://www.opera.com/products/dragonfly/

* 사파리 3.1.1 : 개발자 도구 내장

- 편집/기본설정/고급탭 - 메뉴 막대에서 개발자용 메뉴 보기

저장하다가 로그 아웃되었던거 같은데..

다 날라 간줄 알았는데.. 다시 불러 오넹..

좋구나.. 파워 에디터 ㅋ

tag : 브라우저, 개발툴

[CSS]float을 clear하는 4가지 방법

2008-06-09T00:18:35Z

float을 clear하는 4가지 방법.

출처 : http://naradesign.net/wp/2008/05/27/144/

CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 다단 컬럼 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다. float 속성이 부여된 엘리먼트는 좌측이나 우측으로 배치되면서 주변 콘텐츠의 배치에도 영향을 미친다는 사실은 어렵지 않게 학습되나 ‘float 된 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실’은 몇 번의 경험 또는 선배들의 조언으로 깨닫게 되는 것이지요.

오늘은 float 속성을 이해하고 다단 컬럼형 레이아웃을 시도할 때 주변 엘리먼트들이 원하는 상태로 배치될 수 있도록 이것에 대응하거나 clear 하는 방법에 대하여 공유하고자 합니다. clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성입니다. 만약 Internet Explorer 브라우저를 사용하여 학습을 시도하신다면 일단 멈추시고 표준계열 브라우저에서 먼저 시도해 보세요. CSS 표준 렌더링을 엄격하게 준수하는 Opera와 Safari를 권장합니다. Internet Explorer와 Firefox 브라우저는 float, clear 속성에 관한 버그를 포함하고 있으므로 float과 clear의 표준 렌더링이 어떻게 구현되는지를 학습할 때 도움이 되지 않습니다. 하지만 버그를 해결하는 방법도 소개되어 있으니 안심하세요.

오늘 글의 핵심은 ‘float된 자식 엘리먼트의 높이를 부모 엘리먼트에 반영하도록 대응하는 방법’ 이라고 한마디로 설명할 수 있겠습니다. 부모 떠난 자식을 다시 부모의 품 안으로 돌아오도록 하려면 어떻게 해야 하는지 한번 살펴 보시죠.

float에 아무런 대응도 하지 않은 상태

#container는 부모 엘리먼트이며 #lnb와 #content는 자식 엘리먼트로서 현재 float된 상태 입니다. 아래 예제는 float에 아무런 대응을 하지 않으면 자식 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실을 보여주고 있습니다. #container의 높이가 자식 엘리먼트의 높이를 반영하지 않고 있다는 사실에 주목해 주세요. float에 아무런 대응도 하지 않은 상태의 예제가 준비되어 있습니다.

float에 float으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있습니다. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영합니다. 하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실에 주목해 주세요. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어려운 단점이 있습니다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다. float에 float으로 대응하는 방법 예제.

float에 overflow 속성으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다. float에 overflow 속성으로 대응하는 방법 예제.

float을 빈 엘리먼트로 clear 하는 방법

이 방법은 #container 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다. float을 빈 엘리먼트로 clear 하는 방법 예제. 예제에서는 .clear 라는 빈 엘리먼트를 가시적으로 보이도록 하였지만 실무에서는 보통 .clear {clear:both; height:0; overflow:hidden;} 처리하여 .clear 라는 빈 엘리먼트가 스스로 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다.

float을 가상 선택자 :after로 clear 하는 방법

가장 탁월하다고 생각하는 방법 입니다. 우선 ‘가상 선택자‘라는 개념을 이해하셔야 하기 때문에 약간 상세히 설명드리겠습니다. 여러분들이 익히 알고 계시는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 입니다. ‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있는데요. ‘가상 클래스‘는 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있습니다. :link, :visited, :hover, :active, :focus, :first-child가 가상 클래스에 해당됩니다. 한편 ‘가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있습니다. 심지어 :before와 :after는 HTML문서상에 존재하지 않는 콘텐츠를 출력시키기도 합니다. Hello World Collection이라는 웹 사이트에 신현석님이 ‘Hello World’라는 메시지를 어떻게 출력했는지 살펴보시면 재미있고 이해하기도 쉽죠. 이렇게 가상의 엘리먼트를 생성 #container:after {content:" "} 시킨 다음 display:block; clear:both 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear됩니다. float을 가상 선택자 :after로 clear 하는 방법 예제.

상기 예제로부터 가상 엘리먼트가 스스로 높이를 갖지 않고 화면에 보이지 않도록 처리 하려면 추가적으로 아래와 같이 높이를 제거하고 visibility 속성을 hidden으로 처리 합니다.

#container:after {content:" "; display:block; clear:both; height:0; visibility:hidden;}

하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다.

#container {_height:1%;} /* IE6 및 하위 버전 브라우저 대응 Hack */ *:first-child+html #container {height:1%;} /* IE7 대응 Hack */ #container:after {content:" "; display:block; clear:both; height:0; visibility:hidden;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */

Internet Explorer는 엘리먼트에 높이값을 부여했을 때 min-height 속성을 부여한 것처럼 렌더링하는 특징이 있는데 이때부터 float된 자식의 높이까지 인식하게 되는 버그가 있고 이러한 특성을 이용한 것입니다. Internet Explorer 버그와 관련하여 Wystan님 께서 오류를 지적해 주셨습니다. 정확하게 말해서 #container라는 엘리먼트가 min-height속성을 부여한 것처럼 렌더링 하는 특징은 #container라는 엘리먼트에 height 속성뿐만 아니라 width 속성을 부여하는 경우에도 동일하게 나타납니다. 이것은 IE가 hasLayout이 라는 IE만의 속성을 지니고 있기 때문입니다. 그리고 min-height속성을 부여한 것처럼 렌더링 하는 특징은 IE6 이하 브라우저와 IE7이 조금 다릅니다. #container의 부모 엘리먼트에 높이값이 지정되어 있지 않은경우라면 IE6과 IE7은 min-height 속성을 부여한 것처럼 동일하게 렌더링 하지만 #container의 부모 엘리먼트에 높이값이 지정되어 있는 경우라면 IE7은 min-height 속성을 부여한 것처럼 렌더링 하지 않습니다. 따라서 이 팁은 #container의 부모 엘리먼트에 height값이 명시되어 있는 경우 IE7에서 원하는 형태로 렌더링 하지 않으므로 상황에 맞게 제한적으로 사용하여야 합니다. Wystan님께 감사드립니다.^^

참조

Cascading Style Sheets, level 2 CSS2 Specification - http://www.w3.org/TR/REC-CSS2/
CSS2 규격 한글 번역문 - http://trio.co.kr/webrefer/css2/cover.html
YAML > How Floats Work - http://www.yaml.de/en/documentation/basics/how-floats-work.html
신현석 > CSS Floating and Clearing - http://hyeonseok.com/soojung/web/2005/03/07/123.html

분류: CSS, 웹 디자인, 웹 표준 | 2008년 5월 27일, 6:59 | 정찬명 | |

tag : clear, float

[이클립스]Eclipse에서 Subversion을 사용하는 방법

2008-05-28T10:07:01Z

Eclipse에서 Subversion을 사용하는 방법

CVS랑 사용법은 거의 동일 하단다..

이제 나도 써볼라고.. 하는중..

http://www.ibm.com/developerworks/kr/library/os-ecl-subversion/

[자바스크립트] 객체지향 흉내내기

2008-05-28T00:25:42Z

AJAX의 열풍으로 많은 개발자들이 DOM 조작과 공통 함수 등을 만들며 다뤄왔던 자바스크립트를 다시 보게 되었다. 나도 그런 사람 중의 하나이다. 자바스크립트 핵심 가이드란 책이 정공법으로 자바스크립트를 잘 소개하고 있어서 그 책을 읽긴 했지만, 대개는 알고 있던 내용이라 무척이나 지루한 일이기도 했다. 그러던 중 AJAX in Action을 보면서 Appendix B에 정리된 "JavaScript for object-oriented programmers"을 접하게 되었다. 이런 내용을 미리 알았더라면 좋았을 거라는 생각에 간단히 정리해두고 넘어가고자 한다.

1.1 JavaScript != Java

LiveScript라는 넷스케이프용 스크립트 언어가 정치적인 이유로 자바스크립트로 이름을 바꿨다는 등의 얘기는 중요한 게 아니다. 중요한 건 자바에서 Object가 First-class object이듯, 자바스크립트에서는 Function, 즉 함수가 First-class object란 사실이다. 이것은 자바스크립트가 함수형 패러다임을 갖는 Scheme 등의 언어와 많은 유사성을 갖고 있다는 것을 뜻하며, 객체지향적인 접근을 시도할 때 많은 혼란이 발생할 수 있음을 알게한다. 뿐만 아니라 자바스크립트는 교묘하게 객체지향을 지원하는 듯 보이지만, 그 방식이 프로토타입 기반이다. 안영회님의 글을 참고하자. 자바스크립트에서 객체는 그저 객체처럼 보이도록 위장한 연결 배열(Associative Array)일 뿐이다. 변수의 데이터형을 지정하지 않는다거나, 인터프리터 방식의 언어라거나 하는 건 익히 알고 있는 사실일 것이다. 정리하면 자바스크립트를 이해하기 위해 개념적으로 반드시 알아둬야 할 기본 개념은 4가지이다.

자바스크립트에서 First-class object는 함수(Function)이며, 함수형 패러다임을 가지는 언어에서 축적된 경험을 활용할 수 있다.
자바스크립트는 객체지향 언어라기 보다, 복잡성을 제어하기 위해 객체지향을 흉내낼 수 있는 기능을 가지고 있다.
자바스크립트에서 객체는 연결 배열이 객체처럼 다루어지도록 위장한 것이며, 그러한 위장의 뒷면에는 프로토타입 기반 프로그래밍 이라는 기법이 숨겨져 있다.
자바스크립트는 하나의 변수에 여러 타입의 값을 받아들일 수 있으므로, 데이터형을 명확하게 지정할 필요가 없으며, 인터프리터에 의해 해석된다.

1.2 자바스크립트에서 객체 생성하기

자바스크립트에서 객체를 생성하는 방법은 크게 4가지로 분류할 수 있다.

자바스크립트 기본 방식
JSON 방식
new 생성메소드 이용하기 (메소드를 함께 정의하는 방식)
프로토타입 이용하기 (메소드를 별도로 정의하는 방식)

가. 자바스크립트 기본 방식

이 방식은 자바스크립트에서 기본적으로 사용되는 객체 생성 방법이다. 인스턴스를 만들어서 새로운 속성이나 함수를 해당 객체에 언제든 추가할 수 있도록 하는 것이 특징이다.

var book = new Object();
book.title = "sample";
book.chapter1 = new Object();
book.chapter1.title = "title01";
book.chapter1.page = 24;
book.chapter2 = new Object();
book.chapter2 = {title: "title02", page: 10};
book.toString = function() {
var message = "Outline: " + book.title + "\n" +
"Chapter 1: " + book.chapter1.title + "\n" +
"Chapter 2: " + book.chapter2.title + "\n";
return message;
}

자바스크립트의 객체가 연결 배열이라는 것을 활용하면,

book.title = "sample";

과 같은 코드를 아래와 같이 배열처럼 정의할 수도 있다.

book['title'] = "sample";

함수도 마찬가지인데, 그때 그때 정의할 필요없이 이미 구현되어 있는 함수를 재사용하는 것도 가능하다. 이때 주의할 점은 아래와 같이 함수 객체를 할당하는 것이므로 괄호를 생략한다는 것이다.

book.func = pre_exist_func;

나. JSON 방식

JSON은 자바스크립트 객체표기법(JavaScript Object Notation)의 약어로, 쉼표를 구분자로 해서 배열 값을 한번에 설정하는 기능을 이용한 방식이다. 자바스크립트에서 객체는 중괄호를 사용해서 콜론으로 구별된 키:값의 쌍을 쉼표를 활용해서 연속적으로 초기화할 수 있고, 할당되는 값은 다시 객체이거나 함수일 수 있다. JSON 방식을 이용하면, 복잡한 구조의 객체를 한번에 만들어 낼 수 있지만, 생성자에 익숙해진 자바 개발자들에게는 쉽게 익숙해지지 않는 방법이다.

book2 = {
title : "sample",
chapter1 : {
title : "title01",
page : 24
},
chapter2 : {
title : "title02",
page : 10
},
toString : function() {
var message = "Outline: " + book2.title + "\n" +
"Chapter 1: " + book.chapter1.title + "\n" +
"Chapter 2: " + book.chapter2.title + "\n";
return message;
}
};

다. new 생성메소드를 이용하기 (메소드를 함께 정의하는 방식)

자바 개발자에게 익숙한 생성자를 흉내낼 수 있는 것이 생성메소드를 만들어, new 키워드와 함께 이용하는 방식이다.

function MyBook(title, chapter1, chapter2) {
this.title = title;
this.chapter1 = chapter1;
this.chapter2 = chapter2;
this.toString = function() {
var message = "Outline: " + this.title + "\n" +
"Chapter 1: " + book.chapter1.title + "\n" +
"Chapter 2: " + book.chapter2.title + "\n";
return message;
}
}

function Chapter(title, page) {
this.title = title;
this.page = page;
}

이 방식을 이용하면, 아래와 같이 자바 개발자들에게 익숙한 방식으로 객체를 생성할 수 있다.

var mybook1 = new MyBook("sample", new Chapter("title01", 24), new Chapter("title02", 10));

이 방식의 단점은 객체 인스턴스마다 함수가 매번 새로 만들어진다는 것과, 의도하지 않은 클로저(Closure)가 만들어진다는 것이다. 클로저에 대해서는 다음에 살펴보도록 한다.

라. 프로토타입 이용하기 (메소드를 별도로 정의하는 방식)

new 생성메소드 방식의 단점을 해결한 것이 프로토타입을 이용하는 방식이다. 프로토타입(prototype)은 자바스크립트 객체가 지니는 기본 속성으로, 생성 메소드를 정의한 다음에만 사용할 수 있다. 프로토타입을 이용하면, 객체를 생성했을 때 해당 함수가 생성된 객체에 자동으로 연결되도록 할 수 있다. 이런 프로토타입의 기능을 이용하면 상속의 개념을 흉내낼 수 있는데, 이를 통해 웹브라우저 등에 내장된 기본 객체의 기능을 확장할 수도 있게 된다.

function SafeMyBook(title, chapter1, chapter2) {
this.title = title;
this.chapter1 = chapter1;
this.chapter2 = chapter2;
}

SafeMyBook.prototype.toString = function() {
var message = "Outline: " + this.title + "\n" +
"Chapter 1: " + book.chapter1.title + "\n" +
"Chapter 2: " + book.chapter2.title + "\n";
return message;
}

function Chapter(title, page) {
this.title = title;
this.page = page;
}

아래의 참고자료 그림을 클릭하면, 모달 다이얼로그와 유사한 이미지 팝업이 생기는데 이것은 LightBox라는 스크립트 라이브러리이다. LightBox 스크립트를 다운받으면, 2개의 자바스크립트 파일이 존재하는데, 해당 자바스크립트 파일의 소스를 열어서 확인해보자. 모두 4번째에 소개한 프로토타입 방식을 사용해서, 객체를 생성해 조작하고 있음을 확인할 수 있을 것이다.

자바스크립트 자체는 함수를 이용해야 한다거나, 반드시 객체를 이용해야 한다거나 하는 제약이 없다. 그러나 AJAX의 인기에 힘입어 우리가 다뤄야 하는 자바스크립트는 점점 많아지고, 복잡해지고 있다. 이러한 복잡성의 제어를 위해 자바스크립트에서도 객체 지향적인 처리가 필요해졌고, 그것을 가장 잘 표현하는 방식이 프로토타입을 이용한 객체 생성 방법이므로 잘 익혀두는 것이 좋겠다.

참고자료 1. AJAX in Action - 에이콘(Manning)
참고자료 2. 자바스크립트 핵심 가이드 (JavaScript The Definitive Guide: 4th covers JS1.5) - 한빛미디어(O'Reilly)

2006/110/10 추가글
- First-class Object의 Wikipedia 정의
- First-class Function의 Wikipedia 정의

출처 : http://seal.tistory.com/28

tag : 자바스크립트