옛날 코드 다시 읽기 ( javascript: pseudo protocol )

 요즘이 아닌 최소 5년전에 개발을 하던 분들은 아래의 코드들이 꽤나 익숙 할 것이다. 

<a href="javascript:" onclick="foo()">javascript:</a>
<a href="#" onclick="foo();return false;">#</a>
<a href="javascript:void(0)" onclick="foo()">javascript:void(0)</a>

 요즘에는 함수를 실행하기 위해서 a태그를 이용하는 사람들은 거의 없을 것이다. 그러다 보니 위의 코드가 어색해 보인다. 당연하게도 요즘에서는 권장 되지 않는 방법이기도 하다. 하필 예전에는 왜 함수를 실행하기 위하여 a태그를 사용 하였을까?

 생각해볼 만한 것은 button태그가 정상적으로 작동 안했다면? 이라고 생각이 들 뿐이다. 브라우저 버전에 따라서 버튼 모양이 달라졌다던가? 아니면 button의 기본 동작이 브라우저 별로 달랐다던가 하는 말이다.

 

 위의 이미지만 확인해도 javascript: <- 이 것이 무엇을 뜻하는지는 감이 올 것이다. 당연하게도 위와 같은 행위는 잘 하지 않을 것이지만, 이런것이 가능하다.

<a href="javascript:void(0)" onclick="foo()">javascript:void(0)</a>

 a태그를 이용하여 함수를 실행하기 위해서 사용 하기 위해서는 a태그 클릭시 기본적인 기능인 페이지이동을 막아야만 하였다. 따라서 위와 같이 javascript: pseudo protocol의 이용하되 평가값을 undefined를 이용 하여 페이지 이동을 막았다.

 또한 예전에 href를 정의 안하는 꼼수는 사용 하지 못했다. 정의 안하면 현재 페이지가 리로딩 되었던걸로 기억한다.

<a href="#" onclick="foo();return false;">#</a>

 위의 코드는 또 다른 방법이다. a태그의 href hash를 이용하여 페이지 내의 특정 엘리먼트가 보이는 위치까지 스크롤을 이동 하기 위한 방법을 이용 하여 페이지 이동을 막았다. 하지만 a href="#"을 클릭을 하게 되면 문서의 최상단으로 스크롤이 이동한다.

<a href="javascript:alert(2)" onclick="alert(1);return false;">test</a>

 자 위의 a 태그를 클릭한다면?? alert 1이 먼저 뜰까? 2가 먼저뜰까? 정답은 alert(1)이다. 해당 함수를 실행 하고 나서의 return false이다. 이벤트 핸들러의 평가가 false라면 이벤트 전파가 차단 되는 특성이 있다. onsubmit에 사용되는 validation함수들은 요즘에도 사용 하니 익숙 할 것이다.

 위의 코드들은 옛날에 표준과 비표준의 기준이 모호할 대 사용 되던 방식이다. 앞으로 이런 코드를 보기 힘들 것이다.