본문 바로가기

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 parsing - beautifulsoup4 (install) 살다보면 하기 싫은 Html parsing도 해야 하는 날이 있는거죠 :) 아주 예전에 beautifulsoup을 통해서 Html parsing을 했던 적이 있습니다. 오늘 다시 설치하려고 찾아보니 버전 4가 나왔더라구요. 그리고 이전 보다는 수월하게 Parsing이 가능해진 것 같습니다. 암튼 Python 으로 Html Parsing을 처리해야 하는 분들은 4 버전으로 하는게 좋을 것 같아요 !!! pip 로 검색해보면 아래와 같습니다. pip install beautifulsoup4 위 명령어로 설치하실 수 있습니다. 뒤에 꼭 4를 붙여서 설치하세요 !! 안그럼 3버전이 설치되니깐요!! 아래 사이트에 들어가면 좋은 예제 및 설명이 되어있어요!! 참고하시길 !! https://www.crummy.com.. 더보기
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이 여러 프로젝트나 서비스에 적용.. 더보기
크롬 캐시 지우고 웹 페이지 새로 고침하기 제목이 조금 복잡하네요 웹 개발하실 때 크롬 웹 브라우저로 테스트하고 있다고 가정하구요. 작은 이미지를 변경했는데 캐시된 상태라서 반영된 결과를 제대로 확인이 안되는 경우 아래와 같은 방법으로 캐시된 내용을 지우고 웹 페이지를 새로 고침함으로써 결과 확인이 가능합니다. 아오 풀어서 써도 어렵네요. 내용은 간단한데 말이죠 ㅋ 1. 크롬에서 요소검사 창을 열어주세요 (Ctrl + Shift + i). 윈도우 크롬에서는 F12로도 열리는거 같아요. 쉽게 말해서 콘솔창 보이고 엘리먼트 보이고 하는 그거요. 아래와 같이 생겼죠. 2. 새로고침 하는 버튼을 마우스로 길게 눌러보세요. 아래와 같이 총 3개의 서브 메뉴가 나타납니다. 아래 그림은 화면이 위 요소검사 창을 열어두지 않으면 안나와요. Normal Relo.. 더보기
아파치 웹서버 설정 - 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에 표현된 것을 확인할 수 있습니다. 배경 지도를 변경하는 것은 당연히 제공하고 있구요. 이것을 그림 파일로 저장하거나 웹 상에서 공유하는 것도 가능합니다. 더보기
국내 3차원 지형도 공개 국내 3차원 지형도가 얼마전에 공개되었죠?? 검색포털에서 3차원 지형도라고 검색하시면 관련 기사가 참 많이 나와있네요. 아래 주소에서 실제로 다운로드 해보았습니다. 무료에요!! http://air.ngii.go.kr/info/sub13.do 다운로드 포맷은 총 3개더라구요. ASCII, ERDAS Image, PDF 가장 일반적인 사용자는 PDF를 사용해서 3차원 지형도를 확인하실 수 있고요. GIS 소프트웨어를 다룰 수 있는 사용자는 ERDAS Image를 다운로드 하셔서 사용하시면 되구요. 개발자는 ASCII도 사용가능하겠죠. 요건 (GDAL을 통해서 이미지로도 만들 수 있습니다. 나중에 포스팅해야지..) ERDAS는 상용 소프트웨어지만, QGIS에서도 불러와서 확인이 가능합니다. QGIS는 오픈소스.. 더보기
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.. 더보기
D002 - Development / Publishing .... using Django and Apache D002로는 이렇게 하는 것이 맞는지는 잘 모르겠지만 (Django에 대한 경험이 많지 않아요 ^^;;) 1. 개발할 때는 Django 서버 사용 Django를 기반으로 개발하고, 테스트하기 위해서는 아래와 같은 방법으로 서버를 띄울 수 있죠. python manage.py runserver ipAddress:8000 매우 일반적인 방식이죠. 8000 포트가 열려있는 환경에서는 문제 없이 돌아갈 것입니다. 포트번호 8000은 Django의 기본 포트이기도 하구요. 위와 같은 방식은 개발 할 때는 매우 편리하더라구요. 제가 느낀 이유는요. Django 안에서 개발 할 때 소스코드가 변경되면 자동으로 반영하더라구요. 약간의 시간 차이는 존재할 때도 있지만, 대부분 빠르게 반영되어 처리해줘서 좋았습니다. 2... 더보기
크롬 웹브라우저 시작할 때 여러 페이지 열기 크롬 웹브라우저를 실행할 때, 내가 자주가는 사이트를 한 번에 열기 위해서는 아래와 같은 방법으로 가능합니다. 1. 브라우저 오른쪽 끝에 있는 제어 버튼을 클릭한다. 보시면 하단 쯤에 설정이 있죠? 그것을 클릭~~~ 2. 시작 그룹에서 맨 아래 라디오 버튼을 클릭하고 페이지 설정을 누른다. 아래 그림을 참고해서 클릭해주세요. 3. 페이지 설정에 내가 자주 가는 사이트를 추가해준다. 아래 처럼 말이죠.. 확인 누르시고, 크롬을 껐다 켜보세요. :) 더보기