반응형

DateDiff 를 이용한 현재 일시 비교

 

<% dim nowtime_chk
   nowtime_chk = DateDiff("n", "2022년 01월 07일 00:00:00", now()) 

   if( nowtime_chk > 0 )then %>
         console.log(" 날짜 지났다.");
<%  else %>
         console.log(" 날짜 아직.");
<%
end if
%>
반응형
반응형

HTML5 웹에서 마이크 녹음 기능

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>마이크 테스트</title>
</head>

<body>
    <input type=checkbox id="chk-hear-mic"><label for="chk-hear-mic">마이크 소리 듣기</label>
    <button id="record">녹음</button>
    <button id="stop">정지</button>
    <div id="sound-clips"></div>
    <script>
        const record = document.getElementById("record")
        const stop = document.getElementById("stop")
        const soundClips = document.getElementById("sound-clips")
        const chkHearMic = document.getElementById("chk-hear-mic")

        const audioCtx = new(window.AudioContext || window.webkitAudioContext)() // 오디오 컨텍스트 정의

        const analyser = audioCtx.createAnalyser()
        //        const distortion = audioCtx.createWaveShaper()
        //        const gainNode = audioCtx.createGain()
        //        const biquadFilter = audioCtx.createBiquadFilter()

        function makeSound(stream) {
            const source = audioCtx.createMediaStreamSource(stream)

            source.connect(analyser)
            //            analyser.connect(distortion)
            //            distortion.connect(biquadFilter)
            //            biquadFilter.connect(gainNode)
            //            gainNode.connect(audioCtx.destination) // connecting the different audio graph nodes together
            analyser.connect(audioCtx.destination)

        }

        if (navigator.mediaDevices) {
            console.log('getUserMedia supported.')

            const constraints = {
                audio: true
            }
            let chunks = []

            navigator.mediaDevices.getUserMedia(constraints)
                .then(stream => {

                    const mediaRecorder = new MediaRecorder(stream)
                    
                    chkHearMic.onchange = e => {
                        if(e.target.checked == true) {
                            audioCtx.resume()
                            makeSound(stream)
                        } else {
                            audioCtx.suspend()
                        }
                    }
                    
                    record.onclick = () => {
                        mediaRecorder.start()
                        console.log(mediaRecorder.state)
                        console.log("recorder started")
                        record.style.background = "red"
                        record.style.color = "black"
                    }

                    stop.onclick = () => {
                        mediaRecorder.stop()
                        console.log(mediaRecorder.state)
                        console.log("recorder stopped")
                        record.style.background = ""
                        record.style.color = ""
                    }

                    mediaRecorder.onstop = e => {
                        console.log("data available after MediaRecorder.stop() called.")

                        const clipName = prompt("오디오 파일 제목을 입력하세요.", new Date())

                        const clipContainer = document.createElement('article')
                        const clipLabel = document.createElement('p')
                        const audio = document.createElement('audio')
                        const deleteButton = document.createElement('button')

                        clipContainer.classList.add('clip')
                        audio.setAttribute('controls', '')
                        deleteButton.innerHTML = "삭제"
                        clipLabel.innerHTML = clipName

                        clipContainer.appendChild(audio)
                        clipContainer.appendChild(clipLabel)
                        clipContainer.appendChild(deleteButton)
                        soundClips.appendChild(clipContainer)

                        audio.controls = true
                        const blob = new Blob(chunks, {
                            'type': 'audio/ogg codecs=opus'
                        })
                        chunks = []
                        const audioURL = URL.createObjectURL(blob)
                        audio.src = audioURL
                        console.log("recorder stopped")

                        deleteButton.onclick = e => {
                            evtTgt = e.target
                            evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode)
                        }
                    }

                    mediaRecorder.ondataavailable = e => {
                        chunks.push(e.data)
                    }
                })
                .catch(err => {
                    console.log('The following error occurred: ' + err)
                })
        }
    </script>
</body></html>
반응형
반응형

Django DIY Blog

Basic blog site written in Django (part of MDN Django module assessment)

This web application creates an very basic blog site using Django. The site allows blog authors to create text-only blogs using the Admin site, and any logged in user to add comments via a form. Any user can list all bloggers, all blogs, and detail for bloggers and blogs (including comments for each blog).

The models for this site are as shown below:

 

https://github.com/mdn/django-diy-blog

 

mdn/django-diy-blog

Basic blog site written in Django (part of MDN Django module assessment). - mdn/django-diy-blog

github.com

 

반응형
반응형

textarea, placeholder에서 개행처리 - \r\n 

 

줄내림할 곳에  \r\n 대신  &#10 을 넣어서 해보면 개행이 된다. 

 

 

반응형
반응형

"There is a problem with this website's security certificate" when you try to visit a secured website in Internet Explorer

 

Internet Explorer에서 보안 웹 사이트를 방문하려고 할 때 "이 웹 사이트의 보안 인증서에 문제가 있습니다."

 

