반응형
btn.addEventListener('click', () => {
  anime(box, {
    prop: 'margin-left',
    value: 500,
    duration: 1000,
  });
});

function anime(selector, option) {
  let startTime = performance.now();
  requestAnimationFrame(move);

  function move(time) {
    //각 사이클 마다 걸리는 누적 시간
    let timelast = time - startTime;

    //매 반복횟수마다 현재 걸리는 누적시간값을 전체시간으로 나누면 0~1사이의 실수로 반환 가능
    //progress : 설정한 시간 대비 현재 반복되는 모션 진행상황을 0~1사이의 소수점으로 나타내주는 진행률 (x100 -백분율)
    let progress = timelast / option.duration;

    console.log('진행률', progress);

    if (progress < 1) {
      requestAnimationFrame(move);
    }

    //고정된 반복횟수 안에서 제어할 수 있는건 각 반복 사이클 마다의 변화량이기 때문에
    //변경하려고 하는 targetValue값에 진행률을 곱해서 변화량을 제어
    box.style[option.prop] = option.value * progress + 'px';
  }
}

 

반응형

아래 EmailJs를 통하여 이메일을 JavaScript를 가지고 이메일을 보낼 수 있다.

 

https://www.emailjs.com/

※ 회원가입을 하기전의 이메일 아이디로 이메일이 가기 때문에 이메일을 받고 싶은 이메일로 하는 것이 좋다.

 

Send email directly from your code | EmailJS

No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!

www.emailjs.com

 

회원가입을 하고 나면 Email Service를 진행한다.

여러 플랫폼으로 사용 할 수 있는데 필자는 Gmail을 사용하였다. 

 

 

아래와 같이 Name과 Service_ID를 입력 하는데 필요한 정보니 입력을 해준다.

+

 

이제 메일 서비스를 하기위한 기본적인 세팅이 끝났고, 이메일을 받을 때 어떤 형식으로 받을지 세팅을 아래에서 해줄 수 있다.

 

 

아래의 이메일 형식으로 데이터를 받아서 유동적으로 보내 줄 수가 있고, {{}}는 변수명으로 나중에 직접 작업하는 HomePage에 변수명을 일치 시키면 그대로 적혀서 들어온다.

여기까지 EmailJS의 세팅은 완료가 되었고 이제 아래 사이트에서 기본적인 EmailJs를 Script에 어떻게 넣는지 알수있는 사이트이다. 

EmailJS을 어떻게 사용하는지 알려주는 사이트이다.

 

Getting Started | EmailJS

 

Documentation | EmailJS

Well organized and easy to understand documentation with examples!

www.emailjs.com

 

아래 링크는 Form을 어떻게 입력하는지 알려주는 사이트 링크이다.

Creating a contact form | EmailJS

 

Creating a contact form | EmailJS

The tutorial step will explain how to integrate EmailJS SKD with a HTML from

www.emailjs.com

 

아래의 Head 쪽에 Script을 입력해줍니다.

위쪽의 빨간 박스는 나의 public key를 입력하는 란 입니다.

아래쪽의 빨간 박스는 기능을 동작하는 EmailJS의 함수들 입니다. 

public key는 아래에서 볼 수 있습니다.

 

Form 요소는 Script를 가져온 링크 조금 아래에 있습니다.

name은 Email Templates에서 입력한 {{}} 여기의 변수명이라고 생각하시고 작업을 해주시면 됩니다.

 

Send(Submit) 버튼을 클릭 하게 되면 이메일을 보낼 수 있고 제대로 보내지면 Console창에 Success! 라고 뜹니다.

 

반응형

1. 구글맵스에서 원하는 위치값을 찍어서 좌표값 복사
2. 카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기
3. 해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

 

구글맵스에서 원하는 위치값을 찍어서 좌표값 복사

 

https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/

 

카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기

 

해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

반응형

API에서 실제 데이터를 갱신하는 날짜 + 시간으로 데이터를 가져왔는데 우리나라 시간이 아닌 국제적인 표준 시간으로 날짜를 가져와서 골치가 아팠던 적이 있습니다. Coordinated Universal Time (UTC)

 

 

 

"2023-02-07 04:38:11"

위와 같은 데이터가 있을경우 그대로 표기 하였을 때 아래와 같은 결과물을 얻을 수 있습니다.

 

var vTime = new Date("2023-02-07 22:38:11");
console.log (GetTokenTime); //Tue Feb 07 2023 22:38:11 GMT+0900 (한국 표준시)

실제 시간 그대로 세팅이 되서 표기가 되기 때문에 한국 표준시로 세팅을 하려면 아래와 같이 포멧팅을 변경 해주어야 합니다.

 

var vTime = new Date("2023-02-07T22:38:11Z");
console.log(vTime) //Wed Feb 08 2023 07:38:11 GMT+0900 (한국 표준시)

TimeZone을 세팅을 해두면 현재 세팅되어있는 표준 시로 자동으로 날짜가 더해지니 이와같이 사용하면 될 것 같습니다.

 

 

반응형

오랜만에 또 개발 관련된 블로그를 적습니다.

 

현재 기준으로 저번달 첫일 , 다음달 말일을 구해서 세팅해야 되서 아래와 같이 구현하였습니다.

 

