'Software Development/Web Front'에 해당되는 글 2건

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

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

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

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


위 툴 들은, 아래 툴과는 상관 없으나, 거의 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 로 변경된 페이지는 검사할 수 없다는 단점이 있다.
웹페이지를 통해 결과를 보아야 하고, 파일 업로드와 서버의 분석시간이 오래걸리는것도 단점이다.
하지만, 다양한 표준에 맞추어 검사할 수 있다는 장점은 있다.

웹페이지 돌아다니다 보면, 소스코드 내용 중 문법이 Highlighting 되어서 이쁘게 나오는걸 보곤 한다.

이렇게..

class TestClass extends Object {
	public TestClass() {}
	
	public testFunction(String param) {
		System.out.println("Syntax Hilighting " + param);
	}
}

처음에 참으로 신기하고 이뻐보였다.. 나도 써보고 싶은것은 인지상정..ㅎ

사용법도 상당히 간단하다.

1. 다운받기

우선, http://alexgorbatchev.com/wiki/SyntaxHighlighter 사이트가 공식 사이트이다. 현재 버전은 2.0.320 이고
공짜로 다운로드 받아서 사용 가능하다.


위의 download 링크 눌러서 다운로드 한다. 그냥 본 블로그에 첨부파일로도 집어넣었다.
압축을 풀면 아래와 같이 세가지 디렉토리가 나온다

* scripts - 동작시에 필요한 script 들이 있다. 모든 .js 파일들이 페이지에 include 되어야 한다. 스크립트 중 shCore.js 와 shLegacy.js 스크립트는 Optimize 되어있어서 분석 불가다.
* src - 위 Optimize 된 스크립트의 소스가 있다. 사용할때는 src 디렉토리는 빼고 쓰면 된다.
* styles - 기본 및 테마 별 CSS 가 들어있는 디렉토리이다. 사용 시 몇가지를 link 해줘야 한다.

위 자료가 준비되었으면, 사용하면 된다.^^;;

2. <Header> 에 추가하기

사용법 또한 참 쉽다. HTML  코드에서 몇가지만 추가 해주면 된다.

우선, <header> 에, 아래 스크립트들을 포함한다.

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

다음은 역시 <header> 영역 안에, CSS 를 포함시킨다.

<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

그리고, 아래 두 줄의 코드를 더 추가해준다.

<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
	SyntaxHighlighter.all();
</script>

3. 내용 만들기

이제 본격적으로 SyntaxHighlighter 를 사용해보자. 정말 쉽다..
아래처럼 <pre> 태그를 쓰면 된다.

<pre class="brush: c-sharp;">
function test() : String
{
	return 10;
}
</pre>

이게 끝이다. 특이한 것은 <pre> 태그의 class 이다.
위의 예에서는 <pre> </pre> 사이의 내용을 c-sharp 문법으로 인식하라는 얘기다.
이걸 바꿀 수 있는데, 어떤 스타일이 있는지는, 다운받은 압축파일을 푼 디렉토리의
scripts 디렉토리를 보면 알 수 있다.


위와 같이 많은 종류의 js 파일들이 있는데, 대충 파일명을 보면, 어떤 문법인지 알 수 있다.
그리고, js 파일을 열어보면 내용 중에 아래와 같은 부분이 있다.

SyntaxHighlighter.brushes.JScript = function()
{
	var keywords =	'break case catch continue ' +
					'default delete do else false  ' +
					'for function if in instanceof ' +
					'new null return super switch ' +
					'this throw true try typeof var while with'
					;

	this.regexList = [
		{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },			// one line comments
		{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },			// multiline comments
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// double quoted strings
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// single quoted strings
		{ regex: /\s*#.*/gm,										css: 'preprocessor' },		// preprocessor tags like #region and #endregion
		{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }			// keywords
		];
	
	this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
};

SyntaxHighlighter.brushes.JScript.prototype	= new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.JScript.aliases	= ['js', 'jscript', 'javascript'];

위 내용 중에,

SyntaxHighlighter.brushes.JScript.aliases	= ['js', 'jscript', 'javascript'];

이 부분을 보면, <pre classes="brush: <aliase이름>"> 중에 <aliase이름> 을 뭘 줘야할 지 알 수 있다.
또, 각 문법의 사용결과 샘플은 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes 에서 확인할 수 있다.


친절하게도 위와 같이, aliase 와 관련 파일명도 목록으로 제공한다.

4. 끝

참 잘만들었다는 생각이 든다. 내가 돈이 없어서 donation 은 못하고 잘 쓰기로 하겠다.
Tistory 블로그에서 사용하는 방법도 나중에 시간되면 올려보도록 하겠다.

그나저나 오픈소스 프레임워크 사용법들도 익혀야 하는데 갑자기 UI 에 필이 꽃혀서 이런..