support.microsoft.com/en-us/topic/-there-is-a-problem-with-this-website-s-security-certificate-when-you-try-to-visit-a-secured-website-in-internet-explorer-0b8931a3-429d-d0e2-b38f-66b8a15fe898

 

"There is a problem with this website's security certificate" when you try to visit a secured website in Internet Explorer

Symptoms A user who tries to connect to a secured Web site by using Windows Internet Explorer may receive the following warning message: There is a problem with this website's security certificate. The security certificate presented by this website was not

support.microsoft.com

 

반응형
반응형

=======================================================

=======================================================

네이버 클라우드 플랫폼에서 장고(Django) 개발 환경 구성 및 활용하기

 

쉽고 빠르게 웹사이트를 개발 - https://blog.naver.com/n_cloudplatform/221934597899

 

Django를 이용해 Rest API 서버를 구축 - https://blog.naver.com/n_cloudplatform/221934606030

 

Django를 이용한 Rest API 서버 구축 - http://throughkim.kr/2018/05/29/django-rest/

 

REST API - https://www.django-rest-framework.org/#example

 

장고 관리자 - https://tutorial.djangogirls.org/ko/django_admin/ ======================================================

======================================================

반응형
반응형

자바 스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한합니다. 이 정책을 동일근원정책(Same-Origin Policy, SOP) 정책이라고 하며, 이러한 정책으로 인해 생기는 이슈를 cross-domain 문제라고 합니다. 
개발을 하다보면 어쩔 수 없이 다른 도메인으로부터 데이터를 가져와야 하는 경우가 많기에 많은 사람들이 cross-domain 이슈를 겪고 있습니다.

이런 경우 사용할 수 있는 것이 JSONP(JSON with Padding)입니다. 처음 JSONP를 접했을 때 잘 정리가 되지 않았던, 사용할 때 명확히 알아야 할 것들을 정리해보았습니다.

 

1. JSONP 요청은 일반 AJAX 요청과 다르다

//-- JSON
$.ajax({ 
    url: url, 
    dataType: 'json', 
    data: data, 
    success: callback 
}); 
$.getJSON(url, data, callback);

//-- JSONP
$.ajax({ 
    url: url, 
    dataType: 'jsonp', 
    jsonpCallback: "myCallback", 
    success: callback 
}); 
$.getJSON(url + "?callback=?", data, callback);

dataType 만 변경하거나, 요청 url 뒤에 callback 파라미터 를 붙일 뿐입니다. 그렇지만 이것만으로도 완전히 다른 동작 을 하게 됩니다.

 

2. ‘JSONP’라는 데이터 타입 요청이 아닌 <script> 호출 방식

JSONP는 HTML의 script 요소로부터 요청되는 호출에는 보안상 정책이 적용되지 않는다는 점을 이용한 우회 방법 입니다.

다시 한번 확실히 하자면, script 요소는 src를 호출한 결과를 javascript를 불러와서 포함시키는 것이 아니고 실행시키는 태그입니다.

 


3. JSONP Callback은 서버에서 지원해줘야 한다
알아두어야 할 중요한 것은 응답 데이터는 Text형 이란 것과, callback 함수명으로 감싸진다 는 점 입니다.
 

"myCallback({'name':'test','age':28})"
 
 
 
 
 $.ajax({ url: url, dataType: 'jsonp', jsonpCallback: "myCallback", success: callback });
 
 $.getJSON(url + "?callback=?", data, callback);

위 요청을 해석해보자면,

  • cross-domain 이슈를 회피하기 위하여 jsonp 요청을 한다
  • 응답 데이터는 myCallback(결과) 형태의 text로 wrapping 되어질 것이다.
  • myCallback이란 함수를 나의 success function에 mapping 시킬 것이다.

가 됩니다.

 

github.com/kingbbode/spring-jsonp-server
 

 

kingbbode/spring-jsonp-server

Jsonp Server Example. Contribute to kingbbode/spring-jsonp-server development by creating an account on GitHub.

github.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kingbbode</title>
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
  </head>
  <body>
    <script>
    var url = 'http://localhost:9000/';
    var static_json = 'http://localhost:9000/json/test.json'
    $.ajax({
      url: static_json,
      dataType: 'jsonp',
      jsonpCallback: "myCallback",
      success: function(data){
        console.log('ajax', data);
      }
    });

    $.getJSON(url + "?callback=?", function(data){
      console.log('getJSON', data);
    });
    </script>
  </body>
</html>
반응형
반응형

[ASP] 페이지 로딩완료 전 로딩 이미지 보여주기 

 

페이지 로딩 속도가 오래 걸릴때. 

일단 로딩 이미지 보여주고. 페이지 로딩완료 되면 로딩 이미지 제거하는 방식. 

<div id="loadingDiv"></div>
<style>
#loadingDiv{
  background: url(/img/loading_2021.gif) no-repeat center;
  background-size: 510px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
  position: fixed;
  z-index: 5001;
  top: 0;
}
</style>

~
~
~
~
~
~



<script>
    $("document").ready(function(){                
        $('#loadingDiv').hide();
    }
</script>    

 

반응형

+ Recent posts