하나의 함수로 사용하기 위해 파라미터는 '현재날짜' , '이전 , 다음'을 넣어두었습니다

 

코드는 아래와 같이 사용 하면 됩니다.

 

//vDate : yyyymmdd or yyyy-mm-dd / vType : Prev(이전달) , Next(다음달)
function fnSetPrevNextDate(vDate, vType) {

    var vValue = vDate;
    var vValue_Num = vValue.replace(/[^0-9]/g, "");

    if (_fnToNull(vValue_Num) == "") {
        _fnAlertMsg("날짜를 입력 해 주세요.");
        return false;
    }

    //8자리가 아닌 경우 false
    if (vValue_Num.length != 8) {
        _fnAlertMsg("날짜를 20200101 or 2020-01-01 형식으로 입력 해 주세요.");
        return false;
    }

    var vYYYY = vValue_Num.substring(0, 4);
    var vMM = vValue_Num.substring(4, 6);
    var vDD = vValue_Num.substring(6, 8);

    var d = new Date(vMM + "/" + vDD + "/" + vYYYY);
    var monthOfYear = d.getMonth();
    
    if (vType == "Prev") {
        d.setMonth(monthOfYear - 1);
        vValue = d.getFullYear() + "-" + _pad(d.getMonth() + 1, 2) + "-" + "01";
    }
    else if (vType == "Next") {
        d.setMonth(monthOfYear + 1);
        var vDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
        vValue = vDate.getFullYear() + "-" + _pad(vDate.getMonth() + 1, 2) + "-" + _pad(vDate.getDate(), "2");
    }    

    return vValue;
}

 

//숫자 width만큼 앞에 0 붙혀주는 함수 EX) widht = 2일떄 1은 01로 찍힘
function _pad(n, width) {
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}
반응형

InnerHTML , append 등등

새롭게 데이터를 받아서 그려진 조회 리스트 및 데이터의 HTML의 데이터를 가져오기는 쉽지 않은거 같습니다.

 

Height 길이를 가져와야되는 부분이 생겼는데 해당 부분 가져오는 스크립트 입니다.

$("생성자").prop('scrollHeight');

오랜만에 삽질 덕분에 1시간 정도 허비 한거 같습니다.. ㅎㅎ;;

 

 

반응형

오랜만에 찾아 뵙습니다.

 

현재 회사에서는 Ajax 파리미터를 단일건으로만 보내고 있었습니다.

Object 형식으로 DataTable 형태로 파라미터를 던져 중요한 데이터만 가지고 쿼리를 조지는 형태로만 사용중이였는데

MASTER / DETAIL 형태로 데이터를 가져가야만 하는 로직이 생겨서 아래와 같이 정리합니다.

 

1. JAVASCRIPT (Json 형태 만들기)

var array_mst = new Array();
        var array_dtl = new Array();
        var final_vJsonData = new Object();
        var vJsonData_MST = new Object;
        vJsonData_MST.MST_A = "";
        vJsonData_MST.MST_B = "";
        vJsonData_MST.MST_C = "";
        vJsonData_MST.MST_D = "";
        array_mst.push(vJsonData_MST);

        $.each($("#PutAway_Result_Area tr"), function (i) {

            var vJsonData_DTL = new Object;

            vJsonData_DTL.DTL_A = "";
            vJsonData_DTL.DTL_B = "";
            vJsonData_DTL.DTL_C = "";
            vJsonData_DTL.DTL_D = "";

            array_dtl.push(vJsonData_DTL);
        });

        final_vJsonData.MST = array_mst;
        final_vJsonData.DTL = array_dtl;

 

2. AJAX

$.ajax({
    type: "POST",
    url: "",
    async: true,
    dataType: "json",
    data: { "vJsonData": _fnMakeJson(final_vJsonData) },
    success: function (result) {
        alert();
    }, error: function (xhr, status, error) {
        console.log(error);
    }
});

//C#의 JsonConvert.DeserializeObject<DataSet> 쓰기위해서는 양쪽의 대괄호를 빼야됨
function _fnMakeJson(data) {
    if (data != undefined) {
        var str = JSON.stringify(data);
        if (str.indexOf("[") == -1) {
            str = "[" + str + "]";
        }
        return str;
    }
}

 

3. C#

DataSet ds = JsonConvert.DeserializeObject<DataSet>(JSON파라미터);

 

이와같이 Dataset으로 데이터를 가져와서 조지면 되는것을 2시간이나 허비하면서 삽질 하여 적어둡니다.

 

다음엔 이런 실수 안하길..

반응형

안녕하세요

오랜만에 글을 적으러 왔습니다.

 

프로젝트 로컬에 이미지가 있는지 여부를 확인 해야되는 상황이 있었는데 아래와 같은 코드로 

확인 후 Boolean 처리로 할 수 있는걸 알게 되어서 정리 합니다.

 

이미지뿐만 아니라 다른 파일들도 가능 할 것으로 보입니다.

//이미지 여부 체크
function fnImgChk(url) {

    var vResult;

    $.ajax({
        url: url,
        type: 'HEAD',
        async: false,
        success: function () {
            vResult = true;
        },
        error: function () {
            vResult = false;
        }
    });

    return vResult;
}

+ Recent posts