[웹표준] 웹표준/HTML 검사 툴 (FireFox 용 플러그인)

Software Development/Web Front 2009. 10. 13. 01:01
웹 개발 하다보면, 요즘들어 웹표준을 따라야 하는 경우가 많다. 거기에다가 웹접근성 까지.. 머리아퍼 머리..
왜이리 아키텍트는 할게 많은건지, 기술만 쫒아가다가 세월 다 흘러갈 것 같다.

이런 우리들을 위해 감사하게도, 많은 툴들이 있는데 (사실 IE 용이나 별도의 전용 툴은 아직 사용해보지 못하고..^^)
그중, FireFox 에 Add-On 해서 쓸 수 있는 부가기능들이 몇가지 있어, 오늘은 비교나 좀 해봐야겠다.

http://addons.mozilla.com 에 가서, validator 로 검색하면 여러가지가 나오는데, 그중, 아래 Validator 들을 사용해보겠다.

툴들을 테스트 하기 전에, FireFox 3.5에 기본개발도구를 설치해둔다.

* FireBug - 웹개발시 디버깅용 필수
* IE Tab - IE 로 페이지를 볼 수 있다 (IE View 보다 인기 많음)
* IE View - IE 로 페이지를 볼 수 있다
* Screengrab - 화면 캡춰용
* Web Developer - 무엇보다, 소스보기>변환된소스보기 에서, Ajax 나 JavaScript 통해 변환된 페이지 소스 볼 수 있다
* ColorZilla - 컬러피커

위 툴 들은, 아래 툴과는 상관 없으나, 거의 Must-Have 아이템이다. 이제 본격적으로 Validator 를 살펴본다.

1. HTML Validator 0.8.5.8

웹 개발도구 카테고리 중, FireFox AddOns 사이트에서 순위가 꽤 높은 편이다.
설치하고 FireFox 재시작 하면,


위와 같은 화면이 뜬다. 두가지 중에 하나 혹은 둘다 병행하도록 설정할 수 있는데, HTML Tidy 방식이, WAI Level 1,2,3 의 웹접근성 까지도 검사해주므로, 일단 HTML Tidy 방식으로 선택하면 된다.

그런데, W3C 의 온라인 HTML 검사기와 동일한 레벨로 체크하고 싶으면, SGML 을 선택한다. 단, 웹접근성 검사를 해주지 않고, 자동으로 수정해주는 Cleanup 기능도 동작하지 않는다.

설치를 완료하면,



위와 같이, Task 영역에 아이콘이 생긴다. 위 예에서는 페이지에 경고가 있는 경우이고, 문제가 없는 페이지에서는 녹색 체크 아이콘이 뜬다.

경고를 더블클릭 하면, 아래 같은 화면이 뜬다.

경고나 오류를 볼 수 있는 화면으로, 소스코드도, JavaScript 가 실행된 최종 DOM 을 기반으로 하여 구성된다.
경고나 오류, 정보에 클릭하면 해당 위치의 라인으로 바로 이동한다. 경고에 대한 약간의 도움말도 바로 오른쪽에 나와주니 참으로 편리하다.

또 좋은 기능중에 하나가, "페이지 청소.." 기능이다. 이 버튼을 누르면, 어느정도 자동으로 정리해준 코드를 미리 볼 수 있다.


위에 보이는 탭 처럼, 정리된 HTML, 원본 HTML 을 소스로 하여, 각각 미리보기 까지 가능하다.
"파일>다른이름으로 저장" 메뉴를 통해, 현재 보이는 소스를 HTML 로 저장하여, 다른 검증 툴에서도 활용 가능하다.

마지막으로, "선택사항..." 버튼을 누르면, 같은 소스를 다른 알고리즘(HTML Tidy, SGML, 병행)으로 바로 바꾸어 재검사 할 수 있다.


참으로 쓰기 편하고, 소스보기도 JS 나 AJAX 등으로 변경된 결과를 반영하여 보여주기 때문에 활용성이 아주 뛰어나다.
(단, 아래와 같이, Status Bar 의 아이콘에서 우측클릭하여, 고급>지금검증... 을 눌러야 현재 JS 등으로 변경된 Page 를 Validate 한다.)



2. Total Validator 6.0.2

웹 기반의 Validation 을 수행해주는 툴이다.
플러그인이 설치되면, Status Bar 우측에, Tv 아이콘이 보인다.


우측클릭 하자마자, 바로 설정 메뉴가 뜬다. 여기에서, Validate 옵션을 선택할 수 있다.


Validation 옵션이며, HTML Validation, 접근성, 깨진링크, 스펠링체크, 스냅샷 찍기 까지 지원된다.
(스냅샷 찍기는 영 기능이 꽝이다. 시간도 오래 걸리고, 결과를 웹에서 보여주는데, 서버에 캡춰파일을 업로드 하고, 이를 결과 페이지에서 보여주는 방식이다. 스냅샷이 여러장 올라가는데, 그러다보니 파일 업로드/다운로드로 인해 속도가 상당히 느리다)


다양한 형식의 XHTML / HTML 의 Validation 을 지원한다.


웹접근성도 여러종류 지원한다.


결과 화면은 위와 같이 웹페이지로, totalvalidation.com 사이트를 통해 보여진다.
그러다보니, 전체적으로 많이 느린 편이다.

게다가, 동적으로 변경 된 소스코드를 검사할 수 없다. JS 나 Ajax 로 변경된 페이지는 검사할 수 없다는 단점이 있다.
웹페이지를 통해 결과를 보아야 하고, 파일 업로드와 서버의 분석시간이 오래걸리는것도 단점이다.
하지만, 다양한 표준에 맞추어 검사할 수 있다는 장점은 있다.


