블로그 내 검색

2011. 11. 28.

겸손하고 나대지 않는 자바스크립트, unobtrusive javascript.

개요



자바스크립트 관련 포스팅 및 서적을 읽으면 거의 등장하는 단어는 바로

"겸손한 자바스크립트"

라는 것이다.
하지만 뭔가 와 닿지 않는다...

언어가 겸손이라니???

보통 원문에는 unobtrusive javascript 라는 것으로 쓰여 있다.

unobtrusive??

단어의 뜻은 이렇다

  • unobtrusive [ʌ̀nəbtrúːsiv]  
    주제넘지 않은, 조심성 있는, 겸손한  
  • unobtrusive [|ʌnəb|tru:sɪv]  영영사전
    not attracting unnecessary attention

출처 - 다음 사전

보통 번역되는 겸손한, 나대지 않는 뜻이 맞다.
그래도 뭔가 와닿지 않는다. 좀더 생각해 보자.

일단 단어의 뜻을 해석하려면 그것이 사용되는 부분부터 이해하는게 보통 정확하다.

웹의 접근성



겸손한 자바스크립트를 거론할때 첫번째로 나오는 주제는 접근성이다.

자바스크립트는 웹의 중요한 이슈인 접근성에 어떻게 관여될까.

야후에 접근하는 사용자의 2%는 자바스크립트를 끈 사용자라는 통계가 있다.
야후같이 거대한 서비스에서는 2%는 엄청난 사용자다.

Internet Explorer, FireFox, Chrome, Safari, Lynx...

브라우저는 하나의 통일 플랫폼이 아니다. 여러 종류가 존재한다.
브라우저의 엔진에 따라서는 자바스크립트를 해석하지 못하거나 불완전하게 해석할 수도 있다.
또한, 스크린 리더기, 텍스트 브라우저같은 특수한 환경에서는, 자바스크립트는 동작이 어려울지도 모른다. 요새 각광받는 모바일 환경도 이 문제에서 예외가 될 수 없다.

시멘틱 웹



두번째는 시멘틱(semantic) 이다. 문서의 시멘틱이 중요해지는 요즘이다.
시멘틱 단어 그대로, 문서의 의미는 굉장히 중요하다. 이유중 먼저 떠오르는 것은 검색 엔진이다.
오늘날 검색 엔진에 노출된다는 뜻은 따로 말 안해도 잘 알거라 생각한다.

그러나, 현대의 대부분의 검색 엔진은 자바스크립트를 완전히 해석하지 못한다.

페이지에 static하게 박힌 <a>이나 <form> 에 있는 href, action 속성을 검색 프로그램 로봇이 읽어가는 것과,
스크립트에서 해당 태그에 클릭 이벤트를 캐치하에 스크립트에서 페이지를 이동하거나 폼을 서브밋하는 것중에 어느것이 더욱 검색 엔진에 더욱 노출이 잘 될까? 뻔하지 않을까.

케이스 A

<a href="/content/get_alright.html">Get All</a>
<form id="frm" action="/server/getData">
<input type="text" name="word" />
<input type="text" name="id" />
<button type="submit">검색</button>
</form>

케이스 B

<script type="text/javascript">
var anch = function(e) {
location.href = "/content/get_alright.html";
}
var submit = function(e) {
var f = document.getElementById("frm");
f.action = "/server/getData";
f.submit();
}
</script>
<a href="#" onclick="anch();">Get All</a>
<form id="frm">
<input type="text" name="word" />
<input type="text" name="id" />
<button id="s_btn" onclick="submit()">검색</button>
</form>

두개의 케이스를 보면 A는 문서 하나로서 완벽한 동작을 한다.
그러나 B는 그렇지 않다.
검색 엔진이 알아보기도 힘든 문서이며, 스크립트 사용이 불가능할 경우, 이 문서는 전혀 동작하지 않는다.

시멘틱으로서의 문서의 가치는 A쪽이 높다고 볼 수 있겠다.

진화



앞에서 접근성, 시멘틱 웹에 대해 다루었지만 또 하나 중요한게 있다.
Active-X와 자바스크립트 이 둘의 관계.
Active-X를 잘 알거라 생각한다.
Active-X가 과다하게 사용된 사이트가 나쁘다는건 누구나 알고 있다. 이것을 욕하는 개발자도 많다.
하지만 javascript 또한, Active-X와 개념적이나 동작 면에서 크게 다르지 않다!

대부분의 브라우저에 탑재 되어 있을 뿐이지 앞으로 어떻게 바뀌냐에 따라 자바스크립트는 없어지거나 할 수 있을지도 모른다. 자바스크립트 퇴출 운동이라...생각만해도 웃긴다.
모바일 환경에 접어들며 밀려버린 플래시의 예를 보면 뭐 답은 명확하다.
(앞으로 자바스크립트가 완전히 웹 표준에 정착되어 버리면 이야기는 다르겠지만...)

그리고 HTML의 태그의 기능이나 표현이 바뀔 수도 있다. 이럴 경우 문서에 강하게 유착된 스크립트가 오동작 할 위험도 있다. (이럴 정도로 크게 바뀔 일은 절대 없겠지만...가정이다 가정)

나대지 말자



위에서 든 2,3,4의 예가 일관되게 가리키는 것은 자바스크립트의 과용 이다.

처음 화제로 돌아가서 겸손한 자바스크립트에 대해서 말해보자

HTML문서가 해석될 때 스크립트가 관여하는 부분을 최소화하며, 혹시 동작하지 않더라도, 어느정도의 기본 기능은 제공해야 하며 앞으로 발전 방향에 무리가 없을 정도로 사용하는 자바스크립트를 말한다고 볼 수 있다.

