사용자 등록 시 전화번호를 입력하게 되는데 아래 그림처럼 세 개의 입력을 받아 합치는 형식으로 많이 되어 있습니다. 이렇게 개발해도 괜찮지만 좀 더 쉽게 하기 위해서 전화번호 입력 시 자동으로 하이픈(-)이 입력되도록 하는 형식으로 바꾸면 좋겠다 싶어 반영해 봤습니다. 개발된 화면은 다음과 같습니다. HTML 먼저 HTML 소스 코드입니다. input 태그를 사용하고 pattern과 maxlength, required, placeholder를 사용하였습니다. 속성에 대한 설명은 참고 사이트를 보시면 됩니다. JavaScript 먼저 전화번호 크기에 따라 나눴습니다. 서울 전화번호는 02로 두 자리로 시작하고 핸드폰은 010, 011..이고 다른 지역 전화번호는 031, 041, 051 등 세 자리로 시작..

React Native 란 리액트는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술입니다. 리액트 네이티브는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트입니다. 기존의 하이브리드 앱은 WebView에 화면을 만들어 놓고 모바일 앱에서 접근하는 것이었기 때문에 퍼포먼스가 떨어지고, 모바일 앱과의 괴리감이 있었습니다. 리액트 네이티브는 실제 네이티브 UI를 사용하여 모바일 앱을 구현합니다. 퍼포먼스는 올라가고 괴리감도 사라지게 됩니다. 리액트 네이티브를 사용하면 JavaScript를 사용하여 모바일 앱을 제작할 수 있습니다. 리액트와 동일한 디자인을 사용하여 선언적 구성 요소에서 풍부한 모바일 UI를 구성할 수 있습니다. 장점 높은 생산성 리액트를 사용하여 개발해 보신분이라면 처음부터..

웹 개발을 하면서 사용해 본 Chart를 정리하였다. 무료인 것도 있고 조건부 무료인 차트도 있다. 대부분 사용하기에 편리하여 적용하기도 쉽고 심플하고 이쁜 디자인도 많고 예제와 설명이 잘 되어있어 좋았다. AmCharts 링크 : ​https://www.amcharts.com/ 예제 : http://www.amcharts.com/demos/ 유료 라이선스 이지만 조건부 무료이다. 사용해 본 라이브러리 중에 기능이 엄청 많고 디자인이 제일 깔끔하다. 라이선스 비용은 개인이 사용하기에는 부담이 될 수 있지만, 차트에 개발사 링크가 출력되는 조건만 지키면 무료로 사용 가능하다. HighCharts 링크 : https://www.highcharts.com/ amCharts와 같이 조건부 무료입니다. Angul..

GIS 관련 프로젝트를 하다 보니 오픈소스인 CesiumJS 나 Openlayers 라이브러리를 사용하게 되었다. 최근에는 2D, 3D 모드가 가능한 CesiumJS를 주로 사용하게 되었다. Cesium 이란? 순수 웹 기불을 이용한 3D Globe 엔진 WebGL 기반 다양한 배경 영상/지도 기본 제공 3D / 2.5D / 2D 모드 지원 -> Openlayers3에 통합 카메라 움직임 추적, 시간 시뮬레이션 등 다양한 기능 제공 Cesium 을 시작할 때 초기 설정이 복잡하다. 아래 두 개의 링크를 따라가서 따라 하면 쉽게 할 수 있다. 하지만 웹에서 커스터마이징을 하기 위해 아래 코드처럼 Cesium에서 지원하는 기본적인 기능들을 끄고 지도만 보이도록 설정해야 한다. API들은 문서나 인터넷 검색으..