[Javascript] 겸손한 자바스크립트

겸손한 자바스크립트의 정의

겸손한 자바스크립트 라는 의미는 자바스크립트는 웹페이지를 보는 사용자에게 무리하게 참견해서도 안된다라는 뜻이다. 예를 들어, 자바스크립트가 실행 여부 환경에 따라 웹페이지에서 제공하는 정보의 정도가 달라서는 안된다. 이러한 환경은 다음과 같다.

 1. 자바스크립트를 지원하지 않는 브라우저

 2. 보안상의 이유로 스크립트를 꺼둔 경우 

 3. DOM 명세의 일부분을 브라우저 독자적으로 해석/지원하여 스크립트의 오류 혹은 지원의 범위가 다른 경우

 4. 사용자가 브라우저를 사용하는 방법이 다른 경우( 대부분의 사용자가 마우스를 가지고 이용한다 하여, 마우스를  이용할 때에만 작동하고, 키보드를 이용한 경우에는 작동하지 않을 경우. 장애를 가진 사람들은 키보드를 가지고  이용할 수 있으며, 그렇지 않다고 해도 키보드로 이용하는 게 편해 키보드를 이용할 수 있다.

결국 겸손한 자바스크립트( unobtrusive javascript)는 사이트를 방문한 사람들이 위와 같은 이유로 발을 돌리게 되는 상황을 막을 수 있게끔 프로그래밍하는 것이다.  자바스크립트가 정확히 동작하지 않더라도 사용자들은 웹사이트를 이용할 수 있어야한다라는 면에서 볼때는 웹 접근성과도 깊은 연관성이 있다. 위와 같은 프로그래밍을 하려고 한다면 몇가지 생각해야할 것이 있다. 첫째로 모든 브라우저가 자바스크립트를 지원한다고 생각하면 안될 것이며, 둘째로 자바스크립트가 모든 브라우저에서 동일하게 동작한다고 생각하면 안될 것이다.

겸손한 자바스크립트의 목표

1. 자바스크립트 코드와 HTML 마크업을 분리한다.

외부 스타일시트(CSS)와 문서의 내용(HTML)을 분리하듯 내용과 행동을 분리함을 의미한다. 이러한 분리를 위해서는 HTML 페이지 안에서 외부 script 파일을 불러와야 하지만, 이러한 분리를 함으로써 독립된 환경에서 자바스크립트 작업을 할 수 있게 해준다. 또한 이를 통해 한 모듈의 변수와 함수들이 다른 모듈의 변수와 함수를 덮어 씌우는 등에 대한 걱정 없이 여러 독립적인 코드의 모듈들을 같은 페이지에서 포함시킬 수 있다.

2. 단계적으로 성능을 축소하는 것이다.

자바스크립트는 HTML내용을 강화하기 위한 용도로써 사용되고 설계되어야 하며, 그 문서의 내용은 자바스크립트 코드가 없거나 실행되지 않더라도 사용할 수 있어댜 한다. 자바스크립트는 웹 사이트의 사용성을 배려하는 도구를 하나 추가하는 것이라고 생각하면 된다. 

[예제] 입력 양식의 유효성 검증

사용자가 입력하는 입력양식은 데이터베이스에 저장되기 전에 유효성을 체크 해야 하는데 유효성 체크는 보안과도 직결될 수 있는 부분이기 때문에 반드시 체크를 해야한다. 이러한 유효성을 서버에서 하는 것은 제출과 응답 간의 딜레이가 존재하기 때문에 시간을 다소 소모하게 될 수 있다. 이럴 때 자바스크립트가 개입하여 사용자가 입력한 양식을 서버에 전송하기 전에 검토한다면, 사용자들이 빈번히 저지르는 실수를 서버를 거치지 않더라도 잡아 줄 수 있으며 이러한 인터페이스는 훨씬 빠르고 부드럽게 돌아가는 것처럼 느껴질 수 있다. 하지만 이러한 자바스크립트 역시 서버사이드 유효성 검증에 대해져서 사용되어야 한다. 자바스크립트만 이용한다면 부드러운 인터페이스를 제공할 수 있지만, 그러한 경우 유효성 검증을 우회하기는 아주 쉽다. 결국 사용자가 자바스크립트를 사용 여하를 떠나 검증을 체크하는 것은 서버에서 한다. 결국은 자바스크립트의 역할은 자바스크립트를 켜둔 사용자에게 약간이나마 편한 환경을 제공하는 것이지 그 이상의 Role은 없다.

3. HTML 페이지의 접근성을 해치지 않게 하는것이다.

물론 가장 이상적인 것은 자바스크립트가 접근성을 강화해주는 것이지만  반대로 자바스크립트 코드를 포함함으로써 웹 페이지의 접근성을 저해했다면, 그것은 용이한 웹 페이지에 의존하는 장애가 있는 사용자에게는 불편함을 줄 수 있다. 

4. 브라우저의 호환성을 생각한다.

자바스크립트는 대부분의 유명한 브라우저들이 그들만의 독자적인 자바스크립트 처리 엔진을 가지고 있기 때문에, 간혹 서로 행동 방식이 다른 경우가 있다. 물론 일반적으로는 IE를 제외한 브라우저에서는 비슷하게 동작하는 경우가 많을 것이다.  이러한 문제를 해결하는 방법이 아예 없는 것은 아니나, 이러한 문제를 해결하고자 예외처리를 해야하는 경우 코드가 길어질 뿐 아니라, 가독성에도 안 좋을 수 있다. 물론 라이브러리를 사용함으로써 간단하게 해결할 수는 있겠지만, 모든 문제를 라이브러리로만 해결하다보면 혹시나 모를(물론 그럴 일은 거의 없겠지만) 라이브러리를 사용하지 못하게 되는 열악한 환경에서는 곤란한 상황에 빠질 수 있다.

[출처]

자바스크립트 완벽 가이드

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

https://hyeonseok.com/docs/accessible-javascript/