-
Javascript, jQuery 2017‧10‧16
JS-현재 위치(지오로케이션) 구글맵 api 에 표시
html5의 지오로케이션(geolocation)을 이용해서 위치를 가져온 후 구글맵에 넣는 코드 html에 아래 엘리먼트를 추가해 준다. <div id="map-canvas"></div> 자바스크립트 부분에 아래 코드를 넣어준다. window.onload = getLocation; function getLocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(locationSuccess, locationError, geo_options); }else{ console.log("지오 로케이션 없음") } }; // getLocation var latitude, longitude; function locationSuccess(p){ latitude = p.coords.latitude, longitude = p.coords.longitude; initialize(); } // locationSuccess function […]
-
Javascript, jQuery 2017‧10‧16
JS-(페이스북 API) access token 가져오기
페이스북 API를 이용해서 개발하려고 할 때 access token을 요구한다. 개인 인증이 있고, APP 인증이 있다. 두 용도는 다르다. 개인의 아이디의 친구 목록이나 포스팅을 가져오려면 개인 인증을 이용하고, APP은 아시다시피 페이스북의 APP이다. 그 앱이 게임에 들어가거나 소셜 로그인하거나 하는 운영하는 APP의 사용자들을 대상으로 취하는 용도이다. 개인용 인증 (단! 로그인된 상태여야 한다.) FB.getLoginStatus(function(response) { if (response.status === […]
-
Javascript, jQuery 2017‧08‧31
jQuery - 체크된 라디오 버튼 선택
<input type="radio" name="selectTemplate" value="0"> <input type="radio" name="selectTemplate" value="1"> <input type="radio" name="selectTemplate" value="2"> 이렇게 그룹된 라디오 버튼이 있을 때 선택된 것이 있는지 체크하려면 아래 선택자를 활용하자. $('input[name=selectTemplate]:checked')
-
Javascript, jQuery 2017‧07‧18
npm 옵션 (단축키)
npm - 옵션을 찾을 때가 있어서 적어놓는다. -v: --version -h, -?, --help, -H: --usage -s, --silent: --loglevel silent -q, --quiet: --loglevel warn -d: --loglevel info -dd, --verbose: --loglevel verbose -ddd: --loglevel silly -g: --global -C: --prefix -l: --long -m: --message -p, --porcelain: --parseable -reg: --registry -f: --force -desc: --description -S: --save -P: --save-prod -D: --save-dev -O: --save-optional -B: --save-bundle -E: --save-exact -y: --yes -n: --yes false ll and la commands: ls --long 공식 문서파일은 : https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties
-
Javascript, jQuery, Reactjs 2017‧05‧18
Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기
모듈 설치 npm install --save-dev style-loader css-loader sass-loader node-sass cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자. 이제 아래 두가지 방식 중 선택하여 작업한다. 1. .css 파일을 뽑아내지 않고 React에 담는 방식 2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel="stylesheet" ... > 태그로 흔히 우리가 기본적으로 사용하는 그 방법) 1번 방식은 […]
-
Javascript, jQuery 2017‧04‧26
JS-호이스팅(hoisting)
갑자기 호이스팅이라고 들었을 때 무엇인지 궁금했다. 찾아보니 스크립트 작성할 때 이미 쓰고 있는? 혹은 자연스럽고 당연스럽게 쓰여지고 있었다. 독학의 단점은 이렇게 명칭이 뭔지 모를 때가 있고 가끔 개념 정리중에 누락된게 있다. 먼저 호이스팅 간단하게 정리하기 전에 함수 쓰는거에도 명칭이 있었더라 (난 필요에 따라 편한대로 썼었는데 얘들도 이름이 있었다는거에 너무 미안했다 ㅠ) 함수 선언문 : function test(){}; […]
-
Javascript, jQuery 2017‧03‧27
JS - textarea 폰트 사이즈 변경
제이쿼리로 하면 간단하지만 자바스크립트로 폰트 사이즈를 직접 변경할 때 아래처럼 getElementById로 선택자를 선언하고 수정하면 된다. document.getElementById("엘리먼트ID").style.fontSize = '20px'; 만약 클래스값으로 선택하고자 한다면 getElementsByClassName('클래스명') 이렇게만 지정하면 오류난다. 못찾는다. getElementsByClassName('클래스명')[0] 이렇게 순번을 넣어 개별적으로 선언해주어야 오류나지 않는다.
-
Javascript, jQuery 2017‧03‧17
PC와 모바일에서 텍스트를 클립보드에 복사 시키기
현실적으로 ios와 안드로이드 및 pc를 만족시키는 클립보드 스크립트는 없다. 기기마다 또는 os 마다 보안 정의도 다르기 때문이기도 하다. 아무튼 이 모든 기기를 만족시켜주기 위해서 두개의 플러그인을 사용해서 이용해보았다. clipboard.js : https://clipboardjs.com/ copy2clipboard.js 자세한 사용법은 각 사이트를 참고하면 되고, 아래는 작성해본 코드이다. <script src="./js/clipboard.min.js"></script> <script src="./js/copy2clipboard.js"></script> head 안에 넣어서 스크립트를 로드 시킨다. <textarea name="copytextarea" id="copytextarea" cols="30" rows="2" […]
-
Javascript, jQuery 2017‧03‧02
자바스크립트를 이용해 위도,경도를 주소로 변환하기
위도 경도 데이터는 있는데 이를 주소명, 지역명으로 변환하고 싶을 때 사용한다. API 키 발급과 정보 : https://developers.daum.net/services/apis/local/geo/coord2addr var lon = '경도'; var lat = '위도'; $.ajax({ url: 'https://apis.daum.net/local/geo/coord2addr?apikey=발급받은API키&longitude=' + lon + '&latitude=' + lat + '&inputCoordSystem=WGS84&output=json', type: 'GET', cache: false, context: {}, crossOrigin: true, success: function(data) { var jsonObj = $.parseJSON(data); var contentText = document.getElementById('content'); contentText.innerHTML […]
-
Javascript, jQuery 2017‧03‧02
체크박스 라벨을 이미지 만들었고 클릭해도 반응 없을 때
input 중에 checkbox를 만들고 checkbox는 안보이게 포지션 잡은 뒤 label안에 디자인된 체크박스를 넣었을 때 가끔 이 안의 이미지를 눌러도 checkbox 값이 변경되지 않는 경우가 있다. 이럴 때 스크립트를 넣어주자. $("label img").on("click", function() { $("#" + $(this).parents("label").attr("for")).click(); });