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

블로그 : 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>

일단 정가는 5,900원 되시겠다.
하지만 7월 25일부터 말일까지 3,900원에 할인 판매 중이다.

결론부터 말하자면
3,900원이라면 사먹어볼 수 있겠지만 정가인 5,900원 주고는 어렵겠다.

구성품은 고기와 마늘, 쌈장, 쌈채소 그리고 이렇게
친절하게 물티슈로 되어있다.

뚜껑을 개봉하고 랩을 벗긴 후 쌈장용기와 쌈채소 용기를 꺼내고 전자렌지에 돌려야 한다.


이제부터 분석

감점 이유

1. 밥이 없다.
집이 아니라면 햇반까지 돌려야하니 가격 메리트 측면에서 도시락으로 하기엔 힘들다.
대충 술안주로 나온 제품인것 같은데 쌈 컨셉인데 술안주라 조금 에바스럽다.

2. 고기가 그렇게 맛있진 않다.
대충 상상하는 석쇠불고기는 자글자글한 고기육질과 불향이 그윽하게 풍겨져 나오는 모습인데 그냥 찐득한 소스맛도 아닌 나다 만듯한 그냥 마른 고기 수준이다.

3. 쌈채소가 너무 적다
1/3로 나눠 먹어야 할 수준이다.
채소가 비싸 어쩔 수 없어도 1/2수준은 돼야 한다본다.


득점이유

1. 쌈채소가 너무 훌륭하다
신선하고 맛까지 좋다.
여느 고깃집에 가도 이정도 퀄의 쌈채소는 접하기 힘들다.

2. 마늘이 맛있다.
마늘과 함께 한쌈 넣자마자 눈채챌 수 있었다.
얘네 마늘 국산썼구나!
중국산의 그 혀를 고문하는 아린 맛이 아닌 나 마늘이에요 함께해요 속삭이는 국산 본연의 그 맛과 적당하게 매우면서 단맛이 어우러지는 그런 맛
이런 마늘맛은 국산에서만 느낄 수 있다.

쌈장 또한 빼놓을 수 없다.
후반부엔 부족한 쌈채소 대신 쌈장과 마늘로 고기맛을 죽여가며 먹어야하는데 국산 마늘과 쌈장 때문에 고기를 남기지 않아 음식물 쓰레기를 줄일 수 있었다.



최종 요약

도시락이라 하기엔 밥이 없어서 애매하고
가격도 높아서 또 애매하다.
그렇다고 술안주로 하자니 메인 식재료인 고기가 술안주 레벨이 아니다.


GS25 도시락 쌈채소 석쇠불고기 평가 끝

GS마케팅 및 제품 개발 임직원께서 보신다면 다른 사람 몰래 도시락 보내주실 경우 이런 솔직한 리뷰가 아닌 성심껏 MSG쳐가며 맛있다는 구라 포스팅 가능합니다.

경쟁사인 일곱열하나, 봐유, 작은정지 등등 언제나 환영합니다.
영혼 저렴하게 판매 가능합니다.

<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);

        });

늘 느끼는 일이지만 애플 고객센터는 상냥하기만 하고 평균 이상의 문제에 대해선 해결된 적이 없다.

개발자 계정 이중보안 문제고 그러했고 앱리뷰와 관련된 안내도 그러했으며 이번 iOS 14 베타 업그레이드 다운그레이드시 발생한 이 망할 사이드 버튼 3회 눌러 화면 밝기를 조절할 때 마다 발생하는 "확대/축소 비활성화됨" "확대/축소 활성화됨" 안내창은 역대 최고의 헛 상담이었다.

무슨 iOS13 마지막 버전이 나오면 해결 될거라나 ㅡㅡ
업그레이드해도 똑같이 화면 밝기 조절때마다 저 안내창이 나와 해외까지 뒤져 찾아낸 이 망할 버그 잡는 방법을 공유한다.

해외 검색 결과를 토대로 따라하려다보니 아이폰 언어설정을 영어로 하고 캡쳐 떠서 첨부 이미지는 영문 캡쳐로 되어 있으나 나님께서 친절히 한글 메뉴명을 써주셨으미 탐복해도 됨

1. 설정 > 손쉬운사용 > 맨하단 손쉬운사용단축키

2. 나타난 화면에서 확대/축소 언체크 후 화이트포인트 줄이기 체크

이 망할 아이폰 버그 때문에 한달을 불편함에 몸서리 쳤다.
이 버그가 흔한 버그가 아닌지라 국내 웹상에선 딱 한 명 지식인에 질문이 올라왔을 정도이고 그나마 달린 답변도 엉뚱한 껐다 켜봐라는 잘못된 답변뿐이었다.

해외에선 구글에서 zoom enabled alert bright 키워드로 검색하니 대번에 첫 검색결과로 나와줌

https://discussions.apple.com/thread/7399443

기본 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 때리면 됨                
            }
        });

아래 붉은색 폰트처럼 넘기고 싶은 파라메터는 일반적인 jQuery에서처럼 그냥 attribute 변수명으로 해선 bootstrap의 popup modal view로 파라메터가 넘어가지 않는다.
반드시 data-를 붙여줘야만 한다.
그리고 jQuery에선 data- 이후에 작성된 실제 파라메터명을 $(e.relatedTarget).data를 통해 가지고 오면 잘 받아오게 됨

<a href="#" class="btn btn-primary btn-sm" role="button" data-toggle="modal" data-target="#popup" data-backdrop="static" data-name="이름" data-age="98">팝업호출</a>

<div class="modal fade" id="popup" tabindex="-1" role="dialog">

</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#popup").on("show.bs.modal", function(e) {
            var name = $(e.relatedTarget).data('name');
            var age = $(e.relatedTarget).data('age');

            alert(name + ':' + age);
        });
    });
</script>

<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를 - 버튼으로 날리라 하심