[HTML]autocomplete="off" 사용하기..

참으로 오랫만에 쓰는 나 스스로의 포스팅이다.. 내가 햄의 블로그를 다 보고나도, 지속적으로 보긴 하겠지만.. 무튼 그러고 났을 때 나 스스로 이건 포스팅 해야겠다는 것들을 리스트로 적어둔 것이 있는데.. 해당 부분은 간단해서 휘리릭 올리려고 한다..

BCCard 에 근무하면서 처음으로 웹 보안, 웹 표준에 따른 소스 수정을 해본적이 있었다.. 그 때 처음으로 접하게 된것이었는데.. 그게 바로 autocomplete="off" 이었다..

보통 인터넷에서 찾아보면, 폼 자동 완성기능이라고 하는데 이 부분이 사용자 개인 정보 보호 문제 관련으로 인해서 웹 보안에서 문제가 생긴다는 것이었다.. 나도 처음 겪은것이라서 이런게 있는지도 몰랐는데 그렇다고 하더라..

그래서 우선 해당하는 소스들을 다 아래와 같이 수정했다..
<form id="" name="" method="" autocomplete="off">

원래는 autocomplete 속성이 없지만, 추가를 해준 것이다..
딱 봐도 느낌이 오듯 자동완성 기능을 사용 못하도록 하겠다 이건데.. 이게 특별한것은 아니지만, 우선 그 때당시[2012년] 나는 웹 보안이란 것에 대해서 무지한 상태였고, 그렇다보니 단순한 속성 하나 추가한것도 엄청 신기했단 말이지..

지금이야 저런 문제 혹은 관련 문제가 발생하면, "아 그거구나.." 하지만.. 누구든 첨부터 모든 것을 다 아는것은 아니니까.. 내 머리속에서 그래도 내가 개발하면서 새로운것을 알게 된 원인이자 결과였기 때문에 기록을 남겨둔다..

[Book] 프로 스프링 2.5..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

프로 스프링 2.5 - 아너반 차크라보티 외 지음, 김홍회 외 옮김/위키북스

스프링을 공부해 볼려고 "웹 개발자를 위한 스프링 2.5 프로그래밍"을 보고나서 이건 뭔소리여~ 하고 다시 선택했던 책입니다. 레포런스북이라고 할 수 있습니다. 레퍼런스북들이 양도 많고 해서(이 책고 1100페이지 쯤 되죠.) 읽기도 만만치 않고 하지만 한권 있으면 언제든 찾아봐서 든든하다고 해야할까요... 그래서 전체를 세부사항을 다 볼 수 있어서 좀 좋아(하려고)하는 편입니다.

얼마전 스프링 3.0 GA가 공개되었지만 이 책은 2.5에 대한 대부분의 이야기를 해주고 있습니다. 간단한 스프링의 소개부터해서 Hello World 소스, 스프링의 대표적 큰 특징중 하나인 IoC와 DI, AOP와 퍼시스턴즈... 거기에 추가로 잡스케쥴링, 메일, 동적언어, 트랜잭션, 스프링MVC, 웹플로, 세큐리티까지... 제가 아직 스프링에 대해서 많이 알지는 못하지만 스프링을 이용해서 개발하면서 필요한 것들은 대부분 주제로 삼아서 설명해 주고 있습니다.

이 책을 읽기 시작하면서 바쁘기도 하고 워낙 다른거 벌려놓은게 많아서 정말 오랫동안 읽었습니다. ㅠ..ㅠ 오래읽다보면 집중력도 떨어지고 흐름도 끊겨서 좋지 않은데 어쩔 수 없이 그렇게 되었네요. 무엇보다 좋은 점은 예제코드를 아주 충실하게 지원하고 있다는 것입니다. 아무리 설명해도 가장 이해하기 좋은 것은 실제 돌아가는 예제소스일텐데 이 책은 원서의 소스를 국내환경에 맞게 이클립스용으로 모두 만들어서 독자들이 쉽게 예제를 돌려 볼 수 있도록 해놓았습니다.(예제는 Maven이 있어야 합니다.) 저는 예제까지 다 따라해보면서 읽지는 않았지만 나중에 필요한 기능들을 참고할때 큰 도움이 될 듯 싶습니다. 예제만 충실해도 책의 값어치가 많이 올라가죠. ㅎ

번역도 괜찮은 편이고 책의 설명도 상세하게 잘 되어 있다는 느낌입니다. 전 무식하게 읽었지만 스프링개발하시면서 참고용으로 쓰기에는 괜찮을듯 하네요.

