주정뱅이 개발자

Type & Interface

1. 공통점 객체 타입을 정의하는 키워드 정적으로 모양을 알 수 있는 객체 타입만 정의 Interface에 대한 extends와 Class에 대한 implements 키워드를 사용하여 관계 정의 가능 type TypeCase = { n : number; } interface InterfaceCase { n2 : number; } interface Test1 extends TypeCase{}; interface Test2 extends InterfaceCase{}; class TestClass1 implements TypeCase{ ... } class TestClass2 implements InterfaceCase{ ... } 2. 차이점 Type은 선언 병합이 불가능, Interface는 선언 병합이 ..

Datepicker MinDate

시작일 변경시 종료일과 최소날짜를 세팅 해준다. $("#open_date").datepicker({ dateFormat: "yy-mm-dd", prevText: '이전달', nextText: '다음달', yearSuffix: '년', dayNamesMin: arrDayMin, monthNames: arrMonth, showMonthAfterYear: true , onSelect : function (date){ const min_date = $(this).datepicker("getDate"); $("#end_date").datepicker('setDate', min_date); $("#end_date").datepicker('option', "minDate", min_date); } }); $("#en..

필수사항 체크

class를 보고 필수사항을 체크해준다. var checkOK = true; function checkMust(){ checkOK = true; $(".must").each(function(){ if($(this).val().trim() == ""){ checkOK = false; let th_name = $(this).parent().parent().find("th")[0].innerText; alert("필수항목 " + th_name + "를 입력하지 않으셨습니다."); $(this).focus(); return false; } }); }

async & await

1. async async 함수를 호출하면 Promise 객체를 반환 → then 메소드 사용 가능 동기/비동기 구분 없이 try/catch로 예외처리 가능 2. await async가 붙은 함수 내부에서만 사용 가능 async가 반환하는 promise로부터 결과값 추출 → 결과값을 줄때까지 대기 then 메소드 처럼 동기 코드 처리 가능 async login() { await Server.post("/user/login", {userId : (this.userId.el as HTMLInputElement).value, password: (this.password.el as HTMLInputElement).value}) this.remove(); applicationInit(); } login.then(..

FileReader 이미지 미리보기

반려동물 프로필 사진 $(document).on("change", "input[name=POPFILE]", function(e){ var file = e.target.files[0]; if (!file.type.match("image.*")) { return alert("only image"); } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ $("#SHOWFILE").css("background-image", "url('" + e.target.result + "')"); $("#SHOWFILE").click(function(){ removeFile(); }); } $(this).css("di..

var, const, let

1. var 재선언 가능 재할당 가능 var test = "a"; console.log("test : ", test); // test : a var test = "b"; console.log("test : ", test); // test : b 2. let 재선언 불가능 재할당 가능 let test = "a"; console.log("test : ", test); // test : a let test = "b"; console.log("test : ", test); // already 에러 발생 test = "c" console.log("test : ", test); // test : c 3. const 재선언 불가능 재할당 불가능 : 일회용 변수 let test = "a"; console.log("te..

Vue-awesome-swiper

1. CDN 2. Options Option Name Value Description freeMode Boolean 슬라이드하듯이 자유로이 왓다갔다함 sliedsPerView int || auto 한페이지에서 보여줄 슬라이드 갯수 on tab || click || slideChange 탭 || 클릭 || 슬라이드 3번 설명 참조 navigation Object 네이게이션 설정 4번 설명 참조 centeredSlides Boolean Ative 상태의 슬라이더 중앙 배치 여부 3. on > click 에서 swiper를 잡아야하는 경우 swiper 태그에 ref 속성을 선언 character_swiper: { slidesPerView: 'auto' , speed : 500 , on : { click : f..

Event

1. HTML @click 이벤트에 click_wish 만 적고 뒤에 파라미터들이 없다면 자동으로 이벤트($event)를 전송 @click이벤트에 click_wish(a, $event) : 다른 파라미터도 전송할때는 $event를 직접 적어줘야 한다 2. Method target : 실제 이벤트가 발생한 곳 (ex. figure) currentTarget : 이벤트 리스너를 작성한 곳 (ex. button) click_wish : function (event) { console.log(event.target.tagName); console.log(event.currentTarget.tagName); }

배열 데이터 변경시 화면 갱신

데이터 변경 시 화면은 업데이트 되지 않지만, 데이터는 업데이트 되어있을때 1. 화면이 갱신 되지 않는 경우 인덱스로 배열에 있는 항목을 직접 설정하는 경우 배열 길이를 수정하는 경우 2. 강제 화면 갱신 this.$forceUpdate(); 허나 이 방법은 IOS에서 작동하지 않았다. 그래서 3번 방법을 추천한다. 3. Key 값 지정 이 방법은 key값 변경시 화면이 업데이트 된다. IOS에서도 잘 작동한다. {{item.cate_name}}

Ajax Option

Option Description Type ContentType 보내는 데이터 타입 String(Json) DataType 받는 데이터 타입 String(Json) traditional 전송 데이터 직렬화 여부 (주로 배열을 전송할때 사용) Boolean crossDomain 크로스 도메인 허용 여부 Boolean xhrFields xhr객체에 fieldName-fieldValue 형태로 설정 (crossDomain 허용 후 withCredentials 설정할때 사용) Object

$.extend() - merge기능의 함수

$.extend() 는 여러개의 객체를 하나로 합쳐준다. //$.extend(대상, 객체1, 객체2, ... , 객체n); var extendVar = $.extend({}, {a : 1, b : 2}, {b:3, c:{c1 : 11, c2 : 22}}, c:{c2 : 33}); //extendVar = {a : 1, b : 3, c : {c1 : 11, c2 : 33}} 결과는 extendVar에 a, b, c 모두 들어가게된다. 그리고 중복된 b의 값은 3이 된다. 그리고 c의 값은 {c1:11, c2:33} 이된다. 뒤의 c에 없던 c1은 사라지지 않는다. ​ 즉, 뒤의 값들로 덮어씌워진다.

Drag And Drop 정렬 변경

드래그 앤 드롭으로 정렬 순서를 변경한다. 여기서는 vuejs에서 사용했지만 사용법은 일반 script와 같다. 1. CDN 추가 2. 테이블 생성 : tbody를 잡을 방법 하나와 idx값(Query에서 필요한 값) 필요 정렬순서 메뉴코드 메뉴명 NEW아이콘 사용여부 사용여부 IDX {{item.sortingNumber}} {{item.menuCode}} {{item.menuName}} {{item.usingNewIcon == true ? '사용' : '사용안함'}} {{item.isUsing == true ? '사용' : '사용안함'}} {{item.idx}} 3. tbody의 변경을 감지할 script 생성 변경과 동시에 저장을 하려면 여기에 추가. 여기서는 저장버튼을 따로 놔서 따로 functio..