주의: 폼 베이스 인증과 다이제스트 인증을 동시에 적용하는 건 큰 의미는 없다.특히 NGINX 등에서 제공하는 기본 인증방식(BASIC/DIGEST)을 사용할 시, 브라우저에서 제공하는 로그인 창이 출력되지 않게 하려면 사용자가 입력한 ID와 패스워드가 URL에 그대로 노출되게된다. 그러니 이러한 구현사항을 요청받았다면, 천천히 포기할 수 있게끔 설득해보도록 하자. 로그인 창으로 ID와 패스워드를 입력하면, 서버에서 임의의 세션값을 생성하여 사용자를 추적하게끔 설계되어있는 시스템이 있다. 즉, 폼 베이스 인증 방식을 사용하고 있었다. 이 시스템에 보안상의 문제가 있다며, 다이제스트 인증 방식을 사용하게끔 해달라는 요청이 들어왔다. 당장 폼 베이스 인증 방식이라는 말이 떠오르지 않았던 나는 잠시 정신이 아..

최근의 웹 트랜드를 놓고 비교해봤을 때, 우리의 웹 어플리케이션은 살짝 뒤쳐져있다. 10여년간 자바스크립트와 jQuery를 사용해서 만들어놓은 레거시 시스템을 갈아엎기위해, angularJS를 도입하여 신규 웹 어플리케이션을 몇년간 개발하긴 했다. 다만 오랫동안 판매된 장비들의 후방호환성을 지원해야 했기 때문에 여러모로 문제가 많았다. IE8을 지원해야했는데 angularJS는 업데이트를 통해 ‘더 이상 IE8을 지원하지 않겠다’라고 밝혀 업그레이드를 포기해야했고, 장비에서 스트리밍하는 영상의 헤더가 커스터마이징 되어있어 ActiveX를 사용하지 않을 수 없었다. 그러던 와중에 차트를 사용하는 기능을 구현해야했고, 다른 작업을 하는 동안 직장동료가 nWagon을 찾아냈다. 오픈소스 차트 라이브러리, nW..

캔버스 위에 이미지를 표시해주고, 그 위에 여러개의 박스와 라벨을 그려주는 UI를 구현해야 했다. 사용자가 캔버스 내에 사각형 형태의 영역을 지정할 수 있고, 이 영역의 외부는 어둡게 표시를 해줘야 했다. 설명하는 것보다는 구현된 내용을 보여주는게 빠를 듯 하다. 간단하게 설명하면 위와 같은 UI를 만들어야했는데, 네모난 영역의 모서리는 이동 및 크기의 변경이 가능했다. 네모난 영역의 외부를 어둡게 표시하는 것 자체는 큰 문제는 아니었다. fillRect를 이용해서 외부의 영역을 네 개의 구역으로 나눠, (0, 0, 0)에 0.5의 알파값을 주고 그려주면 됐다. context.strokeStyle="rgba(0, 0, 0, 0.5)"; context.fillStyle="rgba(0, 0, 0, 0.5)"..

하고 싶었던 것 온라인 게임인 스마이트(SMITE)의 홈페이지에 들어가보면, 아이템 리스트를 가져오는 API로 아이템을 불러오는 걸 알 수 있었다. 이 데이터를 특정 저장소에 저장한 뒤, 한글로 번역하고 싶었다. 문제는 시즌이 계속되는 중간에도 이 데이터는 미세하게 변경된다. 물론 모든 데이터가 그런 것은 아니다. 하지만 어찌됐건 귀찮은 문제였다. 그래서 생각해낸것이 AWS의 Lambda였다. 우선 데이터를 한글로 번역해놓은 뒤, 일부 수치는 일정 기간마다 API를 통해 업데이트하면 되지 않을까. 실제로 주말간 했던 것 Node.js나 Python을 제대로 써본적이 없었다. 물론 검색해서 더듬더듬 구현하는거야 큰 문제가 되진 않겠지만, 내 코드가 아니라 그저 복사 붙여넣기에 그치지 않을까싶었다. 그나마 ..

결과 요약부터 하고 진행하도록 하자. img 태그의 src에 data:image/jpeg;base64,를 앞에 붙인 뒤, base64 데이터를 첨부하면 인코딩 된 jpeg데이터를 웹 페이지에 표시할 수 있다. How to display raw image data with html and javascript, stackoverflow의 내용을 살펴보면, jsfiddle로 구현한 예제가 첨부되어있다. 예제가 크게 복잡하지 않으므로, 보면 쉽게 이해할 수 있다. 샘플 이미지 데이터의 준비 적당한 이미지가 없는 경우에는 PlaceIMG에서 샘플 이미지를 생성하여 다운로드 받도록 하자. 이후 ImageToBase64에 이미지를 업로드하게 되면, 이미지를 Base64로 압축한 데이터가 생성된다. 사이즈로 인해 Ba..

Electron에 대하여 HTML, Javascript, CSS를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위하여, Github에서 개발한 오픈소스 라이브러리입니다. 즉, HTML, Javascript, CSS를 사용할 수 있다면, 데스크탑용 어플리케이션을 만들 수 있습니다. :) 문서의 번역은 꽤 진행되어있지만, 몇몇 파일의 경우에는 번역이 진행되어있지 않은 경우가 있습니다. Translating electron to Korean 페이지에 접속하면, 현재 한국어로 번역 진행률을 확인할 수 있습니다. 번역에 참여하기 위해서는 Crowdin 아이디가 필요하며, 깃허브나 구글의 계정이 있다면 쉽게 생성할 수 있습니다. 번역에 참여한 내용은 https://crowdin.com/profile/(Cro..