개인적으로 올 후반기에 스프링을 공부해 보려고 했는데 어찌어찌 하다보니 결국 스프링은 별로 보지 못하고 계속 자바스크립트만 만지고 있는 상황이긴 하지만 그래도 관심을 가지고 있으니 스프링 관련한 용어들은 많이 익숙해 진 편입니다. 이 책까지 읽으면서 느낀 것은 스프링 말로 설명하기에는 만만치 않은 기술이라는 생각입니다. 개발이란것이 모두 그렇겠지만 기존의 익숙치 않던 많은 개념들이 들어가서 책보면서 아~ 하고 이해할 만한 것이 아닌데다가 스프링의 방향상 대부분의 구현에 있어서 개발자에게 많은 선택권을 주고 있기 때문에 이거할때는 이렇게 한다! 라고 명시적으로 하기가 쉽지 않은 느낌입니다...(잘못된 느낌일지도 ㅡ..ㅡ) 소위말해서 "무작정따라하기"식의 가이드하기가 어려운 기술이란 생각이 들고 뭐 그렇게 할 수는 있겠지만 스프링의 방향이 그런것이 아니기 때문에 설명하고자 하는 사람도 그렇게 제한적인 방법으로 설명하는 것은 원하지 않는 것 같습니다.

스프링의 핵심을 설명하자면 어떻게 사용해야되는지 좀 설명이 묘연해지고 사용하는 것을 설명하자면 핵심을 잘 모르니까 일일이 공부하고 외우는 것이 어렵게 느껴지는 것 같습니다.(개인적으로는 장기적으로 전자가 나은 방향이라고는 생각하지만요.) 개발이 다 그렇지만 결국은 코딩....

내년엔 스프링에 더 가까워지는 해가 되었음 좋겠군요.(갈수록 바보가 되어가는 듯한 기분이... ㅠ..ㅠ)

[JS]JSON 객체를 String으로 변환하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

전에 JSON Text를 JSON Object로 변환하기라는 포스팅을 올린적이 있는데 sopp님이 "반대로 JSON Object를 JSON Text로 변환할 수 있는 방법이 있는지 궁금합니다"라는 댓글을 주셨습니다. JSON객체를 스트링으로 변환할 일이 뭐가 있을까 생각해봤는데 저로써는 로그 등을 위해서 찍어보는 용도로 밖에는 생각이 안나더군요. 어쨌든 질문을 테스트 하다 보니 생각했던거랑은 다른것도 있고 해서 포스팅으로 남깁니다.

이전 포스팅과 동일하게 아래와 같은 JSON객체가 있다고 하겠습니다.

{ id:'Outsider', sex:'male' }

JSON객체를 출력해 보겠습니다.

JavaScript

var obj = { "id":"outsider", "sex":"male" };
alert(obj); // [object Object]
alert(typeof obj); // object

객체라는 것만 알 수 있고 내용을 알 수가 없습니다.(console.log(obj)로 찍으면 Firebug에서 똑똑하게도  Object id=outsider sex=male라고 찍어줍니다. IE8용 콘솔은 alert와 똑같이 찍어주는군요. )

JavaScript

var obj = '{ "id":"outsider", "sex":"male" }';
alert(obj); // { "id":"outsider", "sex":"male" }
alert(typeof obj); // string

이번에는 스트링 객체로 만들어서 그냥 찍어보았습니다. 스트링이기 때문에 그대로 나오는군요. 당연한 결과로 보입니다.

스트링 변환할 때 가장 쉽게 생각할수 있는데 문자열을 이어붙히는 것입니다. 자바스크립트는 형타입이 없기 때문에 문자열을 이어붙힘으로써 쉽게 String으로 만들 수 있습니다.

JavaScript

var obj = { "id":"outsider", "sex":"male" };
obj = obj + ""
alert(obj); // [object Object]
alert(typeof obj); // string

type은 string으로 변경되었지만 객체 자체를 출력하니까 스트링의 내용이 찍히지 않고 Object가 찍혀버립니다. 원래 스트링이었던 객체와는 다르게 동작하는군요. 자바스크립트 프레임워크같은 경우는 사용하기에도 유용하지만 이런 경우에 소스 참고하기에도 유용합니다. (머리좋은 놈들은 어떻게 했나 보는거죠 ㅎ)

prototype.js에는 toJSON()이라는 함수가 있고 JSON객체를 String으로 만들어주는 기능을 가지고 있습니다. 그래서 toJSON의 소스를 열어보았습니다.

