Javascript로 행해지는 Action의 결과물이 서버(Server)로 요청(Request)하는 행위라면 Fallback Link를 함께 제공해주는것이 안전하다.
서버로 요청한다는것은, 단순히 UI를 위한 스크립트가 아니라는 말이다.
즉 페이지 이동 하거나, 값을 전송하기 위함인데
필자는 단순히 UI변경하는것보다, 서버로 값을 전송하는게 더 비중있는 일이라고 생각한다.
그 이유는 대다수의 경우 서버로 값을 전송하는것이 Action의 Goal인 경우가 많기 때문이다.
그러므로 난 Fallback Link를 제공해야 한다고 주장하는 것이다.
예를들어
로그인 버튼을 누를시 Javascript를 이용해 서버에 값을 전송하는 환경이라고 하자.
근데 어떠한 이유에 의해서 Javascript가 동작을 안한다면
이 유저는 로그인을 할 수 없게 되는것이다.
자, 그럼 Fallback Link는 무엇이냐?
아주 간단하다. javascript로 동작하는 a태그의 href에 유효한 url을 입력하는 것이다.
그러므로 Click 이벤트가 일어나는 모든것은 Clickable한 객체로 마크업을 하는것이 바람직하다.
Fallback Link는 언제 동작하는것이냐?
이것 또한 간단하다. Javascript가 동작하지 않는 상황을 대비하는것이다.
근데 솔직히 말하면 브라우저가 자바스크립트를 지원하지 않아서, 자바스크립트가 미구동되는 경우는 거의 없다.
하지만 자바스크립트 문법 에러가 나서 동작하지 않는 경우는 꽤 있으므로, 이에 대한 대비로 봐도 된다.
뭐 사실 갖다붙이면 여러가지 이유가 있겠지만..
결론적으로 말하면 자바스크립트 미구동에 대비하는걸로 인해 생기는 부수적인 효과들이다.
돌아와서 Fallback Link제공의 간단한 예를들면
<a onclick="like('comment', 1)" href="#">Like</a>
이렇게 된걸 아래와 같이 수정하는것이다.
<a href="/like" data-action="like" data-content-type="comment" data-content-id="1">Lik</a>
$("a[data-action='like']").click(function(e) {
# do something
});
단순히 Fallback url을 제공했다고 끝나는게 아닌다.
해당 url이 실제로 동작을 해야 한다.
서버단에서 요청된 Header정보를 보고 Ajax인지 아닌지 판단하고,
여부에 따라서 응답을 달리 해주는 작업을 해줘야 한다.
무슨말인고하니,
보통의 경우 Ajax 응답만 작업했을것이고, 해당 코드는 아래와 같을것이다.
$("a[data-action='like'][data-content-type='comment'][data-content-id='1']").addClass("selected")
하지만, url을 타고 요청이 왔을 경우 유저는 하얀 화면 혹은 위 JS코드가 출력된(?) 화면을 보게 될 것이다.
이럴경우를 대비해야 한다는것이다.
기획단에서 어떤 페이지로 렌딩(Landing)할 것 인지, 먼저 정한 다음
해당 페이지를 렌더링(Rendering) 혹은 리다이렉트(ReDirect)해주면 된다.
Rails에서는 그냥 몇글자 추가해주면 되지만..
보편적인(?) PHP로 예를들면
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
// Ajax Process
}
else {
// Page Redirect
}
이 정도?
PHP 코드 출처: http://davidwalsh.name/detect-ajax
사실 이런 내용은
Graceful Degradation, Unobtrusive Javascript
같은 방법론들이 얘기하는것과 일맥상통하기도 한다.
tab-menu.html
tab-menu.zip
