UroA 개발 블로그

[Q-Admin] 프로젝트 생성 (Express + AngularJS) (2) 먼저 앞으로 이어질 글들은 Express + AngularJS 프로젝트를 만들때 중요했던 흐름 위주로 작성할 예정이다. 따라서 하나하나 세세하게 순서를 설명하지는 않을 것이다. ※ 참고 사이트 프로젝트를 만들며 참고했던 사이트들 이다. 정말 상세하게 잘 나와있으니 처음 시작하시는 분들이 참고하시면 좋을 것 같다.(1) https://coderwall.com/p/ww38iq/angular-and-express-setup(2) http://blog.jeonghwan.net/lectures/todomvc-angular/1/(3) http://corpus.hubwiz.com/2/node.js/17451834.html(4) http:/..

프로젝트 생성 (Express + AngularJS) (1) Q-Admin 프로젝트는 Server와 Client를 하나의 프로젝트에서 만들기로 하였다. 동아리에서 다뤄봤던 Express와 Q-Map을 하며 다뤄봤던 AngularJS를 사용하며, DB는 Mysql을 사용할 것이다.처음에는 yeoman을 통해서 아래와 같이 미리 틀이 잡혀있는 프로젝트로 시작하려 하였다. https://github.com/angular-fullstack/generator-angular-fullstack yeoman을 통해 프로젝트를 생성 하였지만 부족한 실력탓에 잘짜여진 프로젝트를 이해하지 못하고 결국 새로 시작하기로 하였다. 다음 글 부터는 Express + AngularJS 프로젝트를 생성하는 방법과 주의할 점에 대해서 ..

Q-Admin 개발하기 Q-Map의 Prototype개발을 마치고 Q-Admin 개발을 시작한다. Q-Admin은 관리자가 현재 서비스중인 앱의 DB를 쉽게 조회할 수 있는 프로젝트이다.

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 파일 포맷에서 이..