JavaScript

toJSON: function(object) {
    var type = typeof object;
    switch (type) {
        case 'undefined':
        case 'function':
        case 'unknown': return;
        case 'boolean': return object.toString();
    }

    if (object === null) return 'null';
    if (object.toJSON) return object.toJSON();
    if (Object.isElement(object)) return;

    var results = [];
    for (var property in object) {
        var value = Object.toJSON(object[property]);
        if (!Object.isUndefined(value))
            results.push(property.toJSON() + ': ' + value);
    }

    return '{' + results.join(', ') + '}';
},

위처럼 정의되어 있습니다. 12라인 까지는 JSON객체가 아닌 객체로 들어왔을때의 예외처리라고 할 수 있을듯 합니다. 14라인 부터가 실제 스트링으로 만들어 줍니다. prototype.js내에서 각 객체에도 toJSON이 추가되어 있기 때문에 내부에서도 toJSON()을 여러번 쓰고 있습니다. toJSON때문에 좀 복잡해 보이지만 실제로는 간단하다고 할 수 있습니다. 전달받은 JSON객체를 루프돌면서 이름으로 값을 가져오고 이름과 값을 array에 넣은 나음에 나중에 콤마로 join시켜 버린것입니다. 문자열을 +로 이어붙히지 않고 array를 이용할 경우 속도차이가 많이 나죠.

JavaScript

function JSONtoString(object) {
    var results = [];
    for (var property in object) {
        var value = object[property];
        if (value)
            results.push(property.toString() + ': ' + value);
        }
                
        return '{' + results.join(', ') + '}';
}

