출처 : 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>
간단한 답변에 글만 길었습니다. 그리고 모바일이라 직접 테스트를 못 해서 아쉬워하는 분들을 위해 시연 동영상을 첨부했으니 참고하시고 자막도 있으니 활성화하세요.
'프로그램개발 > IT 트렌드·팁·상식' 카테고리의 다른 글
2017년 최고의 웹 브라우저 찾기 | 크롬, 엣지, 파이어폭스, 오페라 전격 비교 (0) | 2017.08.14 |
---|---|
“과거는 잊어라” 소프트웨어 개발의 본질을 바꾸는 21가지 기술 (0) | 2017.08.08 |
Hype Driven Development - 설레발 주도 개발 (0) | 2017.03.30 |
프로젝트 툴 어떤게 좋을까요? 목업툴? 프로토타이핑 툴? (0) | 2017.02.20 |
크롬 개발자 도구 팁 (0) | 2017.02.17 |