[JS] Requirify 크롬 익스텐션..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

웹 프론트를 개발하다 보면 다른 사이트의 소스를 볼 일이 많이 있다. 어떻게 동작하는지 보려고 하거나 구조를 좀 파악해 보려는 등 여러 가지 상황이 있는데 크롬 개발자 도구 등이 과거보다 무척 좋아졌지만, 콘솔에서 자바스크립트를 실행시켜 보는 경우가 많다. 이런 경우 보통 자신이 익숙한 라이브러리의 소스가 편한데 예를 들어 DOM을 탐색할 때 나는 jQuery 로 쓰는 게 편하지만 다른 사이트를 탐색하에는 jQuery 가 없는 경우도 많아서 네이티브 DOM 쿼리를 사용해야 하는 불편함이 있다. 이런 경우를 위해서 나는 jQuerify라는 크롬 익스텐션을 사용해서 크롬 개발자도구에서 jQuery를 쓰고 있다.(jQuerify는 알아서 충돌나지 않도록 $, $j, $$등으로 사이트에 jQuery를 넣어준다.)

Requirify

Requirify는 Node.js의 require()문법을 사용해서 동적으로 라이브러리를 로딩하는 크롬 익스텐션이다. Requirify를 만든 Matthew Conlen의 개발문서를 보면 RequireBin에 영감을 받았다고 나와 있고 browserify에 기반을 두고 있다.
최근에 내 주위에 browserify를 쓰는 사람이 늘어나고 있는데 난 아직은 Bower를 주로 사용하고 있어서 자세히 설명하기는 어렵지만 browserify는 npm 모듈을 이용해서 의존성 관리를 하고 브라우저에서 실행할 수 있게 하여 주는 도구이다. 브라우저에서도 Node.js처럼 require();문법으로 의존성을 명시하고 browserify를 이용해서 이를 하나의 파일로 빌드할 수 있게 하는 도구다. Requirefy는 이 메커니즘을 사용한 크롬 익스텐션으로 크롬 개발자도구에서 동적으로 필요한 라이브러리를 로딩한다.

위 화면에서 보듯이 사이트를 디버깅할 때 lodash가 필요하다면 require('lodash')를 실행하면 browserify-cdn에서 해당 라이브러리를 가져온다. Finished getting lodash라는 문구가 출력되면 해당 사이트에서 정상적으로 lodash를 사용할 수 있다. 다른 사이트의 소스를 보거나 크롬 개발자 도구에서 간단히 라이브러리의 API를 테스트해 보려고 할 때 굳이 HTML 페이지를 따로 만들 필요없이 편하게 사용할 수 있다.

다만 아직 초기 버전이라서 HTTPS를 지원하지 않아서 현재 사이트가 HTTPS라면 Content Security Policy를 위배하기 때문에 라이브러리가 로딩되지 않는다. 이는 현재 이슈로 등록되어 있지만, 아직 해결되지는 않았고 requirefy가 사용하는 browerify-cdn이 아직 HTTPS를 지원하지 않기 때문에 다른 CDN에서 가져오도록 만들거나 browerify-cdn이 HTTPS를 지원해야 해결될 것 같다.