UroA 개발 블로그

Q-Map Prototype 완성 약 2주간에 걸쳐 Q-Map Prototype을 완성하였다. 웹 프로젝트는 학교에서 수업때 했던 게시판만드는 정도였는데 이번프로젝트를 하며 외부라이브러리를 사용하고 AngularJS를 사용해보는 경험을 하였다. 회사 사람들에게 간단하게 설명할 수 있도록 ppt를 만들었고, 프로젝트는 github에 있다. 멘토님께서 조언해주신 코드 리팩토링을 참고하여 수정할 것이다. github => https://github.com/kdhx92/Q-Map

AngularJS 공부하기 좋은 사이트 추천 처음 접해보는 Anuglar JS를 사용하여 프로젝트를 하며 도움을 얻었던 사이트들을 추천합니다. Angular JS에 대해 정확히 알지 못하였는데 아래의 좋은 글들을 읽고 도움이 많이 되었습니다. - https://blog.outsider.ne.kr/975- http://d2.naver.com/helloworld/1172239 위의 글들을 읽고 공식홈페이지에서 Tutorial 및 API Reference를 참고하면 좋을것 같습니다. - https://angularjs.org/ 각종 도움이 될 만한 글들을 모아놓은 블로그 입니다. - http://w3devlabs.net/wp/?p=15

gmaps -> angularjs-google-maps 라이브러리 변경 기존의 프로젝트를 angularjs로 변경하여 다시 진행함에 따라 사용하던 gmaps(javascript Google map library) 라이브러리를 angularjs-google-maps 라이브러리로 변경하였다. angularjs-google-maps github -> https://github.com/allenhwkim/angularjs-google-maps 위와 같이 library의 기능들이 예제로 주어지고 있으며, Plunker로 확인 할수도 있다. 프로토타입의 프로젝트에서는 (1) custom-marker-ng-repeat.html 과 (2) polyline-simple.html 를 사용하였다.

프로젝트 AngularJS 로 변경 회사의 앱이 AngularJS를 이용한 Ionic으로 개발되어있다. 그래서 조금 더 도움이 될 수 있도록 진행하고 있던 Q-Map 프로젝트를 AngualrJS 로 변경하기로 했다. Webstorm에서 AngularJS 프로젝트를 생성하였다.

gmaps 라이브러리 사용하기https://github.com/hpneo/gmaps gmaps 라이브러리는 Google Maps을 간편하게 사용할 수 있도록 도와준다. Github에서 여러가지 example과 documentation을 볼 수 있다.

wgs84 deg/min/sec -> wgs84 decimal 변경하기 먼저 좌표와 관련된 개념은 http://blog.daum.net/_blog/BlogTypeView.do?blogid=04ebo&articleno=924 를 참고하자. Load - Image 라이브러리를 통해 추출한 Exif의 gps tag에는 '세계측지계(WGS84)의 경위도 좌표계, 도/분/초' 형식의 값이 들어있다. 이 값으로 Google Map의 해당 좌표에 Marker를 표시하기 위해서는 먼저 '세계측지계(WGS84)의 경위도 좌표계, 도/분/초' 형식의 값을 decimal 형식으로 변경해야 한다. 추출한 Exif 값을 바탕으로 아래의 코드를 통해 wgs84 decimal 값을 얻을 수 있다. var latRef = GPSLa..

Javascript - Load - Image 라이브러리 사용하기 사진의 meta data를 사용하기 위해서 외부 라이브러리를 사용하기로 했다. https://github.com/blueimp/JavaScript-Load-Image 에서 제공되는 Load - Image 라이브러리는 이미지 파일을 불러오고 변형할때 사용된다.이미지는 File 또는 URL을 통해 로드할 수 있으며, 라이브러리에서 제공되는 method를 통해 이미지의 Exif tags 를 추출할 수 있다. Exif tag 란? 교환 이미지 파일 형식 (Exif; EXchangable Image File format)은 디지털 카메라에서 이용되는 이미지 파일 포맷이다. 이 데이터는 JPEG, TIFF 6.0과 RIFF, WAV 파일 포맷에서 이..

Google Map 사용하기 https://developers.google.com/maps/documentation/javascript/?hl=ko 사이트를 통해 Google Map 을 시작할 수 있습니다. 프로젝트 생성 & API키 받기 먼저 Google Map을 사용하고자 하는 프로젝트를 생성해야합니다. Google 계정을 통해 로그인 후 '키 가져오기' 버튼을 클릭하여 프로젝트를 생성 후 아래의 순서로 API Key를 할당 받습니다. Google Map 사용하기 이제 할당받은 API Key 를 통해 다음과 같이 Google Map 을 사용할 수 있습니다. (YOUR_API_KEY에 본인이 할당받은 Key 사용)(https://developers.google.com/maps/documentation/..

Q-Map 서비스란? 쿤트리에서 인턴을 시작하며 지도와 사진을 기반으로 여행 컨텐츠 서비스를 만들게 되었다. (prototype) 사용자가 여행지에서 촬영한 사진을 업로드하면 사진의 meta-data 중 위도와 경도를 이용하여 지도에 marker로 표시하고, (사진이 촬영된 시간순으로) 만약 사진의 위치 meta-data 가 존재하지 않는다면 이를 사용자에게 알리고 사용자가 따로 이를 등록할 수 있도록 기능을 추가하는 것이 목표이다.

Bower 란? bower는 웹 프론트엔드 개발에 필요한 각종 라이브러리들을 관리할 수 있는 npm, maven, gem과 같은 패키지 매니저이다. (웹 프론트엔드에서 자주 사용하는 jQuery, Bootstrap과 같은 라이브러리를 간편하게 관리, 설치할 수 있다.) 설치 npm을 통하여 설치할 수 있다. npm 사용을 위하여 먼저 node.js 를 설치한 후 다음 명령어를 입력하여 bower를 설치한다. $ npm init...$ npm install bower --save 사용법 bower를 사용하기 위해서는 우선 bower.json 파일을 생성해야 한다. bower.json 생성은 다음 명령어로 생성 가능하다. $ bower init bower init을 할때 나오는 각종 설정을 프로젝트에 맞춰서..