히파루스의 솔직한 여행 이야기

블로그 : https://blog.addpipe.com/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/

git : https://github.com/addpipe/simple-recorderjs-demo

사용법 : 위 github로 접속하여 소스 다운로드만 하면 잘 됨
github.com/addpipe/simple-recorderjs-demo/archive/master.zip

js폴더 하위에 app.js만 수정해주면 되는데 기본은 php로 되어있다.
난 classic asp이므로 function createDownloadLink(blob) 이 부분을 수정해주면 된다.
원본은 리스터로 업로드 버튼을 클릭하면 업로드를 진행하게 되어 있는데 자동으로 업로드를 해줘야 했기 때문에
upload.addEventListener("click", function(event) {
})

// 자동업로드시작
  var xhr=new XMLHttpRequest();
  xhr.onload=function(e) {
      if(this.readyState === 4) {
          alert(e.target.responseText);
      }
  };

  var fd=new FormData();     

  fd.append("audio_data", blob, "filename.wav"); // 파일 이름은 원본 소스에 날짜시간 뭐 이런식으로 되어 있는데 알아서 바꿔주면 된다.

  fd.append("userid", "myid");

  xhr.open("POST","/upload/voiceupload.asp",true); //js폴더 기준으로 업로드 파일의 경로를 제대로 지정해줘야 한다.

  xhr.send(fd);

// 자동업로드끝

주의사항 : SSL(https)가 아닌경우 권한 문제 발생되므로 반드시 SSL환경에서 구현할 것
edge, (android, ios, pc)

chrome, safari 등 어지간한 브라우저는 다 지원함.
망할 IE는 안됨. 당연히

1회성 시간 비교가 아닌 타이머 같은 시스템을 구현할 경우 서버 시간과 클라이언트 시간이 차이가 나거나 이용자의 악의적인 클라이언트 시간 변경에 따른 시간차가 발생할 경우가 예상될 경우 해결방법은 여러가지가 있겠다.
가령 매 초마다 ajax로 호출하여 서버쪽 시간을 받아오고 클라이언트 시간은 사용 자체를 안한다던지
좀 더 투박한 방법이지만 hidden iframe 등을 사용하여 지속 갱신해가며 마찬가지로 클라이언트 시간은 사용 안하는 방법 등등

하지만 두 방법 모두 지속적인 서버 호출이란 단점이 존재하므로 사용하기엔 바람직해보이지 않는다.

아래 소개하는 방법을 요약하자면

1. 페이지가 처음 로딩될 때 서버시간을 받아온다.
2. 클라이언트 시간을 추출한 후 서버시간과 클라이언트와의 시간차를(초) 구하여 클라이언트 시간을 보정해주면 그만이다.
3. 이제 타이머를 동작시키면 정확히 서버와 클라이언트 시간은 일치하게 된다.

그런데 여기서 한가지 문제가 있다.
만약 시간이 지속 경과하는 와중에 페이지가 로딩된 이후 클라이언트 컴퓨터의 시간을 바꿔버린다면 위 로직은 망가져버린다.
때문에 interval함수 내부에는 매번 클라이언트 시간을 구하지 말고 페이지가 로딩될 당시의 클라이언트 시간에 interval의 간격시간만큼 더해주면 깔끔하게 해결된다.

아무리 시간을 앞으로 더하든 뒤로 돌리든 서버시간과 일치하는 타이머가 구현된다.

<%
Function CONVERTDATETIME(objDate, dateFormat)
Dim rtnValue

    if false = IsDate(obj_date) then
        obj_date = now
            end if

            if dateFormat = "" then
                dateFormat = "yyyy-mm-dd h:n:s"
            end if

    rtnValue = Replace(dateFormat, "yyyy", Year(objDate))
    rtnValue = Replace(rtnValue, "mm", right("0" & Month(objDate) , 2))
    rtnValue = Replace(rtnValue, "dd", right("0" & Day(objDate) , 2))
    rtnValue = Replace(rtnValue, "h", right("0" & Hour(objDate) , 2))
    rtnValue = Replace(rtnValue, "n", right("0" & Minute(objDate) , 2))
    rtnValue = Replace(rtnValue, "s", right("0" & Second(objDate) , 2))

    CONVERTDATETIME = reValue
End Function
%>


<script type="text/javascript">
        var tStart = new Date("<%=regESADATE %>");
        var tClient = new Date();

<%
       Dim SERVERTIME
       SERVERTIME = CONVERTDATETIME(Now(), "")
