개발자.. 너란놈..

[2021.05.07]

jquery autocomplete를 가져와서 사용 하였습니다.

샘플 소스는 아래의 링크를 통해서 보실 수 있습니다.

jqueryui.com/autocomplete/

※필수적으로 필요한 CSS와 Js가 있습니다.

Jquery 기반으로 되어있기 떄문에 Jquery가 필요하고 아래 CSS와 js를 필수적으로 넣어야 됩니다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

가능하면 소스파일을 따로 다운 받아서 사용하시기를 추천 드립니다. 

아래는 샘플입니다. 

var vJsonData = [
		{ label: "Test", value: "Test" }, { label: "Test1", value: "Test1" },{ label: "Test2", value: "Test2" },{ label: "Test3", value: "Test3" }
	];
$("#ID").autocomplete({ //input ID를 넣어주세요.
	source: vJsonData,
	open: function (event, ui) {
		$(this).autocomplete("widget").css({
			"width": 100 //width 조절
		});
	},
	minLength: 0,
	autoFocus: true,
	focus: function (event, ui) {
		return false; //클릭 시 이상한 것이 클릭 되면 추가해주세요. 
	},
	select: function (event, ui) { //autocomplete에서 선택 시
		//ui.item.label vJsonData의 label 데이터
		//ui.item.value vJsonData의 value 데이터
		return false;
	}
}).bind('focus', function () { //포커스가 되었을 때. 자동완성 데이터 전부 보여주고 싶을 때 이 부분을 넣어주세요. 		
	if (!$(this).val().trim())
		$(this).keydown();
});

[2021.05.07]

Random Key가 필요하여 만든 함수입니다.

for문의 j의 숫자를 조절하면 여러개 가져 올 수 있습니다.

function fnRandomText() {
    var arrSetRandomText = new Array();
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var j = 0; j < 10; j++) {
        for (var i = 0; i < 10; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        arrSetRandomText[j] = text;
        text = "";
    }

    return arrSetRandomText;
}

//for 첫번째는 랜덤 함수 갯수 정의

//for 두번째는 랜덤 함수 자리수 정의 EX) 현재 10개니까 10자리 랜덤 영어 나옴

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

  $('#calendar').fullCalendar({
        header: {            
            //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
            right : null
        },
        defaultDate: yyyymmdd, //yyyymmdd 날짜를 입력 하여야 합니다.
        editable: true,
        eventLimit: true,
        monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
        dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
        buttonText: {
            today: "오늘",
            month: "월별",
            week: "주별",
            day: "일별"
        },
        events:
        [
                {
                    id: "A",
                    title: 'My Event',
                    start: '2016-05-29',
                    description: 'This is a cool event'
                }
        ],
        eventRender: function (event, element) {
            if (event.A) {
                alert("A입니다.");
            } else if (event.B) {
                alert("B입니다.");
            }
        }
  });

[2021.05.07]

fullcalendar는 월 , 년 순으로 되어있습니다.

데이터를 이동 시키기 위해서는 아래의 함수인 gotoDate를 사용하여 달력을 이동 시킬 수 있습니다.

$('#calendar').fullCalendar('gotoDate', new Date(yyyy + '-' + mm + '-01'));

yyyy의 년도

mm의 월을 입력하면 원하는 해당 년도와 월로 이동 시킬 수 있습니다. 

[2021.05.07]

YYYYMMDD 데이터를 넣어주면 YYYY-MM-DD 형식으로 변경 시켜 줍니다.

//YYYYMMDDD => YYYY-MM-DD
function fnSetYYYYMMDD(vDate){
	var vformat = String(vDate);  (vCount String형변환)
	vformat = vformat.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); 
	
	return vformat
}

[2021.05.07]
Success의 데이터의 return의 결과를 보내고 싶을 때.
동기식으로 꼭 설정을 바꿔주고 보내야 됩니다.


꼭 async를 false로 해주고
return은 밖으로 빼 줘야지 defined가 나오지 않는다.

간략요약
비동기 , 동기 식의 데이터를 제대로 알지 못하였을 때 작성한 글인 것 같다.
동기식일때 async를 해두면 전체적으로 데이터를 처리하고나서 success를 타고 데이터가 넘어감.
비동기식일때는 async false로 두면 전체적으로 데이터를 전부 다 체크하고 success까지 체크한 다음에 로직으로 넘어감.
결국 return을 함수내에서 쓰려면 비동기식으로 무조건 써야되고 아니면 동기식으로 쓰고 return을 success 안에다가 넣아야 된다.

이제는 너무 잘 아는 ajax.. 그래도 모르는 기능들이 많겠지

$.ajax
    ({
        type: "GET",
        url: URL, 
        async: false, //동기식 , 비동기식 설정
        success: function (result) {					
            //값 없을 시
            if (result.MAIN.length == "0") {
                vResult = false;
            }
            else {
                vResult = true;
            }
        },
        error: function (xhr,status,error) {
            alert("[Error]"+error);
            return;
        }
    }); //end ajax

    return vResult; //아작스 밖
};

간략 요약

패스워드 , 패스워드 확인 데이터가 같은지 확인하는 로직으로 알고 만들었습니다.

6자리 이하 , 데이터가 같은지 필요하여 만들었습니다. 

function fnPwCompare(value1, value2) {

    var vPw1 = value1;
    var vPw2 = value2;

    //공백시 타지않게
    if (vPw1 != "" && vPw2 != "") {
        if (vPw1 != vPw2) {
            alert("비밀번호가 같지 않습니다.");
        } else if (vPw1 == vPw2 && vPw2.length < 7) {
            //같으니까 Off
            alert("비밀번호가 6자리 이하 입니다.");
        } else if (vPw1 == vPw2 && 7 < vPw2.length) {
            //에러가 있으면서 보더도 바뀔수도있으니까
            alert("성공!");
        }      
    }else{
		alert("비밀번호를 입력 해 주세요.");
	}		
};

사업자 등록 번호 체크

function fnCheckCRN(value) {
    var vCrnCode = value;
    if (vCrnCode.length == 10) {
        if (fnCheckBizID(vCrnCode)) {
            alert("사업자 번호가 맞습니다.");            
        } else {
            alert("잘못된 사업자 번호를 입력하셨습니다.");            
        }
    } else {
        alert("사업자 번호 자리수가 맞지 않습니다.");
        return false;
    }
};

사업자등록번호 검증 로직

function fnCheckBizID(bizID) {
    // bizID는 숫자만 10자리로 해서 문자열로 넘긴다.
    var checkID = new Array(1, 3, 7, 1, 3, 7, 1, 3, 5, 1);
    var tmpBizID, i, chkSum = 0, c2, remander;
    var result;

    bizID = bizID.replace(/-/gi, '');

    for (i = 0; i <= 7; i++) {
        chkSum += checkID[i] * bizID.charAt(i);
    }

    c2 = "0" + (checkID[8] * bizID.charAt(8));
    c2 = c2.substring(c2.length - 2, c2.length);
    chkSum += Math.floor(c2.charAt(0)) + Math.floor(c2.charAt(1));
    remander = (10 - (chkSum % 10)) % 10;

    if (Math.floor(bizID.charAt(9)) == remander) {
        result = true; // OK!

    } else {
        result = false;
    }
    return result;
}