(JS) 겸손한 자바스크립트의 원리를 읽고

http://www.clearboth.org/43_the_principles_of_unobtrusive_javascript/

개요

‘겸손한 자바스크립트의 원리’,http://www.clearboth.org/43_the_principles_of_unobtrusive_javascript/를 읽으면서 나의 허접스럽고 더러웠던 코드와 짧았던 생각을 반성해보려한다.

내용을 읽으면서 들었던 생각, 필요한 내용

1. 여기서 가장 먼저 고려하는 점은 불확실성이다.
   • 일부 브라우저는 스크립트를 지원하지 않거나 너무 오래되어 스크립트를 무시 할 수 있다.
   • 스크립트를 지원한다 하더라도 사용자가 스크립트를 꺼두었거나 스크립트 태그를 없애고 있다면 어떻게 할 것인가
   • 스크립트가 해석이 된다하더라도 굉장히 복잡한 HTML에 기반해 있으며 HTML은 (스크립트 제작자가) 예측하지 못한 방법으로 바뀔 수 있다.
   • 마우스로 페이지를 브라우징 할 지 키보드로 할 지 당신은 모른다(장애를 가진 사람들 중 상당수는 마우스를 사용할 수 없으며, 어떤 사람들은 키보드를 더 선호한다)
   • 잘 작동한다 하더라도 다른 프로그래머들이 그 코드를 이해 못할 수도 있다.

2. “겸손한, unobtrusive” 자바스크립트는 사이트를 방문한 사람들이 위에 열거한 이유 때문에 발을 돌리게 되는 상황을 막을 수 있게끔 프로그래밍하는 것이다.

3. 그럼 어떻게 겸손한 자바스크립트를 구현할 것인가?
   1. 구조와 행동의 분리 : CSS는 CSS파일에, HTML코드는 HTML파일에, script는 js파일에 넣자
      • 인라인 이벤트 핸들러 같은 것들이 큰 문제인데(현재는 많이 쓰지 않지만) 이러한 방식을 고려한다면 유용성과 유지보수성을 향상시킨다.

       <a href=“somewhere.html” onmouseover=“hideAll()”> 
       //이런 코드를 이런식으로 하게 되면 온전한 분리가 된다.
       <a href="somewhere.html" id="somewhereLink">
      
       var x = document.getElementById('somewhereLink');
       if (x) {
       x.onmouseover = hideAll;
       }
      

      • 여기서 마우스오버와 focus이벤트를 섞어서 키보드와 마우스 모두에게 작동하게 할 수 있다

       if (x) {
         x.onmouseover = x.onfocus = hideAll;
       }
      

   2. 사용성 레이어 추가하기
      • 여기서 보는 자바스크립트의 목적은 사이트에 사용성을 배려하는 도구 하나를 추가하는 것이다. 추가 라는 것은 스크립트가 없을 때 사용할 수 없다면 그 코드는 겸손하지 않은 코드인 것이다.
      • 예제를 들어보면 회원가입 같은 입력양식의 validation체크를 들 수 있다. 여기서 validation을 체크할 때 매번 서버에서 체크를 한다면 시간은 매우 지연될 것이다. 하지만 자바스크립트에서 미리 체크를 해준다면 서버에서 확인하는 시간을 줄일 수 있을 것이다! 자바스크립트를 사용하기에 편의를 제공하는 것이다.
        • 이 에제에서는 3가지 중요한 원칙을 나타내준다.
          1. 사이트는 JS없이 작동할 수 있어야한다.
          2. JS를 사용한다면 사용자들에게 추가적인 사용성을 선사할 수 있다.
          3. JS는 안전하지 않다. 자바스크립트만으로 validation을 체크한다면 스크립트를 끄는 것 만으로 방어벽을 우회할 수 있게 된다.
      • 다른 예시로 Ajax웹을 개발한다고 쳐보자. 이러한 개발을 할 때 계층적으로 생각하자. 이러한 기능은 스크립트의 여부에 관계없이 작동해야한다. 만약 사이트가
        1. 검색을 해 검색조건에 맞는 내용을 가져오고
        2. 이 목록을 타입에 맞춰 소팅해주는 기능을 만들어야 한다면
      • 이러한 기능을 하는 페이지를 먼저 만든다. 이렇게 되면 스크립트가 없어도 페이지를 만들어 낼 수 있는 가장 기본적인 계층을 만드는 것이다.
      • 이것을 한 후에 Ajax를 얹어 작동을 할 수 있게 할 수 있게 된다.
   3. 의미있는 HTML 만들기
      • class이름 , h tag등 페이지를 마크업 할 때 그 본연에 의미를 맞춰 마크업한다면 스크립트를 쉽게 작성할 수 있을 것이다.
   4. 브라우저 호환성
      • IE를 받아들이고 이해하자