%>

        var tServer = new Date("<%=SERVERTIME %>");
        var rSecond = (tClient.getTime() - tServer.getTime()) / 1000;

        if (rSecond < 0) {
            tClient = new Date(tClient.getTime() + (Math.abs(rSecond) * 1000));    
        } else {
            tClient = new Date(tClient.getTime() + ((rSecond * (-1)) * 1000));
        }

var progressTimerId;

progressTimerId = setInterval(function() {
    var tStart = new Date("<%=regESADATE %>");
    tClient = new Date(tClient.getTime() + 1000);
}, 1000);
</script>

<select name="SELECTBOXIDX" id="SELECTBOXIDX">
<option value="1" IDX="A">
<option value="2" IDX="B">
</select>

        $("#SELECTBOXIDX").change(function() {

            var IDX = $(this).find('option:selected').attr("IDX");

            alert(IDX);

        });

기본 jquery, jquery ui 등 include시켜놓고

<div id="DIVDRAGAREA">
이 안에 테이블도 좋고 div도 좋고 ul ui 등도 좋고.. 여하튼 리스트로 구현해두면 됨
</div>

        $("#DIVDRAGAREA").sortable({
            stop: function(event, ui) {
                alert("New position: " + ui.item.index());
                //필요시 이 안에 ajax로 update service를 call 때리면 됨                
            }
        });

<SELECT id="MYSELECT">
<OPTION ... IDX="1">
<OPTION ... IDX="2">
</SELECT>

        $("#MYSELECT").change(function() {
            alert($(this).find('option:selected').attr('IDX'));
        });

var str = "Hi my name is hong Ill";
str = str.replace(/i/g,"X");
alert(str);

str 문자열 중 i를 모두 대문자X로 치환시킴
g : 전체 검색
※ g옆에 i를 넣을 경우 대소문자 구분 안하고 모두 치환 가능

str = str.replace(/i/gi,"X"); 

이유는 모르겠지만 외부에서 받은 프로젝트도 아니고 내가 개발한 프로젝트인데 어느날 컴파일 / 빌드를 해보았더니 Multiple commands produce Error가 뜨며 전혀 실행 될 기미가 안보였다.

해결방법은 간단했다.
https://stackoverflow.com/questions/50718018/xcode-10-error-multiple-commands-produce

구글신 다음신인 스택오버플로우신께서 친히 알려주신다.
Xcode > Target > Build phases > Copy Bundle Resources에서 info.plist를 - 버튼으로 날리라 하심

1. 웹사이트https://developer.apple.com 로그인
https://developer.apple.com/download 이동 
Operating Systems 탭을 누르면 iOS 14 beta 그룹에서 Install Profile 버튼 터치

2. 아이폰
웹사이트에서 다운로드 된 프로파일 실행을 위해 설정앱 실행
프로파일이 다운로드됨 터치
소프트웨어 업데이트에서 iOS 14 Developer Beta 업데이트 가능
https://support.apple.com/ko-kr/HT209435

개발을 위해 Xcode 12 beta도 동일하게 
1. 웹사이트https://developer.apple.com 로그인
https://developer.apple.com/download 이동 
Application 탭 터치 후 보이는 Xcode 12 beta 다운로드

update시 불필요하게 select를 하고 true면 false로 update false면 true로 바꾸지 말고
아래처럼 그냥 ^ 1로 update시켜주면 끝남

UPDATE table SET del = del ^ 1

보통 날짜 선택이나 자동완성을 위해  datepicker나 autocomplete을 사용할 때

클래스로 해당 컨트롤을 제어하게 된다.
이렇게
$(".DATE").datepicker();

뭐 여기까진 좋다.
하지만 clone이 들어오면 이야기는 달라진다.

var objClone = $("#DIVSAMPLE").clone(true);
objClone.find(".DATE").datepicker('destroy').removeClass('hasDatepicker').removeAttr('id').datepicker().attr('name', 'DATE');

이렇게 생쑈를 해줘야 한다.
이게 뭐하는 짓일까

생쑈 하지 말고 동적으로 생성된 컨트롤에 이벤트를 줘야 한다면
포커스 받았을 때 이벤트 부여
포커스 잃었을 때 이벤트 삭제
이렇게 처리한다면 한결 깔끔해질 수 있다.

$(".DATE").focus(function() {
    $(this).datepicker();
});

$(".DATE").focusout(function() {
    $(this).datepicker("destroy");
});
           

그나저나 티스토리 개편된 UI는 참... 에효
앱도 그렇고 편집기도 그렇고 참..