카카오뱅크는 어떤 기술을 사용했나?
출처 : http://blog.gaerae.com/2017/08/kakaobank-architecture.html?m=1
카카오뱅크에서 공개된 기술 스택 정보를 기록했으며, 개발자도구가 자동으로 닫히는 현상과 자바스크립트 템플릿에 대해 간략하게 이야기합니다.
이 글은 뉴스 기사와 사이트 구성을 분석하여 정리했으며 실제 카카오뱅크 기술 스택과 다를 수 있고 어느 개발자의 2가지 질문에 대한 답을 하기 위해서 작성되었습니다.
질문은 "이름 입력값 정규식 버그 발견"이라는 캡처 화면 공유 후 페이스북으로 문의를 하셨습니다.
답변은 기술 스택 이후에 있습니다.
표면적인 기술 스택
Front-end | |
---|---|
Javascript Frameworks | Backbone.js |
Javascript Template | Underscore.js |
Javascript UI Libraries | jQuery.js, Moment.js |
Web Font | YoonGothic 720/750 |
Back-end | |
Operating Systems | Linux |
Web Server | Nginx |
Databases | MySQL |
Hadoop Ecosystem | Hadoop, HBase, Spark |
Languages | Java, Swift, JavaScript |
CDN and Security | |
CDN | Akamai |
Security | AhnLab Safe Transaction |
Utilities | |
DB Tool | Tadpole DB Hub |
VCS | Git |
실제로 사용되는 수많은 기술 중 일부지만 질문에 대한 기술 정보는 포함되어 있어 간략하게 답변을 하겠습니다.
문의 1. 개발자도구를 열었더니 자동으로 닫혀요.
답변: 자바스크립트에서 처리하시려고 많이들 검색하실텐데 컴퓨터에 설치된 "AhnLab Safe Transaction" 프로그램에서 감지 후 닫히도록 하고 있습니다.
이러한 이유로 브라우저가 느려지는 현상이 발생하여 많은 불만이 나오고 있지만 아직 국내에서 보안이라는 이름으로 필수 설치 프로그램입니다.
문의 2. 소스 보기를 했더니 평범한 HTML 문법이 아니네요.
답변: 자바스크립트 템블릿 문법입니다. Underscore.js 를 사용하고 있으며 자바스크립트에서 데이터를 받아 화면을 출력합니다.
그런데 이 방법에는 문제가 있는데요. 자바스크립트를 지원하지 않거나 차단시킨 브라우저에서는 화면을 볼 수가 없습니다.
이러한 이유로 페이스북등 일부 서비스 사이트는 자바스크립트가 지원되지 않더라도 화면이 출력될 수 있도록 만들고 있는데 카카오뱅크는 아직 없는거 같네요.
<script id="lastConnTemplate" type="text/template">
<% if (typeof lastConnTime !== "undefined") { %>
<span class="txt_bar"></span>
<a href="javascript:;" id="logoutBtn" class="link_login"><span class="img_kabang ico_login"></span>로그아웃</a>
<% if (lastConnTime !== "") { %>
(최근 접속 <%= moment(lastConnTime, "YYYYMMDDHHmmssSS").format("YYYY.MM.DD HH:mm") %>)
<% } %>
<% } %>
</script>
간단한 답변에 글만 길었습니다. 그리고 모바일이라 직접 테스트를 못 해서 아쉬워하는 분들을 위해 시연 동영상을 첨부했으니 참고하시고 자막도 있으니 활성화하세요.