-
Javascript, jQuery 2020‧07‧12
gulp (4 버전이상) 설정 및 사용 (feat. sass,localhost)
오래 전에 gulp 관련 포스팅을 하고 그 글을 보고 다시 한번 사용해 보려고 진행하는 데 달라진 점이 몇개 있어서 그냥 새로 공부한다 생각하고 플로그인 설치 및 사용을 정리해 보았다. 일단 gulp 부터 설치하자 이어서 사용할 플러그인들을 설치하자 gulp-uglify : js 압축 gulp-sass : SCSS 컴파일 gulp-minify-css : css 압축 del : 파일 삭제, browser-sync : […]
-
Javascript, jQuery 2020‧01‧30
정규식 개인 통관 고유 번호 체크
var regText = /^(p|P)[0-9]{11,13}$/; if(personNumber.length > 0 && !regText.exec(personNumber) ){ alert('개인통관고유번호를 정확히 입력해주세요.') } 개인통관 고유번호를 personNumber 로 받아오고 이를 체크하는 코드이다. p나 P로 시작하며 11~13자리의 숫자로 넣어야만 되도록 정했다.
-
Javascript, jQuery 2020‧01‧17
moment 로 count down 만들기
현재 날짜 + 시간과 마감 날짜 + 시간 지정해서 카운트 다운되게 만들려고 한다. 형식은 00:00:00 로 시분초 로 노출한다. 현재 날짜와 시간 가져오는 것을 본인은 api를 만들어서 서버 시간을 가져와서 만든 케이스이다. 컴퓨터 시간을 가져오는 new Date() 나 moment 자체의 moment() 는 사용자의 시간을 가져와서 카운트 다운되기에 조작이 될 가능성이 많다. 그래서 서버 시간을 가져오는 api 만드는 […]
-
Javascript, jQuery 2019‧03‧26
jQuery - 마우스 이동 좌표 값 부드럽게 가져오기
기존에는 $(엘리먼트).mosemove(function(e){}); 를 이용해서 작성했었는데 이상하게 잘 좌표를 가져오다가 멈추고 특정 구간에서 제대로 못가져오고 해서 방법을 찾던 중 아래 방법으로 처리한 후 부터는 좌표값을 움직임이 끝나던 끝나지 않던 항상 제대로 부드럽게 가져오게 되었다. $(document).bind('mousemove',function(e){ console.log(event.pageX); console.log(event.pageY); }); 혹 필요에 따라 $(document) 대신 엘리먼트등 대상을 넣으면 된다. 그리고 한번만 바인딩해야지 인터벌이나 애니메이션에 넣어서 계속 바인딩 시키면 […]
-
Javascript, jQuery 2018‧07‧04
audio context 볼륨 조절하기
audio context를 createBufferSource 를 이용해서 재생시킬 때 음원의 소리를 조절하고 싶어 gain 을 쓸 때가 있다. var AudioContext = window.AudioContext || window.webkitAudioContext; var context = new AudioContext(); source = context.createBufferSource(); var gainNode = context.createGain(); gainNode.gain.value = 0.5; //0~1 gainNode.connect(context.destination); source.connect(gainNode); gain.value 에 0부터 1까지 소숫점으로 볼륨을 지정해주면 된다.
-
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번 방식은 […]