개발자의 끄적끄적

[javascript/jquery] filereader 로 업로드된 이미지 가로/세로 구하기 javascript 이미지 업로드시 filereader 를 이용하여 이미지 객체에 대한 정보를 뽑거나, width / height 정보를 뽑아내야 할때가 있습니다! 그럴때 사용하면 되는 샘플 공유해봅니다. 아래처럼 일단 filereader 객체로 뽑은 이미지를 담아놓을 보이지 않는 img 태그를 하나 생성합니다. 그리고는 파일 업로드 input 에 onchange 를 선언하고, 파일이 선택 될시에 동작하는 함수를 아래처럼 만들어 줍니다. function get_img_size() { var reader = new FileReader(); reader.onload = function (e) { $tmp_img = ..

[javascript] 아임포트 페이팔 결제 팝업 연동 방법 요즘 결제 모듈 연동할때 아임포트를 많이들 사용하십니다! 결제 방식에 따라서 rest api 를 호출하기도 하고, javascript 방식으로 처리하기도 하는데요, 저는 javascript 로 처리하는 내용이 있었습니다. 그중에서 페이팔 연동을 하는데, 아무래도 스크립트로 처리하다보니 페이지 전환 등등 문제들이 좀 있어서, 팝업으로 할수는 없나 찾아보다가 간단하게 처리가 되서 공유하고자 올려봅니다! IMP.request_pay({ pg : 'paypal', pay_method : 'card', ... }, function(rsp) { ... }); 위 내용은 아임포트 페이팔 결제 연동 기본 틀입니다. 아래는 아임포트 페이팔 결제 연동 기본 틀에..

[javascript/jquery] 자바스크립트 filereader 사용예제 javascript에서 동기방식으로 이미지 업로드 구현하는경우, 선택한 이미지를 사용자 화면에 미리 보여줘야 되는 경우가 있습니다. 그럴때 사용할수 있는 샘플 소스입니다. 위 내용을 보시면 아시겠지만, input file 에서 파일이 선택되면 onchange 가 동작하여 file 객체를 담아서 filereader 를 호출 및 이미지를 계산하게 됩니다. console.log 부분에 담겨있는 e.target.result 는 이미지 url 을 표시할때 사용하시면 됩니다. 사용전 테스트를 해보시고 수정하셔서 반영하셔야 할수도 있습니다! 참고하세요!

[javascript/jquery] 자바스크립트 date 를 timestamp 로 변환방법 자바스크립트에서 date 형식을 timestamp 형식으로 변환해야 할때가 있습니다. 그럴때 사용하는 방법입니다. var date_str = "2020-11-05 01:00:00"; var date_timestamp = new Date(date_str); console.log(date_timestamp); 위 예제를 보시면, date_str 이라는데 date 포맷 형태의 날짜가 들어있구요. 이걸 Date 객에 넣어서 date_timestamp 에 담습니다. 그리고 이건 console.log 로 출력하면!! timestamp 형식의 결과가 나옵니다. 여기서 주의할점은 ms 단위로 나오기때문에 초단위로 결과를 얻으려면..

[javascript/jquery] jquery select 태그 선택값 가져오기 jquery로 특정 select태그에 선택된 값을 불러올때 사용 하는 방법입니다. 아래와 같은 select 태그가 있고, 그 안의 옵션들 중에서 2에 해당되는데 선택되어진 상태라고 가정하고 1 2 위 태그의 선택값을 불러오는 예제입니다. $("#id_select option:selected").val(); // id로 값 불러오기 $("select[name=name_select]").val(); // name로 값 불러오기 위 내용을 보시면 아시겠지만 select 태그에 선언되어 있는 name 이든 id 이든 2가지 다 선택값을 불러올 수 있습니다. 참고하세요!

[javascript/jquery] jquery로 disabled 효과 적용/해제 방법 jquery로 특정 태그에 disabled 효과를 주거나 제거할때가 있습니다. 그럴때 attr을 이용하시면됩니다. 기본 사용법입니다. $("대상").attr("disabled", true); $("대상").attr("disabled", false); 예제입니다. 위와같은 input 태그가 있다고 가정하고, $("#id_input").attr("disabled", true); // $("#id_input").attr("disabled", false); // 실행하면 위 예제처럼 보여지게 됩니다. attr("disabled", true)

[javascript/jquery] jquery attr onclick 방법 및 예제 이전 글에서 html onclick 새창으로 띄우는 법을 작성했습니다.! 이번에는 jquery 로 특정 태그에 onclick =window.open 을 추가하는 방법입니다. $('대상').attr("onclick", "window.open('주소')"); 이것도 어려울것 없이 위를 보시면 $(대상) < -- 내가 속성을 부여하고자 하는 대상에 oncilck="window.open('주소')" 라는 속성을 추가하는 예제입니다. attr은 onclick 말고 엄청 다양하게 쓰이니 꼭 찾아서 한번씩 보시는걸 추천드립니다! 참고하세요!

[javascript/jquery] ajax 동작여부 확인방법 ajax 가 실행되는지, 종료되는지 혹은 실행중에 종료가 안되는지 등등 여러가지 현상을 확인하기 위해서 사용할 수 있는 방법입니다! $(function)() { $(document).ajaxStart(function () { console.log("start"); }); $(document).ajaxStop(function () { console.log("stop"); }); }) 위에 적힌 소스처럼 .ajaxStart 는 ajax 가 실행될 때 동작을 하고 .ajaxStop 는 ajax 가 종료될 때 동작을 합니다. 참고하세요!