본문 바로가기

atom installed packages / themes 제가 사용하고 있는 atom packages를 작성해두려고 합니다. 언제 또 개발 환경이 변경되고 atom을 다시 설치해야 하는 상황이 발생할지 몰라서요. atom-beautify 는 여러 파일의 indent를 맞추는데 사용하고 있어요. atom-ternjs 는 아마도 javascript autocomplete 를 위해서 사용하고요. autoclose-html 은 html 작성할 때 close tag를 제공하기 때문에 쓰고 있어요. autocomplete-python 은 이름 그대로 입니다 :) file-icons 는 atom의 밋밋한 파일 표현을 진짜 이쁘게 바꿔줘요. 꽤 맘에 들어요. multi-cursor 는 여러 줄을 한 번에 편집할 수 있어서 좋아요. highlight-selected 는 선택한.. 더보기
gulp uglify error gulp uglify를 수행하다 보면 에러를 자주 마주치곤 합니다. 다 제가 JS를 제대로 활용하지 못해서죠 ㅠㅠㅠㅠㅠ 에러는 아래와 같이 나오더라구요. 안된다는 것을 상당히 적극적으로 표현하고 있습니다 !! 그래서 어디가 머가 왜 에러냐고 알고 싶지만gulp-uglify 만으로는 안되더라구요. 그래서 gulp-util 을 설치해줍니다 !! npm install gulp-util --save-dev gulp 파일에 아래와 같이 추가해주고요. var gutil = require('gulp-util'); 아래와 같이 사용해줍니다. :)gulp.task('depend_uglify_js', function() { return gulp.src(depend_uglify_js) .pipe(concat('depende.. 더보기
Html data attribute parsing using jQuery data-* attribute는 사용하기에 따라 유용하게 활용할 수 있습니다. 예로 아래와 같은 data-* attribute가 있다고 가정하겠습니다. 2개의 data-* attribute를 설정해봤어요. 하나는 data-type다른 하나는 data-sub-type 입니다. jQuery를 통해서 해당 data-* attribute를 파싱하는 방법은 아래와 같아요. 위 소스로 출력되는 결과는 아래와 같습니다. // AAA var pType = $('.testP').attr("data-type") var pSubType = $('.testP').attr("data-sub-type") console.log(pType); console.log(pSubType); data-* attribute를 하나 더 추가해봤.. 더보기
<p> <a> 태그 순서 + modal show 간단하게 기록용으로 1. 태그를 통해서 modal을 open하는 형태로 개발. test modal open 2. 안드로이드 + 크롬 조합에서는 문제없이 잘 작동하는데 iOS + Safari 조합에서는 modal이 안열림. 3. test modal open 으로 변경하니깐 잘 됨. 4. css가 이미 다 들어간 상태라서 변경하는 것이 번거로운 작업이 됨. 태그를 다 지워버렸음. 그리고 5번 수행. 5. jQuery 활용해서 아래와 같이 변경 $('.aaaa').click(function(e) { $('#testModal').modal('show'); }); stack overflow 에서 관련된 사항을 검색해보니 link text 가 W3C 표준이라고 하네요. 결론은 변경해서 쓰지 말자!! 입니다. 더보기
웹 개발, 크롬 개발자도구, 스마트폰(모바일) 기기 추가 제목이 복잡하네요. 1. 웹 개발하는 과정에서 크롬 브라우저의 개발자 도구가 많이 사용되는 것으로 알고 있어요.2. 개발자 도구에서 모바일 기기에서 어떻게 보여지는지 확인할 수 있구요. 3. 여러 모바일 기기를 추가할 수 있어요!! 이번 포스팅에서는 3번 어떻게 추가하는지에 대해서 그림으로 정리해두려고 합니다. 1. 윈도우에서는 크롬 브라우저에서 F12를 누르면 개발자 도구가 보이고요. 리눅스에서는 Ctrl + Shift + i 를 누르면 보이고요. 맥에서는 Alt + Command + i 를 누르면 되요. 아래 그림과 같이 나오면 성공!! 2. 위 그림에서 오른쪽 상단에 쩜쩜쩜 세로로 찍힌거 누르면 아래 그림을 볼 수 있어요. 여기서 Settings를 선택 !! 3. Settings에 들어와서 Devi.. 더보기
Leaflet 기초 01 Leaflet 기초 정리 01 앞으로 몇 번의 포스팅을 통해 Leaflet에 대한 기초 내용을 정리해두려고 합니다. 참고)Leaflet과 유사하고 많은 기능이 있는 Mapping Library로는 OpenLayers가 있습니다.OpenLayers에 대한 내용도 가끔 포스팅한 적이 있구요. Leaflet과 OpenLayers를 비교한 슬라이드는 아래에 있습니다. 2015 FOSS4G에서 발표된 내용이네요. Leaflet vs OpenLayers : http://ivansanchez.github.io/leaflet-vs-openlayers-slides/#/ 1. Leaflet은 가볍습니다. OpenLayers에 비해서 말이죠. 저도 OpenLayers만 써왔지만 Leaflet이 여러 프로젝트나 서비스에 적용.. 더보기
아파치 웹서버 설정 - Alias (apache web server setting - Alias) 간단하게 아파치 웹 서버 설정 중에서 Alias에 대해서 정리하고 실습 1. Ubuntu 14.04 Server + Apache2 2.4.7 위와 같은 환경에서 테스트 2. Ubuntu 14.04 Server에서 그냥 apt-get으로 apache2를 설치한 경우에 설정 파일은 /etc/apache2/ 에 위치함. 웹 서버의 root나 여러 폴더의 접근 권한 등을 설정하는 파일은 /etc/apache2/sites-available/000-default.conf 로 되어 있음 물론 000-default.conf가 맘에 들지 않으면 100-default.conf로 바꿔도 전혀 문제 없음. 다만 /etc/apach2/site-enable/000-default.conf의 링크를 100-default.conf로 .. 더보기
웹 페이지 최적화에 도움되는 사이트 웹 페이지를 최적화하고 에러나 위험요소를 줄일 수 있는 방법이 많이 있지만 몇 개의 홈페이지에서 제공하고 있는 기능을 사용해보는 것도 좋네요. 1. CSS Lint (http://csslint.net/) 가운데 흰색 박스에 CSS를 입력하고 LINT 버튼을 누르면 에러나 워닝을 잡아줍니다. 모두 따를 필요는 없지만 그래도 문제가 될 수 있는 부분이라고 하니 적당히 고쳐주는게 좋을 것 같네요. 저도 한 30개 정도 나왔는데 주로 #id 가 문제였습니다. class로 변경하니깐 다 사라졌구요. 필요없는 CSS나 합칠 수 있는 CSS 코드도 발견해주니깐 더 깔끔한 CSS 작성에 도움이 됩니다. 2. JSHint (http://jshint.com/) JavaScript Hint입니다. JS 내용을 왼쪽에 입력하.. 더보기
CartoDB 소개 Web 기반 지도 제작을 할 수 있는 서비스가 몇 가지 있지만 CartoDB는 좀 괜찮네요. 벌써 이런 정도가 가능하다는 점이 대단한 것 같습니다. CartoDB 홈페이지 : http://cartodb.com/ 보유하고 있는 공간정보 데이터를 업로드 하거나, 직접 위경도를 입력해서 표현하는 것도 가능합니다. 위 그림은 직접 위경도를 입력한 것으로 잘 안보일까바 아래 그림도 추가합니다. 간단하게 127, 36을 입력했습니다. Data View에서 Map View로 전환하면 아래 그림과 같이 포인트로 127, 36에 표현된 것을 확인할 수 있습니다. 배경 지도를 변경하는 것은 당연히 제공하고 있구요. 이것을 그림 파일로 저장하거나 웹 상에서 공유하는 것도 가능합니다. 더보기
GeoServer running in 80 port GeoServer는 tomcat 위에서 작동하는 SW입니다. 즉 tomcat의 기본적인 설정을 건드리지 않으셨다면 일반적으로 8080 port로 접근해야되죠. tomcat의 기본 설정을 변경해서 80 port로 사용하고자 하셔도 됩니다만, Apache httpd를 설치하신 분이라면 오히려 시스템이 더 꼬일 수 있죠 ^^; 이번 포스팅에서는 Apache httpd + Tomcat7을 활용해서 GeoServer를 80 port에서 실행할 수 있도록 하는 것입니다. 사실 제가 예전에 작성해 둔 포스팅들을 조합하면 간단하게 가능한데요. 여기서 다시 짧게 작성해보려고 합니다. Apache httpd + Tomcat7 설치 및 연계 : http://ngee.tistory.com/199 위 포스팅을 처음부터 ~ 5번.. 더보기
Swift 공부 관련 링크 Swift 공부를 저는 이제 하고 있습니다. 나온지가 한참 되었지만, 이제야 할 마음이 들었어요 ^^;; 공부할 수 있는 사이트가 많이 존재하는데요. 아래 사이트들은 너무나 당연하거나 쉽게 검색이 되긴 하는데요. 그래도 귀찮으신 분들이 계실까바 한 번 올려봅니다. 1. Swift Programming Language https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Programming_Language/TheBasics.html 애플에서 제공하고 있는 Swift 관련 내용이 총 정리되어 있는 웹 페이지 입니다. 제가 링크 건 것은 언어 기초 시작부분이니, 링크들어가 보시면 페이지 상단에 존재하는 Welcome to S.. 더보기
리눅스 - 아파치 웹 서버 로그 보기 (Apache Web Server Log) 우분투 기준으로 작성하겠습니다. 일단은 아피치 웹 서버를 apt로 설치하셨겠죠?? ex) apt-get install apache2 아파치 웹 서버의 로그를 보기 위해서는 결론적으로 다음 명령어를 입력하시면 됩니다. tail -f /var/log/apache2/error.log /var/log 라는 폴더가 여러 응용프로그램들의 로그가 기본적으로 저장되는 곳입니다. 아파치 웹 서버도 마찬가지구요. tail -f 라는 명령어는 다음과 같이 설명되어 있는데요. Print the last 10 lines of each FILE to standard output. (tail --help 중 일부) -f 라는 옵션을 주어서, 에러로그를 한 번 출력하고 끝인 것이 아니라, 계속 모니터링 해줄 수 있습니다. 아래 그림.. 더보기