본문 바로가기

개발/Web

 (27)
Javascript 특정영역 내/외 클릭 // event.target = 이벤트 발생 위치 // event.currentTarget = 이벤트 생성 위치 function clickInEvent(event) { event.currentTarget.querySelector(".in_event").show(); } function clickOutEvent(event) { var target = event.target; if(target == event.currentTarget.querySelector(".out_event")){ target.hide(); }); }
Secure Coding - SQL Injection PHP SQL Injection 방지 방법에 대해 작성한다. OWASP 에서 1위로 선정된 위협으로 SQL Injection 이 있다. $sql="SELECT * FROM users WHERE userid='$userid' and password='$password'"; 위처럼 id와 암호를 받아서 로그인하는 부분에서 클라이언트가 $password input에 ' or '1' = '1 이라는 문자열을 넣으면 or 뒤의 조건문이 참이되어 관리자로 로그인이 가능하다. 해당 공격을 막기 위해서는 동적 쿼리가 아닌 Prepared Statement와 Bound Parameter 을 사용해야 한다. // PDO 사용 $stmt = $pdo->prepare('SELECT * FROM employees WHERE n..
[Javascript] 장식자(Decorator) 장식자(Decorator)는 하나의 코드를 다른 코드로 래핑하거나, Javascript 함수를 래핑하는 방법이다. 데코레이터는 동일한 크래스의 다른 객체에 동작에 영향을 주지 않고, 정적으로 또는 동적으로 개별 객채에 동작을 추가할 수 있는 디자인 패턴이다. 기본 기능을 수정하지 않고 기능을 향상시키는데 사용된다. Decorator는 Python 및 C# 과 같은 언어에서 사용되었으며, Javascript 에서도 사용된다. 문법 let variable = function(object) { object.property = 'characteristic'; } // Use as decorator @variable class GFG { } console.log(GFG.property); 예시 ES6에서 Deco..
Nginx CORS 활성화 # cors configuration # whitelist of allowed domains, via a regular expression # if ($http_origin ~* (http://localhost(:[0-9]+)?)) { if ($http_origin ~* .*) { # yeah, for local development. tailor your regex as needed set $cors "true"; } # apparently, the following three if statements create a flag for "compound conditions" if ($request_method = OPTIONS) { set $cors "${cors}options"; } if ($reque..
wavesurfer events (이벤트) wavesurfer 인스턴스 생성 후 다음 이벤트를 사용 가능 예시) wavesurfer.on('pause', function () { wavesurfer.params.container.style.opacity = 0.9; }); 1. 이벤트 목록 audioprocess - 오디오 재생중, 재생 커서 위치 지정시 이벤트 발동 dblclick - 인스턴스 더블클릭시 이벤트 발동 destroy - 인스턴스 파괴시 이벤트 발동 error - 오류 발생시 이벤트 발동, 콜백은 문자열 형식의 오류 메시지를 수신 finish - 재생이 끝나면 이벤트 발동 interaction - 파형과 상호작용시 이벤트 발동 loading - 가져오기, 드래그 앤 드롭 등으로 로드 시 계속 이벤트 발동, 콜백은 [0..100] 퍼..
wavsurfer.js method(메서드) wavsurfer 인스턴스 생성 후 다음 메서드를 사용 가능 1. 메서드 목록 cancelAjax() - 오디오 파일로드 포르세스 취소 destroy() - 이벤트, 요소를 제거하고 웹 오디오 노드 연결 끊음 empty() - 길이가 0인 오디오가 로드된 것처럼 파형을 지움 getActivePlugins() - 현재 초기화된 플러그인 이름의 맵 반환 getBackgroundColor() - 파형 컨테이너의 배경색을 반환 getCurrentTime() - 현재 진행 상황을 초 단위로 반환 getCursorColor() - 재생 헤드 위치를 나타내는 커서의 채우기 색상 반환 getDuration() - 오디오 클립 길이 초 단위 반환 getPlaybackRate() - 오디오 클립 재생속도 반환 getPro..
wavesurfer.js 1. wavesurfer 설치 1-1. script 로드 1-2. github 저장소 포크 or 다운로드 https://github.com/katspaugh/wavesurfer.js 1-3. CDN (Content Delivery Network) 1-4. wavesurfer 을 사용할 컨테이너 생성 1-5. javascript 에서 wavesurfer 객체 인스턴스 생성 var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', progressColor: 'purple' }); 1-6. 오디오 로드 wavesurfer.load('audio.wav'); 2. wavesurfer create option 옵션 타입 기본값..
카카오톡 공유 api 사용 // kakao api init Kakao.init('카카오톡 api javascript key'); function kakao_share() { Kakao.Link.sendDefault({ objectType: 'feed', content: { title: '카카오톡 공유 타이틀', description: '카카오톡 공유 설명', imageUrl:'썸네일.jpg', link: { mobileWebUrl: 'url', webUrl: 'url', }, }, buttons: [ { title: '웹으로 보기', link: { mobileWebUrl: 'url', webUrl: 'url', }, }, { title: '앱으로 보기', link: { mobileWebUrl: 'url', webUrl: 'url'..
반응형

티스토리툴바