728x90

이번 주 업무 중에 자바스크립트에서 정규식(정규표현식)을 조금 복잡하게 짜야 하는 것이 있어, 그 동안 써먹은 표현식으로는 한계에 부딪혔습니다.

그래서 기존에 안 쓰던 표현식을 찾아서 여기저기 돌아다니고 있었는데…

정규표현식을 시각화해서 보여주는 사이트가 있더군요.

"regular expressions 101"

간편하게 테스트를 할 수 있는 것은 물론이고, 어떻게 동작하여 결과가 나오는 것인지까지 설명을 해줍니다. 사용한 표현식에 대한 해설도 첨부되어 있구요.(영어라는 게 문제지만…)

화면 왼쪽의 ‘FLAVOR’ 영역에서 ‘ECMAScript (JavaScript)’를 선택하고 사용하는 것만 잊지 않으면 사용법이 어려운 사이트는 아닙니다. 그리고 그 선택락을 보면 알 수 있지만, 자바스크립트 외에도 다른 언어의 정규표현식도 테스트해 볼 수 있습니다.

사용법이 어려운 사이트는 아니지만, 감이 잘 안 오시면 다음 사이트의 사용례를 보시면 쉽게 이해가 가실 겁니다.(스크롤을 내리다보면 중간중간 나오는 스샷으로 감을 잡을 수 있습니다.)

반응형
728x90

 원래는 이글루스를 사용했었습니다. 아직 미숙한 개발자다 보니 일하면서, 공부하면서 쓸만하다 싶은 코드 같은 것들을 정리해서 올리곤 했었는데, 막상 올려놓아도 코드가 눈에 잘 들어오지가 않더군요.

 그러다가 많은 분들이 사용하는 SystaxHighlighter의 존재를 알게 됐는데, 정작 이글루스에서는 사용할 수가 없더군요. 아예 개인홈페이지를 만들까도 생각했지만, 아직은 거기까지 신경쓸 여유는 안 되는 것 같아, 우선은 SystaxHighlighter가 사용 가능한 티스토리로 옮기게 되었습니다.

 예상이지만, 아마도 이글루는 예전처럼 일상 얘기 등에 사용하고, 티스토리는 일과 관련된 용도로 쓰게 될 것 같습니다. 이글루에 있는 프로그래밍 관련 글들도 천천히 다 옮겨와야겠습니다.

 하여튼 그런 이유로 SystaxHighlighter의 사용법 요약

※상세한 사용법을 보시려면 여기로 → SyntaxHighlighter 2.X를 tistory에 적용하기.(사실 저도 이 글 보고 알았습니다.)

 1. http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download에서 다운로드받는다.

 2. 압축을 풀고, scripts 폴더와 styles 폴더의 파일들을 적당한 곳에 위치시킨다.
※티스토리는 [관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드]에 올립니다.

 3. <head>안에 SyntaxHighlighter 스크립트를 페이지에 추가시킨다. 추가시켜야 할 내용은 압축파일의 test.html에 나와있습니다.

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

 (또는 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage 참고)

 ※티스토리는 [관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집]에 추가합니다.

 4. SyntaxHighlighter 기능을 사용할 코드는 <PRE> 안에 넣습니다. 이 때 class에 보여주고자 하는 프로그래밍 언어의 Brush aliases를 지정해주면 적절한 형태로 나오게 됩니다.

	<pre class="brush: c-sharp;">
	function test(t)
	{
		alert(t);

		return t;
	}
	</pre>

 어떤 언어에 어떤 Brush aliases를 지정해줘야 하는지는 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes를 참고합니다.

반응형

+ Recent posts