이것을 전문 용어로

Graceful degradation (우아한 낮춤)
Progressive enhancement (점진적 향상)

라고 한다.

Graceful degradation
 은 스크립트 지원 레벨이나 여부를 검사하고 그것에 맞게 적용 범위를 낮춰가는 방법이다.
<noscript> 태그가 이러한 경우에 쓰일 수 있겠다

반대로 Progressive enhancement는 점진적으로 문서에 자바스크립트를 적용하는 방법이다.
원본 HTML이 있으면 먼저 기본 태그와 CSS만으로 문서를 작성하고, 자바스크립트를 그 위에 점진적으로 얹어가며 기능을 개선하는 방법이다. 물론 과용은 안되며 문서는 독립적이어야 한다.

결론



  • 겸손한 자바스크립트
  • 나대지않는 자바스크립트
  • 무간섭 자바스크립트
  • 최소 자바스크립트
  • 분리형 자바스크립트
  • 키다리아저씨 자바스크립트(?)

 ...어떻게 이름 붙여도 와 닿진 않는다.

그러나 웹의 변화는 너무 무쌍하기에 어떻게 바뀔 지 알 수 없다.
하지만 이런 개념을 바탕으로 자바스크립트를 다루는 것은 참 좋은 습관이 될 것이다.

2011. 11. 14.

간단한 정규표현식 테스터

정규표현식을 본격적으로(?) 공부해보고자...
전에 본 http://rejex.heroku.com/ 에 감명받아 비슷하게 구현해보았다.
기능은 안드로메다급으로 뒤쳐지지만...

아래는 정규표현식에 많이 쓰이는 자바스크립트 특수문자.
(출처 - http://iamnotokay.tistory.com/26)
  • \f 폼피드
  • \r 캐리지리턴
  • \n 새줄
  • \t 일반 탭문자
  • \v 세로 탭문자
  • \0 NUL널문자
  • [\b] 백스페이스
  • \s 공백문자 (\f, \n, \r, \t, \v, \u00A0, \u2028, \u2029)
  • \S 공백이아닌문자
  • \w 알파벳문자,숫자,_ [a-zA-Z0-9_]
  • \W 알파벳문자,숫자,_가 아닌문자 [^a-zA-Z0-9_]).
  • \d 정수(short for [0-9]).
  • \D 정수가 아닌 문자 (short for [^0-9]).
  • \b 단어의 경계 공백,새줄.
  • \B 경계가 아닌문자.
  • \cX 컨트롤+문자 E.g: \cm matches control-M.
  • \xhh 핵사코드
  • \uhhhh 유니코드

문자열에는 검사할 문자열을, 정규표현식에는 / 을 제외한 문자열을 넣는다.
입력시마다 이벤트가 체크되어 매칭 여부를 검사한다.

정규표현식 검사기
문자열 입력

정규표현식 입력 test method 로 수행

결과

예외를 거의 고려하지 않고 급조한 것이라 브라우저에 따라 잘 동작하지 않을 수 있다.
사용된 소스는 다음과 같다.

(function() {
    var doc = window.document;
    var intervalId;
    var eleText = doc.getElementById("input_text");
    var eleReg = doc.getElementById("input_regxp");
    var eleResult = doc.getElementById("javarouka_check_textarea");
    var isMethod = doc.getElementById("reg_method");
            
    function createRegexp() {
        return reg = new RegExp(eleReg.value);
    }
    function strMatch() {
        if(!eleText.value || !eleReg.value) return;
        try {
            console.log();
            if(isMethod.checked) {
                eleResult.value = createRegexp().test(eleText.value);
            }
            else {
                eleResult.value = eleText.value.match(createRegexp());
            }
        }
        catch(e) { 
            eleResult.value = "오류!!!\n" + e.toString();
        }
    }
    function bindEvent() {
        eleText.onkeyup = strMatch;
        eleReg.onkeyup = strMatch;
        isMethod.onclick = strMatch;
    }
    bindEvent();
})();

2011. 11. 4.

UCS...Unicode...BMP?

코드 포인트 : 문자셋의 특정 문자를 지정하는 번호

USC
20억개의 문자 코드 포인트 보유
모든 문자가 가상의 테이블 안에 포함되는데
이 테이블은 128개의 그룹으로 나뉘며
그룹은 다시 256개의 판(Plain)으로 나뉘고
하나의 판 안에는 다시 65535개의 코드 포인트가 있다.

결국 65535개의 문자가 256개의 판에 기록되며 그것을 그룹이라 부른다. 다시 그 그룹이 128개가 뭉치면 UCS 테이블이 된다.

65535 * 256 * 128 = 약 20억


여기서 최초의 65535 개의 코드 포인트가 할당되는 부분을 기본 언어판(Basic Multilingual Plain === BMP)이라고 부른다.

Unicode는 UCS의 서브셋이며 호환된다.
Unicode는 UCS중에 그룹 0번의 0번 판부터 16번 판까지만 사용한다.

Unicode 인코딩
Unicode에 매겨진 코드 포인트가 바이트로 어떻게 표현할 것인지를 나타냄. 

UTF-32는 코드포인트 값을 그대로 유지하면서 바이트로 표현
UTF-16은 코드포인트 값을 유지하되, BMP를 벗어난 문자는 32비트로 인코딩한다.
UTF-8은 코드포인트 값에 따라 1,2,3,4 바이트로 가변 인코딩한다.