이외에도, 여러 Validator 가 있지만, 1번의 HTML Validator 가 써본 바로는 가장 괜챦았고, 다른 HTML Validator 들은, 웹서비스에 파일을 업로드 해서, 서버에서 검증하는 방식이 많이 있다.



반응형

'Software Development > Web Front' 카테고리의 다른 글

SyntaxHighliter 2.0 사용  (0) 2009.07.24
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

변수명 표기법 종류

Software Development/JavaSE&EE 2009. 10. 12. 15:44

Naming Rule

종류

  1. PascalCasing : 단어가 시작 때 마다 대문자를 사용
  2. camelCasing : 첫단어는 소문자. 그 다음 단어부터는 대문자를 사용
  3. Underscore : 단어 마다 '_'로 구분
  4. sHungarian : 각 변수마다 특성을 앞에 기술

세부사항

1. PascalCasing

파스칼 표기법은 단어의 시작을 모두 대문자로 사용하는것이다. ex) ThisIsAVariable

2. camelCasing

카멜은 영어로 낙타다. (-_-a) 낙타와같은 모양이라서 이렇게 이름을 지었다고하는데... 정 말일까? 첫단어의 머리는 소문자로 그외에는 모두 파스칼 표기법과 같다.
ex) thisIsAVariable

3. Underscore

Underscore는 '_' 요거다. 이것으로 단어와 단어사이를 구분한다.
ex) this_is_a_viariable
ex2) This_IS_A_Variable

4. sHungarian

헝가리안 표기법은 헝가리 출신의 Microsoft사의 개발자 Charles Simony에 의해 사용 되었으며 변수명 앞에 그 타입을 써주는 방법이다. 사용하지마라는 사람들도 많이 있다.
ex) sThisIsAVariable
ex2) sThis_is_a_variable

접두어 설명
f flag
c counter
l long
p pointer
u unsigned int

반응형

'Software Development > JavaSE&EE' 카테고리의 다른 글

Commons Logging 과 Log4J  (0) 2009.10.16
JSP 페이지를 직접 URL로 접근하지 못하게 하려면? (꽁수)  (0) 2009.10.16
OAuth - Open Source 보안인증 API  (0) 2009.09.23
RuntimeException 의 특성  (0) 2009.08.12
log4j 기본 익히기  (1) 2009.07.26
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

[AIX] 네트워크 MAC Address 알아내는 방법

Software Development/OS 및 Container 2009. 10. 12. 10:38
Linux는 ifconfig -a 해서 볼 수 있는데, AIX 는 안되더라..
AIX 는, 장치 정보를 보는 명령어를 통해서 볼 수 있다.

lscfg -vp

위 명령어로, 모든 장치 정보를 볼 수 있다.

이중에, 네트워크 카드 부분을 보면,

 ent1             U787A.001.1111111-P1-T6          2-Port 10/100/1000 Base-TX PCI-X Adapter (14108902)
 
 2-Port 10/100/1000 Base-TX PCI-X Adapter:
       Network Address.............000XXXXXXXXX
       ROM Level.(alterable).......DV0210
       Hardware Location Code......U787A.001.1111111-P1-T6

위와 같이 나오는데, 이중에, Network Address 부분이, 2자리 씩 끊어서 00-0X-XX... 과 같이 MAC Address 가 된다.
반응형

'Software Development > OS 및 Container' 카테고리의 다른 글

Linux 에서 연결된 USB 장치 확인하기  (0) 2009.12.17
Ubuntu 에서 Service 실행하는 방법  (0) 2009.12.16
서버 별 Stack 과 Module Map 보는 툴  (0) 2009.12.15
[Linux] 네트워크 시간 동기화 하기  (0) 2009.11.25
[AIX] 사용자 추가 후 FTP Access Dinied 나는 경우  (0) 2009.11.15
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

[Trac] 필수 플러그인 설치 및 설정 #3

Software Development/Dev Tools 2009. 10. 11. 23:30

Trac 에는, 많은 플러그인들이 있고, 많은 3rd Party 프로그램 통합플러그인 (Eclipse Mylyn Connector 포함), 매크로, 플러그인, 패치(Trac 소스를 수정한 것), 스크립트, 테마, Ticket Workflows 들을,

Trac-Hacks 사이트에서 다운로드 받을 수 있다.

1. IniAdmin 플러그인

Trac 의 설정파일인 <trac설치디렉토리>/conf/trac.ini 파일을 웹으로 관리할 수 있도록 해주는 플러그인.
trac.ini 에는, DB 를 비롯한 각종 설정이 존재한다. IniAdmin 플러그인 설치해서 쉽게 설정하도록 하자.

가. trac 0.11 용 zip 파일을 다운로드 받는다.
나. 다운로드 받은 파일 압축을 푼다.
다. 아래와 같이 설치한다.

python setup.py install

자동으로 설치가 완료된다.

라. Apache 를 Restart 하고, trac 프로젝트 사이트에 Admin 메뉴로 들어가면 아래와 같이 플러그인이 설치되었음을 확인한다


마. "Apply Chages" 버튼을 눌러서 적용한다. 그러면, Administration 메뉴에, trac.ini 메뉴가 추가되는 것을 확인할 수 있다.


2. AccountManager 플러그인

