본문 바로가기

자바스크립트 이전 페이지로 돌아가기 javascript 에서 이전 페이지 정보는 document.referrer 를 찾아보시면 됩니다. console.log(document.referrer); document.referrer로 redirect 시켜도 될 것 같긴한데 아래와 같은 코드로 이전 페이지로 갈 수 있습니다. history.go(-1); 더보기
jQuery로 select 된 값 가지고 오기 jQuery를 사용해서 select에서 선택된 값을 가지고 오는 방법은 아래와 같습니다. $('.target-selection').click(function(){ var option_value = $(".target-selection option:selected").val(); var option_text = $(".target-selection option:selected").text(); console.log(option_value ); console.log(option_text ); }); target-selection 이라는 클래스를 가진 select 에서 선택이 이루어지면 option:selected를 활용해서 value값은 val() 로 가지고 오고요. text 값은 text()로 가지고 옵니.. 더보기
자바스크립트 URL 정보 가져오기(찾기, 확인) 자바스크립트(javascript)에서 현재 URL에 대한 정보는 window 객체의 location에 저장되어 있습니다. 저는 ngee.tistory.com/admin/plugin/refererKeyword/ 라는 페이지에서 location을 출력해봤습니다. 크롬에서 개발자 툴에 들어간 뒤에 Console 창에 console.log(window.location); 입력 후 엔터를 누르면 출력할 수 있습니다. 출력한 결과를 확인해보면 여러 가지 정보가 들어가 있는 것을 확인할 수 있습니다. 먼저 host/hostname은 ngee.tistory.com이고요. href는 전체 URL을 값으로 가지고 있네요. pathname은 전체 URL에서 host 값을 제외한 주소를 값으로 가지고요. protocol도 확.. 더보기
safari virtual keyboard change : return to search Input 을 선택하면 위 그림과 같이 Search로 나오게 하는 방법을 정리합니다. 1. Input type 값을 search 로 설정해야 합니다. 2 Input element를 감싸는 form을 아래와 같이 설정해야 합니다. ... 위 내용을 합치면 아래와 같아요 끝 !! 더보기
gulp argument 웹 프론트엔드 쪽 개발에서 gulp가 많이 사용되는거 맞죠? 저는 만족하며 사용하고 있습니다. 이번에는 Gulp Argument 전달에 대해서 간단하게 정리해봅니다. 1. Gulp Argument 전달 저는 publish 라는 task에 libversion 이라는 변수를 전달하고 싶었고요. 변수 값은 0.1으로 설정하려고 했습니다. 위 내용은 아래와 같이 표현할 수 있더라고요. gulp publish --libversion 0.1 변수를 2개 전달하는 것도 당연히 가능하죠. gulp publish --libversion 0.1 --depversion 0.5 2. Gulp Argument 사용 gulp 파일에서 변수를 사용하기 위해서 저는 gulp-util을 사용했습니다.(여러 라이브러리가 지원하는 것 같.. 더보기
Autocomplete Library 추천 1. 깃허브에서 Autocomplete를 검색해보면 아래와 같습니다. 자바스크립트만 1834개가 검색되요. ㅠㅠㅠㅠㅠ물론 중복도 있겠지만 그래도 넘 많아요. 2. 추천은 !! Autocomplete 라이브러리가 너무 많아서 어떤 걸 사용해야 할지 모르겠다면 !! 저는 awesomplete를 추천해드리고 싶어요.homepage : https://leaverou.github.io/awesomplete/이유는 가볍고, 핵심적인 기능만 담고 있고, 디펜던시도 없기 때문입니다. 3. 물론 제가 모든 Autocomplete 라이브러리를 사용해본건 아니라서 이게 짱이에요는 아닙니다만.사용해보니깐 만족해요 !! 4. 팁 홈페이지에 잘 나와 있어서 그것만 잘 보면 됩니다만!! + input 박스를 클릭했을 때 dropd.. 더보기
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 는 선택한.. 더보기
Javascript 모듈화 예제 (기록용) 예전에 포스팅한 아래 글에 이어서 하나 더 추가해봅니다. 2016/07/16 - [Bootstrap&JS] - Javascript 모듈화 (기록용) 위 포스팅보다 좀 더 친절하게 작성했습니다.일단은 기록용이고 틀린 부분은 지적해주세요. github에도 추가했습니다. https://github.com/motobyus/moto // ===============================================// write : moto// update : 2016.10.30.// =============================================== var OBJSAMPLE = function() { // private variables ---------------------------.. 더보기
한국에서 지난 1년간 프로그래밍 언어별 관심도 변화 1. 구글 트렌드 검색이 좀 더 좋아졌네요 :) 2. C++은 C로 인식하는 듯 ㅠ 3. 앞으로 블로그 포스팅을 어디에 집중할까 싶어서 알아봤어요. 4. 한국은 역시 자바인가 !!! 5. 개강하면 관심도 그래프가 다들 좀 오르지 않을까? 1. 오!!! Swift 2. 그래도 자바가 !!! 3. 남들이 많이 하니깐 좀 멀리했는데 이제는 남들이 하니깐 가까이 하고 싶은. 4. 그냥 알아만 봤어요 :) 더보기
Javascript 모듈화 (기록용) Javascript 모듈화 방법이 참 많이 있는 것 같다. 여기에는 제가 자주 사용하는 모듈화 방법에 대해서 기록용으로 남겨둡니다. var AAA = function() { var private_value; var processing_func = function(args...) { // private private_value = 0; }; var get_private_value = function(args...) { // privatereturn private_value; }; return { status_check : function (args...) { // public }, get_status : function (args...) { // public get_private_value(); } } }.. 더보기
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이 여러 프로젝트나 서비스에 적용.. 더보기
카카오 링크 자바스크립트 예제(kakao link javascript example) 요번에 해볼 예제는 카카오 링크 예제!!카톡을 통해 친구들에게 내 서비스를 편리하게 공유할 수 있도록 제공하는 기능이죠 :) 예제는 카카오 개발자 페이지에 너무나 잘 되어 있고, 여기서는 확인하는 수준으로 정리합니다 :) 1.먼저 카카오 서비스 API에 등록하셔야 합니다. - 카카오 Open API 홈페이지 : https://developers.kakao.com/ - 아이디 없으신 분들은 가입하고 로그인해서 API KEY를 받아야 합니다 !! - 새로운 APP을 만들고, 앱의 개요 페이지를 보면 KEY가 존재합니다. 2. 카카오 링크를 생성하는 페이지의 Head 부분에 을 추가합니다 :) 사용자들이 누를 수 있는 버튼 같은 걸 만들어줍니다 :) 카카오톡을 통해 친구들과 공유할래요. 마지막으로 버튼을 눌렀.. 더보기
Bootstrap Modal 띄우기(생성/열기/보여주기) Bootstrap Modal을 띄우는 방법은 Javascript를 사용하는 것과 HTML element의 data attribute를 사용하는 것이 있습니다. 일단 modal은 아래와 같은 코드로 구성되어 있다고 가정하죠. {% block start-footer %}{% endblock %} {% block modal-header %} {% endblock %} {% block modal-body %} modal test {% endblock %} {% block modal-footer %}닫기{% endblock %} {% block end-footer %}{% endblock %} 1. 먼저 Javascript를 활용하는 예는 아래와 같아요. $("#testModal").modal(); 위 그림에서 .. 더보기
dragula example 카테고리가 정확하게 맞진 않지만 아무튼 오랜만에 포스팅을 하나 해보려고 합니다. dragula는 오픈소스로 이름에서 유추할 수 있듯이 드래그 기능을 제공해줍니다. 그것도 아주 편하게 말이죠. dragula github webpage : https://github.com/bevacqua/dragula license : MIT 위 웹 페이지에 들어가보면 demo 페이지를 통해 사용해보실 수 있습니다. 사용해보시면 어디에 적용할지 감을 잡을 수 있어요. 저는 bootstrap의 dropdown에 dragula를 적용해보는 것이 목표였습니다. 먼저 작동되는 예시입니다. 왼쪽이 초기화면이구요. 오른쪽이 마우스 드래그 & 드롭으로 순서를 변경하는 화면입니다. dragula 예제는 다음 소스를 참고했습니다. Refe.. 더보기
Editor - Brackets Brackets Home page : http://brackets.io/ 스샷: http://brackets.io/ 요것도 꽤 인기가 있는 것 같아요. 윈도우, 리눅스 모두 설치가능합니다 :) 저는 이클립스를 주로 사용하지만, 주변 사람들을 보면 Brackets을 사용하더라구요. 가볍다, LINT extension이 존재한다. 자동완성 기능이 있다. 가볍다고 하니깐 저도 설치해봤습니다. 1. 우분투에서 Brackets 설치하기 위 그림에 파란색 버튼을 누르면 deb 파일이 다운로드 됩니다. 2. 설치할 수 있는 권한에서 dpkg -i 다운로드한 파일이름.deb 제가 받은 파일은 Brackets.1.3.Extract.64-bit.deb 이구요. dpkg -i Brackets.1.3.Extract.64-bi.. 더보기
웹 페이지 최적화에 도움되는 사이트 웹 페이지를 최적화하고 에러나 위험요소를 줄일 수 있는 방법이 많이 있지만 몇 개의 홈페이지에서 제공하고 있는 기능을 사용해보는 것도 좋네요. 1. CSS Lint (http://csslint.net/) 가운데 흰색 박스에 CSS를 입력하고 LINT 버튼을 누르면 에러나 워닝을 잡아줍니다. 모두 따를 필요는 없지만 그래도 문제가 될 수 있는 부분이라고 하니 적당히 고쳐주는게 좋을 것 같네요. 저도 한 30개 정도 나왔는데 주로 #id 가 문제였습니다. class로 변경하니깐 다 사라졌구요. 필요없는 CSS나 합칠 수 있는 CSS 코드도 발견해주니깐 더 깔끔한 CSS 작성에 도움이 됩니다. 2. JSHint (http://jshint.com/) JavaScript Hint입니다. JS 내용을 왼쪽에 입력하.. 더보기