Programming(178)
-
오픈소스 차트 라이브러리, nWagon (Vanilla JS+SVG)
최근의 웹 트랜드를 놓고 비교해봤을 때, 우리의 웹 어플리케이션은 살짝 뒤쳐져있다. 10여년간 자바스크립트와 jQuery를 사용해서 만들어놓은 레거시 시스템을 갈아엎기위해, angularJS를 도입하여 신규 웹 어플리케이션을 몇년간 개발하긴 했다. 다만 오랫동안 판매된 장비들의 후방호환성을 지원해야 했기 때문에 여러모로 문제가 많았다. IE8을 지원해야했는데 angularJS는 업데이트를 통해 ‘더 이상 IE8을 지원하지 않겠다’라고 밝혀 업그레이드를 포기해야했고, 장비에서 스트리밍하는 영상의 헤더가 커스터마이징 되어있어 ActiveX를 사용하지 않을 수 없었다. 그러던 와중에 차트를 사용하는 기능을 구현해야했고, 다른 작업을 하는 동안 직장동료가 nWagon을 찾아냈다. 오픈소스 차트 라이브러리, nW..
2019.03.26 -
[BootStrap] 탭 내용 전환하기 전에 다이얼로그를 띄우기
탭을 변경했을 때 데이터를 비교하여, 값을 서버로 전송해야 할 경우가 발생했다. BootStrap의 탭을 이용해서 UI를 그리고, 탭을 이동할 때 select로 함수를 바인딩한 후 Modal을 출력했다. 클릭한 탭이 표시된 상태로 Modal이 표시되고 있었다. Modal로 confirm을 구현하고나니 더더욱 이상해졌다. 탭을 변경하기 전에 데이터를 저장해야합니다. 변경된 데이터를 저장하시겠습니까? (Y/N)이라는 내용의 Modal이 화면상에 떠 있는데, 어둡게 표시된 화면의 저 편에 클릭한 탭의 내용이 표시되고 있다. 이러한 경유로 탭을 클릭하면 사용자에게 탭 이동여부를 묻고, 사용자의 선택에 따라 클릭한 탭의 내용을 표시하는 UI가 필요했다. 사용자가 OK를 눌렀을 때 Confirm Modal을 띄워봤..
2019.03.19 -
[C/C++] 문자열 타입의 MAC ADDRESS 포멧 확인 (sscanf)
Front-end에서 MAC ADDRESS를 전달하는 경우 값이 변경될 수 있으므로, 최소한 전달받은 문자열이 MAC ADDRESS양식에 맞는지는 확인할 필요가 있었다. 특히 MAC ADDRESS를 문자열 형태로 저장할 때는 더더욱이나. 검색하면 어렵지 않게 찾을 수 있는 내용이지만, 업무가 바빠서 사이드 프로젝트를 못하니 뭐라도 정리하기로 했다. #include int sscanf(const char *buffer, const char *format, argument-list); sscanf는 buffer에 저장된 데이터를 지정된 format에 맞는 형식으로 읽어들이며, 성공적으로 변환된 필드 수를 리턴한다. 따라서 00:00:00:00:00:00과 같은 형식으로 문자열을 전달받았을 때, sscanf를..
2019.03.19 -
[C/C++] 정수를 IP주소로 변환하기 (Decimal to IP Address)
정수IP Address 변환은 Convert Decimal to IP, browserling등에서 제공하므로, 제대로 변환되는지 확인이 가능하다. IP주소값의 구조를 알고 있다면, 어렵지 않게 구현이 가능하다. 매번 필요할때마다 찾아보는데, 매번 까먹어서 이번 기회에 대충이나마 정리해두기로 했다. IP 주소(IPv4) IPv4 기준으로 IP 주소는 8bytes짜리 네 개가 구성되어 만들어진, 32bytes짜리 정수형이다. 따라서 다음과 같이 비트 연산을 하면, 언어에 상관없이 정수로 표현된 IP주소를 문자로 변경할 수 있다. void decimalToIPAddress(int param_decimalIp) { printf("IP Address: %d.%d.%d.%d\n", (ip>>24)&0xFF, (ip..
2019.03.18 -
[Android] NavigationMenu에 checkbox/switch 등의 UI 추가하기
[img](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAPAAhwDASIAAhEBAxEB/8QAHgABAAEFAQEBAQAAAAAAAAAAAAUDBAYHCAkCAQr/xABmEAABBAECAwMHBAwICgYFCgcBAAIDBAUGEQcSIRMUMQgVIkFTVJJRkZPRGSMyNlZhcXSBlbPUFhgzdaGy0tMJF..
2019.03.17 -
[angularJS] ng-change/ng-click 내에서 ng-model로 바인딩 된 값을 변경할 시, UI에 변경된 값이 표시되지 않는 경우
angularJS 1.x에서 input이나 select를 사용하여 UI를 구현하다보면, 사용자가 특정 값을 선택했을 때 이전 값으로 되돌려야 하는 경우가 있다. 보통 이런 경우에는 ng-change나 ng-click을 이용해서 구현하게 된다. 물론 사용자에게 특정 값을 선택할 수 없는 이유를 알려주기 위한 방법은 많다. 툴팁을 이용할수도 있고, 페이지의 눈에 띄는 곳에 문구를 출력하는 방법도 있다. 다만 툴팁이나 문구의 경우 사용자가 동작을 멈추고, 툴팁이나 문구를 찾아야 한다. 사용자가 잘못된 값을 선택했을 때 다이얼로그를 띄우게되면, 사용자가 의도한 동작의 흐름에 따라 자연스럽게 잘못된 값임을 인지할 수 있다. 우선 이전 값을 가져오도록 하자. ng-change나 ng-click에서 Controlle..
2019.03.12