기본적으로, Trac 에서는, Http Authentication 을 사용한 로그인방식을 사용하고, 관리자가 수동으로 htpasswd 에 계정 등록 하고, trac 에 해당 계정을 다시 한번 설정해준다. (이전 #2 에서 설정한 방법)

AccountManager 플러그인으로, 웹화면 기반의 로그인과 웹을 통한 사용자 계정 관리가 가능해진다.

다운로드 버전과, ez_install 을 사용하는 방법이 있는데, ez_install 사용시에, 내부적으로 svn 을 사용하므로, 아직 svn 을 설치하지 않았으므로, 다운로드 버전으로 설치한다.

다운로드 압축 푼 디렉토리에서,

python setup.py install

을 실행하면 설치된다.


Apache 를 Restart 한 후에, Adminitration 메뉴에서, 위와 같이, tracaccountmanager 가 나오면 성공이다.

AccountManager 플러그인 내에는 많은 기능들을 Enable 시킬 수 있는데, 이중
- AccountManagerAdminPage
- AccountManager
- HtpasswdStore
- AccountModule
등을 포함하여 선택하면 된다.

Enable 을 완료했으면, Admin 메뉴에 "Account" 메뉴가 추가된 것을 볼 수 있다.
Configuration 을 눌러, htpasswd 경로 등을 설정한다.


설정이 제대로 되었으면, Users 메뉴에서, 사용자를 추가/삭제 할 수 있다.


3. Timing & Estimation 플러그인

일정 예측과 작업시간 관리하는 기능의 플러그인이다. Must-Have 플러그인이므로 반드시 설치한다.

1. trac-hacks.org 사이트에서 trac 0.11 용 TimingAndEstimation 플러그인을 다운로드 받는다
2. 압축을 풀고,
python setup.py install
명령을 실행시켜 설치한다.
3. <python home>/Scripts/trac-admin.exe <trac 환경 디렉토리> upgrade 를 실행하여, DB 스키마를 업그레이드 해야한다.
trac-admin E:\TeamBuild\trac_project\teamjoon upgrade
* 만약, no upgrade necessary 나오면, 그냥 다음 진행하고, 플러그인 enable 시킬 때 에러가 나면 그때 다시한 번 한다.
4. Apache 를 재시작 한다
5. admin 화면에서 플러그인을 Enable 시킨다.

최종 완료하면, 메뉴 상단 탭에 "Management" 라는 탭이 새로 생성된다.



여기까지, 아주 기본적인 플러그인을 설치해봤다. 이외에도, 엄청나게 많은 플러그인들이 존재하므로, 향후 하나씩 사용해보도록 하자.
반응형

'Software Development > Dev Tools' 카테고리의 다른 글

[Trac] 권한 설정하기  (0) 2009.10.16
[trac] 기본 에디터 대체 플러그인  (0) 2009.10.14
[Trac] Ticket 삭제하려면..  (0) 2009.10.14
[Trac] Trac 설정 및 새 프로젝트 #2  (0) 2009.10.11
[Trac] Trac 설치하기 #1  (0) 2009.10.10
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

[Trac] Trac 설정 및 새 프로젝트 #2

Software Development/Dev Tools 2009. 10. 11. 01:42
 trac 설치 과정이 좀 복잡했다. 무려 7가지나 되는것들을 설치해줘야 한다. 그것도 Windows Installer 를 사용하니 그나마
과정이 조금 단순화 된 것이다.

 지금부터는 trac 을 처음 사용하기 위해 관련한 설정을 해보도록 한다.
 여기서는 teamjoon이라는 이름의 테스트 프로젝트를 신규 프로젝트로 한다.


1. 새 Trac 프로젝트 생성

 <python디렉토리>\Scripts\trac-admin.exe 를 통하여 신규 프로젝트를 생성할 수 있다.

 그 전에, trac 환경 디렉토리(projenv)를 생성해야 한다.
 E:\TeamBuild\trac_project 디렉토리를 trac 프로젝트 루트 디렉토리로 사용하겠다.
 그리고, 하위 디렉토리에, 프로젝트 이름으로 teamjoon 이라는 디렉토리를 만든다.

E:\TeamBuild\python2.5.4\Scripts\trac-admin.exe  E:\TeamBuild\trac_project\teamjoon initenv

그럼 이때부터 여러가지를 물어온다.

Project Name [My Project]> teamjoon
...
Database connection string [sqlite:db/trac.db]> (그냥 엔터)
...
Repository type [svn]> (SVN 사용할 것임. 그냥 엔터)
...
Path to repository [/path/to/repos]> E:\TeamBuild\repository\teamjoon
...

모두 끝내면 다음과 같이 메세지 나온다.

---------------------------------------------------------------------
Warning: couldn't index the repository.

This can happen for a variety of reasons: wrong repository type,
no appropriate third party library for this repository type,
no actual repository at the specified repository path...

You can nevertheless start using your Trac environment, but
you'll need to check again your trac.ini file and the [trac]
repository_type and repository_path settings in order to enable
the Trac repository browser.

---------------------------------------------------------------------
Project environment for 'teamjoon' created.

You may now configure the environment by editing the file:

  E:\TeamBuild\trac_project\teamjoon\conf\trac.ini

If you'd like to take this new project environment for a test drive,
try running the Trac standalone web server `tracd`:

  tracd --port 8000 E:\TeamBuild\trac_project\teamjoon

Then point your browser to http://localhost:8000/teamjoon.
There you can also browse the documentation for your installed
version of Trac, including information on further setup (such as
deploying Trac to a real web server).

The latest documentation can also always be found on the project
website:

  http://trac.edgewall.org/

Congratulations!

위 메세지 중, Warning 은 우선 무시하자. SVN Repository 에 아무런 내용이 없어서 그런다.
이는 나중에 SVN 설정하면서 해결한다.

모두 끝나면, E:\TeamBuild\trac_project\teamjoon 디렉토리에 디렉토리와 파일들이 생성되었는지 확인한다.


2. Apache 에 VirtualHost 추가

Apache 에 Virtual Host 를 추가해서, <ContextRoot>/trac 이하의 URI에 대하여, trac 이 핸들링하도록 한다.

아래 예에서는, tractest.mrjoon.com 도메인을 추가해서, 해당 도메인 밑의 /trac 이하의 URI (Location) 은,
trac 이 처리하도록 하고, /trac/<아무거나>/login 에 대해서는, 사용자 인증을 htpasswd 파일을 이용하여 하도록 설정한다.

 <VirtualHost *:80>
  ServerAdmin korean44@empal.com
    ServerName tractest.mrjoon.com
    ErrorLog "logs/dummy-host.mrjoon.com-error.log"
    CustomLog "logs/dummy-host.mrjoon.com-access.log" common

  #--- URL 에 /trac 있으면, mod_python 이 처리하도록 함
  #--- E:\TeamBuild\trac_project 디렉토리가 기본 디렉토리가 됨
  <Location /trac>
   SetHandler mod_python
   PythonHandler trac.web.modpython_frontend
   PythonOption TracEnvParentDir E:\TeamBuild\trac_project
   PythonOption TracUtiRoot /trac
  </Location>
  
  #--- trac/XXX/login 요청 시 인증 필요함
  <LocationMatch "/trac/[^/]+/login">
   AuthType basic
   AuthName "Trac"
   AuthUserFile E:\TeamBuild\repository\teamjoon\htpasswd
   Require valid-user
  </locationmatch>
</VirtualHost>

위 설정 중에, <VirtualHost > 의 속성 중에, DocumentRoot 가 지정되어있지 않는것에 주의하자.
DocumentRoot 를 지정하면, Location 지정한 것들이 동작하지 않는다~!


3. Admin 계정 추가

위에서, E:\TeamBuild\repository\teamjoon\htpasswd 파일 에 사용자 계정이 등록된다라고 설정을 했다.
아직 htpasswd 파일이 없으므로, 만들어 넣어야 한다.

Apache 의 bin 디렉토리에서 아래 명령을 실행한다.
htpasswd.exe -c E:\TeamBuild\repository\teamjoon\htpasswd admin

명령을 실행하면, 패스워드를 물어보고, 위 디렉토리의 htpasswd 파일에 admin 계정을 생성한다.

다음으로, 위에서 추가한 admin 계정을 Trac 의 admin 권한의 계정으로 등록해야 한다.
아래와 같은 명령을 <trac설치디렉토리>/Scripts 디렉토리에서 실행한다.

trac-admin.exe E:\TeamBuild\trac_project\teamjoon permission add admin TRAC_ADMIN

trac-admin 의 명령형식은,
trac-admin <trac 환경디렉토리> <command> ... 이다.

permission 추가 명령은,
permission add <User> <Rule> 이다.
TRAC_ADMIN 은, 관리자 룰이다. 이외의 다양한 룰은, http://trac.edgewall.org/wiki/TracPermissions 에서 Help 를 참고할 수 있다.

설정 완료한 후에, http://tractest.mrjoon.com/trac/teamjoon 으로 접속하여, login 을 admin 으로 하면, 화면 상단 메뉴에, Admin 메뉴가 보일 것이다.

반응형

'Software Development > Dev Tools' 카테고리의 다른 글

[Trac] 권한 설정하기  (0) 2009.10.16
[trac] 기본 에디터 대체 플러그인  (0) 2009.10.14
[Trac] Ticket 삭제하려면..  (0) 2009.10.14
[Trac] 필수 플러그인 설치 및 설정 #3  (0) 2009.10.11
[Trac] Trac 설치하기 #1  (0) 2009.10.10
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

[Trac] Trac 설치하기 #1

Software Development/Dev Tools 2009. 10. 10. 03:10

Trac 은, 이슈 관리 + 심플한 프로젝트 관리 시스템으로, Eclipse 의 Mylyn 플러그인과 함께 사용하여
더욱 강력한 기능을 발휘한다.

자세한 것은 향후 사용하면서 논해보도록 하고, 우선 trac 설치하기 작업부터 시작한다.

Trac 을 설치하기 위해서는, 먼저 설치되어야 할 것들이 있다.

1. Apache HTTPD 설치

[사이트] http://httpd.apache.org/ 

HTTPD 서버를 다운로드 받아 설치한다


설치를 완료하고 나서, Windows Service 에 등록되고,  apache 가 동작하는것을 확인한다.


위와 같이 localhost 접속해서, It works! 나오면, apache 동작하는것임.

2. python 설치

Trac 이 Python 으로 만들어졌으므로, Python 을 설치해줘야 한다. 2.5 버전대 받으면 된다.
최신 버전은 2.6 버전과 3.x 버전이 있으나, 아래의 mod_python 이 Windows 용 바이너리의 경우
Python 2.5 용 밖에 없어서, 2.5 용으로 다운로드 받는다.

[다운로드] http://www.python.org/download/

3. mod_python 설치

Apache 에서 Python 실행하기 위한 모듈을 설치한다. 3.3 대 버전 받으면 된다.
HTTPD 2.0 과 2.2 는 mod_python 3.3 버전대를, HTTPD 1.3 은 2.7 버전대를 받는다.

Windows 용 바이너리는, Python 버전과 Apache 버전에 맞는 mod_python 을 다운받아야 한다.

[사이트] http://www.modpython.org/

설치 완료 후에,
Apache 설치 디렉토리의 conf/httpd.conf 파일에서

LoadModule python_module modules/mod_python.so
라인을 추가해준다. 그리고, Apache 를 재시작 시켜서 정상적으로 뜨면, 모듈 설치가 된것이다.

4.Genshi 설치
Python 을 지원하는 Velocity 나 Freemarker 와 같은 템플릿 엔진이다. Trac 설치 시에 필요하다.

[사이트] http://genshi.edgewall.org/
[다운로드] http://genshi.edgewall.org/wiki/Download

Genshi 0.5 에, Python 2.5 용으로 다운로드 받아 설치한다.

5.pysqlite 섩치
Trac 은 SQLite DB 를 사용한다. pysqlite는 Python 으로 sqlite DB 에 접근하기 위한 라이브러리 이다.
MySQL 과 MariaDB 를 지원하지만 아직 실험적 단계라고 한다.  MySQL 을 사용할때는, http://sf.net/projects/mysql-python 에서 MySQLDb 를 다운받아서 진행한다.

SQLite 는, Python 설치 시에 함께 설치되므로, 별도 설치할 필요는 없다.

[사이트] http://trac.edgewall.org/wiki/PySqlite
[다운로드] http://oss.itsystementwicklung.de/trac/pysqlite/wiki

Python 2.5 용으로 다운로드 받으면 된다. 현재, pysqlite 2.5.5 버전을 설치하였다.

6.setuptools 설치
Python 으로 만든 프로그램을 자동 다운 로드 및 설치 지원하는 툴이다.
Trac 의 플러그인을 설치할 때 유용하게 사용할 수 있다.

"egg" 확장자를 가지는 Python 패키지를 설치할 수 있다.

[사이트] http://peak.telecommunity.com/DevCenter/setuptools
[다운로드] http://peak.telecommunity.com/dist/ez_setup.py

python 으로 작성된 프로그램으로, Installer 가 있는게 아니다. 다운받은 파일을
특정 디렉토리에 저장한다.

그리고, python 디렉토리를 Path 에 추가하고,
>python ez_setup.py
하여, 실행시킨다.

그러면, setuptools egg를 자동으로 다운로드 하고, 설치해준다.

7.trac 설치
trac 을 설치한다. Windows 용 Installer 다운받아서 설치하면 된다. 현재 최신버전은 1.11.5 버전이다.

[사이트] http://trac.edgewall.org/
[다운로드] http://trac.edgewall.org/wiki/TracDownload

8.SVN 설치 및 Repository 생성

SVN 은 1.6.5 버전을 설치한다.

설치했으면, E:\TeamBuild\repository\teamjoon 디렉토리 만들고, Repository 초기화 한다

9.SVN-python 모듈 설치

Python 용 SVN 모듈을 설치한다. Python 을 2.5 버전 설치했으므로, 2.5 용으로 다운로드 한다

------------

이렇게 해서, trac 의 설치를 완료한다.
다음은 trac 의 신규 프로젝트를 생성하고 본격적으로 사용해 본다.
반응형

'Software Development > Dev Tools' 카테고리의 다른 글

[Trac] 권한 설정하기  (0) 2009.10.16
[trac] 기본 에디터 대체 플러그인  (0) 2009.10.14
[Trac] Ticket 삭제하려면..  (0) 2009.10.14
[Trac] 필수 플러그인 설치 및 설정 #3  (0) 2009.10.11
[Trac] Trac 설정 및 새 프로젝트 #2  (0) 2009.10.11
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

OAuth - Open Source 보안인증 API

Software Development/JavaSE&EE 2009. 9. 23. 10:08

OAuth - 오픈 API를 위한 인증 표준

May 14th, 2008

오픈 API를 설계할 때 가장 고민되는 부분이 인증이다. 그 이유는 '보안' 때문이다. 일반적인 웹사이트에서는 사용자가 직접 자신이 설정한 암호를 통해 암호를 발급받은 사이트에서 직접 인증한다. 제3자가 이 암호를 알기는 쉽지 않다. 하지만 매시업은 이야기가 전혀 다르다. 대부분의 매시업 애플리케이션들이 사용자를 대신해 인증을 수행한다. 그리고 사용자에게 인증에 필요한 정보를 요구한다.

 

매시업 개발자들에게 내 암호를 고스란히 알려줘도 될까? 절대 안된다. 내 데이터에 대한 권한은 철저하게 내 관리하에 있어야한다. 여기서 고민이 시작된다.

 

48/182645566_104bea290c.jpg

사용자가 안전하게 매시업을 사용할 수 있도록! (출처)

 

그래서 많이 사용하는 방식이 개발자에게 애플리케이션키를 발급받게 하고, 사용자는 해당 키를 가진 매시업에 권한을 부여하는 사용자키를 발급받는 식이다. 대부분의 오픈API 제공자들이 이런 방식을 택하고 있다. 하지만 새부 구현을 하나하나 들여다보면 모든 사이트들이 자신들만의 방법이 있다. 일례로 스프링노트는 (농담으로) ias-deepblue 방식을 사용한다. 이는 HTTP Basic Authentication을 사용하되, 사용자명에 사용자 오픈ID, 비밀번호에 애플리케이션키.사용자키를 넣는 방식이다. 어떤 곳은 HTTP 매개변수에 만료 시간이 정해진 토큰을 담기도 한다. 구현 방식을 크게보면 모두 같은데 조금씩 다른 구현체들 탓에 손실이 발생한다.

 

  • 오픈 API 개발자: 보안을 일일이 고려해서 인증 방식을 직접 설계해야 한다. 매우 신중하게.
  • 매시업 개발자: 모든 API를 사용하기에 앞서 그들의 인증 방식을 공부하고 이해해야한다.
  • 매시업 사용자: 매시업을 사용하는 일이 안전한 것인가 고민해봐야 한다.

 

1066963360.pngDRY를 믿는 우리에게는 악몽같은 일이다. 이 때 생각나는 좋은 단어가 있다. 표준! 그래, 우리에게 필요한 것은 많은 사이트에서 재사용할 수 있는 표준 방식이다. OAuth가 답이다! OAuth는 기존 API 인증 방식들의 베스트 프랙티스를 모아 하나의 안으로 만든 것이다. OAuth를 도입하면,

 

  • 오픈 API 개발자: 선배들이 보안과 여러가지 사용자 경험을 고려해 설계한 내용을 토대로 짧은 시간에 더 나은 API를 설계할 수 있다.
  • 매시업 개발자: 하나의 표준만 이해하면 오픈 API를 쉽게 사용할 수 있다. 진입 장벽이 낮아진다.
  • 매시업 사용자: 믿고 쓸 수 있다.

 

공식 사이트의 소개문에 한번 읽어볼만한 내용이 있어서 인용한다.

 

Is OAuth a New Concept?

 

No. OAuth is the standardization and combined wisdom of many well established industry protocols. It is similar to other protocols currently in use (Google AuthSub, AOL OpenAuth, Yahoo BBAuth, Upcoming API, Flickr API, Amazon Web Services API, etc). Each protocol provides a proprietary method for exchanging user credentials for an access token or ticker. OAuth was created by carefully studying each of these protocols and extracting the best practices and commonality that will allow new implementations as well as a smooth transition for existing services to support OAuth.

 

오픈마루는 앞으로 OAuth를 적극 지원할 예정이다. 기존의 모든 API가 다 바뀔 수는 없겠지만, 지금 새로운 오픈 API를 설계하고 있다면 OAuth를 꼭 한번씩 고려해주길 바란다.

 

OAuth 띄엄띄엄 보기

간단하게 OAuth를 살펴보자. 스프링노트 API를 사용해 매시업을 개발하려한다.

 

일단, 애플리케이션을 등록해야한다.

 

그림_1.png

 

그렇게 하면 컨슈머 토큰과 시크릿을 얻을 수 있다. 이 값은 매시업 자체를 인증하기 위한 토큰이다. 나 너네한테 등록한 그 매시업인데 인증 좀 하게 도와줄래?라고 물을 때 이 컨슈머 토큰을 제시하면 된다.

 

그림_2.png

 

인증의 시작은 리퀘스트 토큰을 얻는 것이다. 하나의 세션을 새롭게 여는 것이라고 봐도 무방하다.

 

view plaincopy to clipboardprint?
  1. %w(rubygems oauth oauth/consumer).  
  2.   each{|l| require l}  
  3.   
  4. @consumer = OAuth::Consumer.new \  
  5.   CONSUMER_TOKEN, CONSUMER_SECRET,  
  6.   :site => "https://api.openmaru.com"  
  7.   
  8. req_token = @consumer.get_request_token  
  9. # => #<OAuth::RequestToken:0x527114 @token="...", @secret="...">  

 

이제 다음은 사용자에게 정중하게 허락을 구해야 한다. 당신의 데이터에 제가 접근해도 되겠습니까?

 

view plaincopy to clipboardprint?
  1. open_browser req_token.authorize_url  
  2. # => "https://api.openmaru.com/oauth/authorize?oauth_token=t2eh..."  

 

그림_3.png

 

사용자가 허락하면 이 때 매시업은 권한을 담은 토큰을 받아올 수 있다. 바로 액세스 토큰이다.

 

view plaincopy to clipboardprint?
  1. access_token = req_token.get_access_token  
  2. => #<OAuth::RequestToken:0x78223 @token="...", @secret="...">  

 

이제 액세스 토큰을 가지고 제한된 리소스를 사용할 수 있게 되었다.

 

view plaincopy to clipboardprint?
  1. @consumer.options.merge!(:site => "https://api.springnote.com")  
  2.    
  3. access_token.get("http://deepblue.springnote.com/pages/1154148.xml?domain=deepblue").body  
  4. => "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<page xmlns=\"http://api.springnote.com\">\n..."  

 

굵게 표시한 용어들과 위의 4단계만 이해하면 쉽게 오픈 API를 사용할 수 있다. 정리해보자.

 

  1. 애플리케이션 등록 => 컨슈머 토큰
  2. 세션 시작 => 리퀘스트 토큰
  3. 사용자 동의
  4. 액세스 토큰 획득

 

언제나 그렇듯 나도 매시업이 번창하는 리믹스할 수 있는 웹을 꿈꾼다. OAuth가 꿈을 이뤄줄 하나의 발판이 되면 좋겠다.

 

참고자료

 

Posted by deepblue

3 Responses to “OAuth - 오픈 API를 위한 인증 표준”

  1. 우주 Says:
    May 7th, 2008 at 12:07 PM openapi 를 사이트에 지원 할려고 하는 차에 중요한 인증부분의 해법을 알려주시네요 감사합니다. 혹 추천하는 ruby 인증 프로그램 이라들지 사용법 좀 알려주실수 있을까요?
  2. deepblue Says:
    May 7th, 2008 at 12:07 PM 루비라면 위 예제코드처럼 oauth gem을 사용하시면 쉽게 구현하실 수 있습니다. 프로바이더 구현은 http://humbroll.com/103 이 글이 도움이 되실 것 같습니다.
  3. 스프링로그 Says:
    October 21st, 2008 at 12:47 PM
반응형

'Software Development > JavaSE&EE' 카테고리의 다른 글

JSP 페이지를 직접 URL로 접근하지 못하게 하려면? (꽁수)  (0) 2009.10.16
변수명 표기법 종류  (0) 2009.10.12
RuntimeException 의 특성  (0) 2009.08.12
log4j 기본 익히기  (1) 2009.07.26
Java 의 Package Name 내부에 있는 파일 접근 방법  (0) 2009.07.26
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

Struts2 강좌 - 2. Struts2 태그라이브러리 사용방법 (OGNL 과 기본지식)

Software Development/Frameworks 2009. 8. 16. 23:41
1. Action, Interceptor, ValueStack 과 Struts Tag 와의 관계
 Tag 의 Value 에 들어가는 문자열은, 무조건 객체를 지칭하는 표현식이다 그냥 value="abc" 하면, ValueStack 의 루트객체(액션컨텍스트)의 getAbc() 가 Call 된다.!

 %{} 표현식
  <s:textfield label="%{getText('label.postalCode')}" name="postalCode"/> 처럼 %{함수} 를 통하여, Action 의 함수를 직접 Call 할 수 있다.
   getText() 는, ActionSupport 를 상속받으면 쓸 수 있으며, Resource Bundle 에서 문자열을 가져오는 기능을 한다.

2. 태그의 Value 속성은 객체다
 <s:textfield name="city" value="SEOUL"/> 되어 있으면, "SEOUL" 이라는 문자열이 값이 되는게 아니고, OGNL 로 인식하여, Action 의 getSeoul() 이라는 함수로 프로퍼티를 가져오려 한다.

  문자열로 쓰려면, <s:textfield name="city" value="%{'SEOUL'}"/> 과 같이 써야 한다. 아니면 value="'SEOUL'" 로 쓸수도 있으나, 앞의 방법을 따르라~

  모든 value="" 안의 값은 기본적으로 Struts2 에서는 OGNL 로 인식하므로, <s:if test="age > 19"/>...</s:if> 처럼 사용하면 된다. 위의 경우에는, <s:if test="%{age > 19}"/>...</s:if> 도, boolean 식으로 표현해도 똑같아 진다.

3. 표현식 언어의 표기법

 JSTL 표준
 표준 Request Context 에 저장된 자바 빈 객체 참조 법
 <p>사용자 이름: ${user.username}</p>

 ValueStack 에 저장된 프로퍼티 참조법
 <s:textfield name="username"/>

 ValueStack 에 저장된 프로퍼티 참조법 2
 <s:url id="ko" action="hello">
<s:param name="request_locale">ko</s:param>
 </s:url>
 <s: a href="%{ko}">Korea</s:a>

 Session 컨텍스트에 있는 프로퍼티 참조법
 <s:property value="#session.user.username" />

 정적인 Map 을 사용하는 방법
 <s:select name="checkedName" list="#{'username' : '이름1', 'username' : '이름2'}"/>

4. OGNL 기본

 OGNL 은, 컨텍스트를 Map 형태로 관리한다. Map 에는
  - application
  - session
  - value stack (루트)
  - request
  - parameters
  - attr (page -> request -> session -> application 순으로 검색)
 의 컨텍스트들이 존재하며, 루트를 제외한 다른 컨텍스트는, #컨텍스트키.프로퍼티 방법으로 접근하고, 루트 컨텍스트(Value Stack 에 있는 Bean)의 프로퍼티는 #없이, 프로퍼티 이름으로만 접근한다.

 액션은 Value Stack 에 저장되므로, Action 의 abc 라는 프로퍼티는
 <s:property value="abc"/> 
 로 가져올 수 있고,

 세션컨텍스트에 username 이라는 프로퍼티는,
  <s:property value="#session.username"/> 으로 가져올 수 있다.
  <s:property value="#session['myKey']"/>
  <s:property value="#request['myKey']"/>
 와 같이 쓸 수 있다는 말이다.

 [Action 클래스에서 컨텍스트 가져오기]
  Action 클래스에서는 ActionContext.getContext().getSession().put("myKey", myObject); 
 와 같이 Context 를 접근할 수 있다.

5. OGNL 사용 예

 myObject 가 루트 객체로 설정되어있다고 가정할 때,

 #myObject.property : myObject.getProperty() 호출됨
 #yourObject.property : youtObject.getProperty() 호출됨
 property : myObject.getProperty() 호출됨
 
[Value Stack 의 상황에 따른 접근]

 현재 Value Stack 에 다음과 같은구조로 객체가 들어가 있을 때

 animal (name, species) <-- stack 의 top [0]
 person (name, salary)
 아래와 같이 접근할 수 있다.

 species --> animal.getSpecies() 호출
 salary --> person.getSalary() 호출
 name --> animal.getName() 호출

 만약, stack 의 특정 번째 top 의 객체의 프로퍼티 가져오려면,
 0.name : animal.name() 호출
 1.name : person.name() 호출
 과 같이 한다.

[static 프로퍼티 / 메소드 참조]
 OGNL 은 static 프로퍼티와 메소드를 호출하는 방법을 제공한다.

 @example.ClassName@myStaticProperty
 @example.ClassName@myStaticMethod()

 와 같이 사용한다.

[파라미터, 요청(request), 세션, 어플리케이션 컨텍스트 참조 방법]

 #parameters['key'] 또는 #parameters.key
  request.getParameter("key") 호출

 #request['key'] 또는 #request.key
  request.getAttribute("key") 호출

 #session['key'] 또는 #session.key
  session.getAttribute("key") 호출

 #application['key'] 또는 #application.key
  key 값으로 저장된 ServletContext 의 속성값 참조

 #attr['key'] 또는 #attr.key
  Page, Request, Session, Application 순으로 속성 값 검색하여 일치하는 키 값 출력





반응형

'Software Development > Frameworks' 카테고리의 다른 글

Struts2 강좌 - 1. Struts2 개념 잡기  (0) 2009.08.13
AppFuse 설치 중 equinox 어쩌고 에러 날 때  (0) 2009.08.07
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

Table 밖에서 TR, TD 쓰면

Software Development/Mobile 2009. 8. 15. 00:50
모든 브라우저 (IE,FF,Chrome,Opera) 그냥 무시된다.
<body> 
 
제품이름 : <tr> 
    <td class="tdLabel"></td> 
    <td 
><label id=""></label></td> 
</tr> 
 
MP3 플레이어
<br/> 
제품 모델번호 : <tr> 
    <td class="tdLabel"></td> 
    <td 
><label id=""></label></td> 
</tr> 
 
MP3-070701
	
</body>

위와 같은 페이지는 그냥
제품이름 : MP3 플레이어
제품 모델번호 : MP3-070701
요렇게 표시된다.
반응형

'Software Development > Mobile' 카테고리의 다른 글

안드로이드 개발 #3 - 앱 실행하기  (0) 2016.02.08
안드로이드 개발 #2 - 새 프로젝트 살펴보기  (0) 2016.02.06
안드로이드 개발 #1 - Android Studio 설치 및 새프로젝트 생성  (0) 2016.02.06
retainCount 값에 의존하지 말기  (1) 2010.10.12
P3P 와 쿠키 사용 관계  (0) 2010.02.25
블로그 이미지

Good Joon

IT Professionalist Since 1999

,

Struts2 강좌 - 1. Struts2 개념 잡기

Software Development/Frameworks 2009. 8. 13. 01:10

doc-ver.0.1

1. 서론
 Struts2 프레임워크는, JavaEE 기반의 웹어플리케이션 개발 시에, Model 2 기반의 개발을 쉽게 할 수 있도록 MVC 패턴의 적용을 도와주는 프레임워크이다. 실상 MVC 패턴 적용이라고 하기는 하기만, Struts2 는, View 와 Controller 정도의 분리를 돕는데 주된 기능을 한다.

 자세한건 시간나는대로 문서를 업데이트 해가며 내용을 추가 해 보겠다.

2. Hello Struts2 해보기
 가. 두가지 방식의 Configuration

  Struts2 는 XML 방식, Java SDK 1.5 이상에서 지원하는 Annotation 방식 의 두가지 방식을 통하여 Configuration 을 가능하게 한다. 개념적으로, 아래 그림처럼 가능하다는 얘기이다.


   XML 방식에서 사용되는 XML 예제는 아래와 같다.
<action name="Login" class="manning.Login">    <result>/AccountPage.jsp</result>    <result name="input">/Login.jsp</result></action><action name="Registration" >    <result>/Registration.jsp</result></action><action name="Register" class="manning.Register">    <result>/RegistrationSuccess.jsp</result>    <result name="input">/Registration.jsp</result></action>

   Annotation 방식의 예제 코드는 아래와 같다.
@Results({    @Result(name="input", value="/RegistrationSuccess.jsp" )    @Result(value="/RegistrationSuccess.jsp" )})public class Login implements Action {    public String execute() {        //Business logic for login    }}

 위 예제에 대한 설명은 이후에 자세히 설명하도록 하고, 지금은, XML 과 Annotation 방식으로 Struts2 의 설정이 가능하다는 것만 알고 넘어가자. 어떤것을 쓸것인가는 개발하기 나름이다. 그러나 Struts2 개발진은 Zero-Configuration 을 지향하고 있다. 무수히 많아지는 XML 파일을 관리하기가 너무 번거롭기 때문이다.

 Annotation 방식으로 가게 되면, 한가지 전제가 따라야 할 듯 하다. 바로, 패키지 및 액션명의 네이밍 룰 정의가 일관되고 견고해야 하며, 모두들 이를 확실히 지켜야 한다는 점 이겠다. 만약 액션명에서 패키지명을 유추하기 힘들거나, 반대로, 패키지명에서 액션명을 유추하기 힘들다면, 가독성과 유지보수성이 많이 떨어질 듯 하다.

 나. package
  package 는 상당히 중요하며, 전체적인 struts2 의 Action, result 등의 구조를 파악할 수 있다. 

  namespace 속성
   URL과 맵핑하는데 사용된다. 아래와 같은 struts2 XML 정의가 있을 때,
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="chapterTwo" namespace="/chapterTwo" extends="strutsdefault">
		<action name="Name">
			<result>/chapterTwo/NameCollector.jsp
			</result>
		</action>
		<action name="HelloWorld" class="manning.chapterTwo.HelloWorld">
			<result name="SUCCESS">/chapterTwo/HelloWorld.jsp
			</result>
		</action>
	</package>
</struts>

namespace="/chapterTwo" 는, 아래와 같은 URL Mapping 구조로 해석될 수 있다.



-------
  Action 인터페이스 상속
   Action 인터페이스는 상속받아도 되고 안받아도 된다. 상속 받으면, SUCCESS, ERROR, NONE, ERROR, INPUT, LOGIN 등의 미리 정의 된 문자열 상수를 사용할 수 있고, public void execute() 함수정의를 필수로 Override 한다라는 잇점 정도가 있다. 

  ValueStack 과 JavaBean 으로의 Action
 Form 데이터 날라오면, ParameterInterceptor 에서, ValueStack 을 만들고, Action 의 setter method 를 호출하여 값을 설정해준다.
반응형

'Software Development > Frameworks' 카테고리의 다른 글

Struts2 강좌 - 2. Struts2 태그라이브러리 사용방법 (OGNL 과 기본지식)  (0) 2009.08.16
AppFuse 설치 중 equinox 어쩌고 에러 날 때  (0) 2009.08.07
블로그 이미지

Good Joon

IT Professionalist Since 1999

,
반응형

공지사항

최근에 받은 트랙백

글 보관함

달력

«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

티스토리툴바