prototype.js를 안쓰시는 분들이 요즘은 많아서 prototype.js용 소스를 걷어버렸습니다.(걷으면서 예외처리도 같이 걷었군요. 그런부분까지 신경쓰긴 좀 귀찮아서.. ㅎ 말 그대로 JSON객체가 string으로 되도록...

JavaScript

var obj = { "id":"outsider", "sex":"male" };
obj = JSONtoString(obj);
alert(obj); // {id: outsider, sex: male}
alert(typeof obj); // string

따옴표는 빠져서 나오는군요... 나중에 다시 JSON객체로 변환할 때 엄격하게 체킹하려면 따옴표 있어야 되는거 아닌가 싶은 생각도 들지만(문법에는 "가 있는걸로...) 그런 추가는 별로 어렵지 않을것 같아서 여기까지만 정리합니다.

ps) 2010.08.11
간단한 JSON에 대한 처리만 고려했던 부분인데 궁금이님의 댓글로 다시 보니 JSON 포맷에는 value부분에 JSON외에도 많은 타입이 들어갈 수 있기 때문에 모든 JSON에 대한 처리를 해주려면 위에 작성한 메서드 만으로는 부족합니다. prototype.js의 경우에는 기본객체들을 확장하기 때문에 타입별로 toJSON 메서드를 제공하여 적절히 변환가능하도록 한 것으로 보입니다.

JSON사이트에서는 json2.js라는 JSON관련 처리를 위한 공식 메서드를 제공하고 있는데 이곳에서 JSON객체를 String으로 변환하는 JSON.stringify() 메서드를 제공하고 있고 이것을 사용하면 모든 타입에 대응한 JSON객체를 String으로 변환할수 있습니다.

[Tool]Eclipse에 m2eclipse 설치후 "Maven Integration for Eclipse JDK Warning" 경고..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

프로젝트 빌드툴인 Maven을 사용하기 위해서 이클립스 Maven 플러그인인 M2Eclipse를 설치한 후에 이클립스에서 빌드할때마다 다은과 같은 메시지가 떴습니다.

Maven Integration for Eclipse JDK Warning
The Maven Integration requires that Eclipse be running in a JDK, because a number of Maven core plugins are using jars from the JDK.

Please make sure the -vm option in eclipse.ini is pointing to a JDK and verify that Installed JREs are also using JDK installs.

원래 이클립스는 JRE만 있어도 동작이 가능한데 Maven 코어의 플러그인들이 JDK의 jars를 사용하고 있기 때문에 JDK가 필요하므로 eclipse.ini에서 -vm옵션으로 JDK를 설정하라고 하네요. 여기저기 찾아보니 제목처럼 이건 error이 아니고 warning이기 때문에 Maven을 사용하지 않으면 "Do not warn again"을 사용해도 문제가 없다고 합니다. 전 Maven을 쓸려고 설치한거니까 이 경고를 해결해야 했습니다.

경고에 나온대로 이클립스 폴더 루트에 있는 eclipse.ini를 수정해 주면 됩니다.  아래는 저의 eclipse.ini 입니다.

--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.0.200.v20090519
-startup
plugins/org.eclipse.equinox.launcher_1.0.201.R35x_v20090715.jar
-product
org.eclipse.epp.package.jee.product
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
-vm
C:\Program Files\Java\jdk1.5.0_16\bin\
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

빨간색으로 표시한 부분이 JDK설정을 위해서 새로 추가한 부분입니다. -vm으로 설치된 JDK의 bin경로를 설정해 준 뒤에 이클립스를 재시작하면 경고가 사라집니다. 이걸 해결하자 이클립스 기동한다음에 "Initializing Java Tooling"가 Deadlock에 걸렸는지 1%위로 올라가지 않고 계속 돌아가는 문제가 있었는데 그것도 사라져버렸군요.(같은 원인이었는지는 잘 모르겠네요.)

제대로 설정되었는이 이클립스내에서도 확인 가능합니다.(3.5버전인 Galileo를 사용중입니다.) 메뉴에서 [Help] - [About Eclipse] 를 실행하면 아래와 같은 이클립스 정보가 나타납니다.

아래의 "Installation Details"버튼을 클릭합니다.

Configuration탭 부분에 가면 eclipse.ini에서 설정한 내용이 정상적으로 등록되어 있는 것을 확인 할 수 있습니다.

[jQuery]jQuery로 outerHTML처럼 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Javascript에는 innerHTML이 있습니다. 선택한 Dom객체의 내부 HTML을 가지고 있는 프로퍼티라고 할 수 있습니다. (Javascript가 아니라 DOM에 있는건가요? 흠..)

Html

<div id="testdiv">
    <a href="#">test</a>
</div>

예를 들어 위와같은 소스가 있을때 testdiv의 innerHTML은 <a href="#">test</a> 입니다. testdiv 엘리먼트를 선택하고 innerHTML을 하면 a태그부터 가져올 수 있지만 div태그는 가져오지 못합니다. 자기 자신은 innerHTML에 포함되지 않죠. 간단한 소스야 가능하지만 DOM트리가 복잡할때는 div부터 HTML태그를 가져오려면 좀 난감할 때가 있습니다. jQuery로는 $("#testdiv").html()을 하면 a태그만 나옵니다.

그래서 IE에서는 자신의 태그까지 리턴해 주는 outerHTML이란 녀석이 있지만 IE에서만 지원하기 때문에 사실상 별로 의미는 없습니다.

이거 때문에 꽤 고민하고 있었는데 jQuery를 이용해서 간단하게 할 수 있더군요.

$("...").clone().wrapAll("<div/>").parent().html();

위의 HTML에서는 $("#testdiv").clone().wrapAll("<div/>").parent().html();를 하면 됩니다. 선택한 엘리먼트 집합의 복사본을 만들고 wrapAll을 이용해서 div로 전체를 감싸버린 뒤 parent()로 div로 올라가서 그안에 html()을 가져오면 $("#testdiv") 자체의 HTML을 가져올 수 있습니다.(jQuery 체인의 강력함이 느껴지는 순간이군요. ㅎ)

[Tool]Eclipse에서 서버구동시 Timeout 에러..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

항상 이클립스에서 간단한 것들만 돌려봤더니 서버실행시(Run On Server) Timeout 오류를 처음 겪어 봤습니다. 사실 서버설정에 이런 내용이 있는줄도 모르고 있었군요. ㅠ..ㅠ (여기서는 Tomcat 6.0버전을 사용했습니다.)

"Starting Tomcat v6.0 Server at localhost' has encountered a problem.
Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.

위와 같은 오류가 나타납니다. 45초내에 서버시작을 못했다고 server editor에서 수정하라고 하는군요.

Servers에서 이클립스에 설정되어 있는 서버를 더블클릭합니다.

그럼 서버설정에 대한 내용이 위와 같이 나타납니다. 여러가지 설정을 할 수 있게 되어 있군요.

Timeouts부분을 보면 Start에 대한 Timeouts에 대한 시간이 기본값인 45초로 설정되어 있는 것을 볼 수 있습니다. 너무 오래해두면 잘못되었을때 무장적 기다릴수도 있지만 정상적인데 필요하다면 여기서 시간을 늘려주면 됩니다.