뷰템플릿과 javascript의 궁합

최근에 뷰템플릿을 이용해 개발을 하다보니, URL에 ID(primary key)를 넣을 때가 많아졌다.

이렇게 Path variable(경로변수?)로 잡게 될 경우, 직관적이고 매핑도 편해서 많이 사용한다.

그러던 중 대부분의 뷰템플릿이 자바스크립트와 궁합이 안좋아서

ID를 자바스크립트의 변수로 빼는 게 힘들어, URL에 ID가 박혀있는 것을 이용해서 아래와 같이 구현하였다.

var pathnames = location.pathname.split("/"); var id = pathnames[pathnames.length - 1];

이렇게 쓰니, 작성한 자신이 보기에도 더러워 보인다.

쓸데 없이 pathnames와 같은 의미없는 변수를 선언하게 되었다.

(자바스크립트에서 자체적으로 파이썬과 같이 [-1]을 사용할 수 없는 것, 마지막 값을 반환하는 메소드가 없는 게 아쉬웠다.)

그렇다고 해서 아래와 같이 쓰는 것은 미관상 더 안좋고, 한번 쓸거여서 미미하지만 성능도 더 안좋다.

var id = location.pathname.split("/")[location.pathname.split("/").length - 1];

보기에도 안좋지만, 기능 자체도 경로를 나눠서 마지막 값을 반환하는 방식인데,

꼭 마지막 값이 ID라는 것은 보증하지 못한다. 그래서 재사용 할수가 없다.

결론은 람다 짱짱

요즘 언어를 안가리고 람다에 푹 빠져있어서, 이번에도 람다를 사용해서 해결하기로 했다.

(요즘 너무 남용하고 있다는 생각도 많이 들긴 하는데, 그래도 좋은 건 어쩔 수 없다.)

location.pathname.split("/")**.filter(x => x.match("^[0-9]{1,}$"))[0]**

이런식으로 하면 경로중에서 숫자만 뽑아낼 수 있을 뿐더러. 코드도 전보다 깔끔해졌다.

또한 아래와 같이 함수로 추출해서, 정규식만 변경하여 다른 값들도 뽑아 낼 수 있다

var id = function(**exp**) {   return location.pathname.split("/").filter(x => x.match(**exp**))[0] }

16.3.26 추가 - 아직 정확히는 모르겠지만 ES6에서를 지원해야만 가능 한듯 보인다. 

ps.자려고 침대에 누웠는데 잠이 안와서 3시간 동안 뒤척이다가 일어나서 글을 작성중이다. 자야되는데 큰일이다…