sortable() 를 이용한 간단한 색상 블록 맞추기 게임 | JQUERY
웹 > 개발테스트/교육
이번에 소개할 프로그램은 JQUERY의 sortable 메서드를 이용하여 만단 간단한 생상 블록 맞추기 게임이다. sortable 메서드의 경우 JQUERY UI 라이브러리가 있어야만 가능하며 특정 목록 아이템 부모를 선택해주면 자동으로 마우스 드래그&드롭 기능이 작동된다. sortable 메서드에 대한 자세한 정보는 아래의 포럼에서 살펴보면 된다.···
유튜브 Data API 사용 예제 | PHP
API서비스 > 유튜브API
유튜브 Data API 를 이용하면 유튜브의 등록된 공개 비디오 데이터에 접근하여 정보를 가져올 수 있다. 이번편에서는 API를 통해 실제 Data 를 추출하는 예제를 살펴보도록 하자 참고로 유튜브 Data API 를 사용하기 위해서는 구글 클라우드 서비스를 활성화 하여 API 키값이 있어야하는데 해당 방법은 지난편에서 자세하게 포스팅하였으니 API 키값이···
유튜브API | 유튜브 Data API 시작하기
API서비스 > 유튜브API
유튜브 Data API는 유튜브의 등록된 동영상의 정보를 가져올 수 있는 유일한 API로 오래전에는 API 키값없이 자유롭게 가져올 수 있었으나 API가 제한없이 사용되다 보니 지금에 와서는 권한이 있는 사용자에게만 제공이 되었다. 또한 공식 API 문서가 생기면서 API 데이터 형태도 많이 변경되었는데 이는 유튜브에서 제공되는 문서에 잘 명시되어있으니 함···
javascript 쿠키(document.cookie) 헬퍼 라이브러리 (ri-cookie.js)
RWS 라이브러리 > JAVASCRIPT
$.cookie JAVASCRIPT 만을 이용하여 쿠키를 조작할때는 정말 많은 어려움이 있습니다. 이를 해결하기위해 조금이나마 시간을 투자하여 별도 커스텀 함수를 만들어서 사용하게 됩니다. 하지만 그 시간마저도 바쁜 개발자에게는 허락되지 않을 수 있습니다. 이때 빠르게 사용할 수 있는 라이브러리를 간단하게 모듈화 하여 만들어 보았습니다. 저작권 ri_co···
jquery-confirm.js 를 이용한 alert 메서드의 대체 | JQUERY
웹 > HTML/CSS/JAVASCRIPT
alert 메서드는 주로 경고창을 띄우는 용도로 많이 사용되고 있다. 하지만 고정된 디자인이다보니 UI 변경이 불가능하기때문에 이를 대체할 수 있는 jquery-confirm.js 라이브러리가 있는데 사용법도 간단하기 때문에 단순 alert 를 대체하기엔 가장 좋은 라이브러리가 아닌가 생각한다. 물론 비슷한 라이브러리들이 많지만 confirm-jquery ···
PHP 의 DOMDocument 클래스를 이용한 HTML 문서 meta content 추출 서포트 함수
웹 > PHP 서포트함수
meta 태그란 사이트 문서 head 상에 삽입된 태그로 흔히 웹 문서 검색 시 해당 문서의 정보 데이터를 설정하는 역활을 한다. 이러한 meta 태그는 종류가 여러가지고 보통 검색 시에 활용하기도 하지만 특정 사이트 인증 및 설정 시에도 사용이 된다. 본래 PHP 에서는 메타태그를 가져올 수 있는 get_meta_tags() 함수가 제공이 되는데 이 함수···
PHP 의 glob 함수를 이용한 서버 디렉토리에서 특정 파일 리스트만 추출하는 방법
웹 > PHP 일반
PHP 에서 디렉토리관련하여 상당히 많은 함수들이 제공된다. 그중 패턴을 이용하여 파일명 리스트를 추출할 수 있는 glob 라는 함수가 있는데 오늘은 이함수에 대해 간단하게나마 알아 보도록 하자 먼저 이함수는 아래의 PHP 그룹 사이트에서 상세 정보를 확인 가능하다. PHP: glob - Manual PHP: glob - Manual www.php.net/···
javascript | 자바스크립트에서 객체(object) 복사를 해보자
웹 > HTML/CSS/JAVASCRIPT
자바스크립트를 이용하다보면 기본 객체를 그대로 두고 본 객체를 복사하는 경우가 있다. 기본적으로 객체를 복사하는 방법에는 여러방법이 있겠지만 그중 가장 많이 사용하는 방법 2가지에 대해 알아보도록 하자 Object.assign 을 이용한 객체 복사 방법 | 얕은복사 <script> /* Object.assign 을 이용한 객체복사 */ let o···
jquery | Global Ajax 이벤트 핸들러를 이용하여 ajax 공통처리를 해보자
웹 > HTML/CSS/JAVASCRIPT
Global Ajax 를 이용하여 공통처리를 할 수 있는 방법이 있다. 이는 주로 이 블로그처럼 대다수가 AJAX 를 통한 페이지 전환으로 구성된 사이트에서 로딩바를 띄우기 위한 목적으로 사용이 된다. 지원되는 이벤트 핸들러는 ajaxStart, ajaxSend, ajaxSuccess, ajaxComplete, ajaxStop , ajaxError 가 있으···
JQUERY load() 메소드 사용 예제
웹 > HTML/CSS/JAVASCRIPT
AJAX의 기술은 요즘들어 페이지에 없어서는 안될 부분으로 상당히 많이 사용되곤 한다. 물론 아직까지는 대형 사이트의 경우 JQUERY를 그다지 선호호지 않기 때문에 순수 JAVASCRIPT 를 이용하여 자체 스크립팅된 코드를 사용한다. 하지만 알다시피 일개미 개발자에게 주어진 시간이란게 없고 일부 JAVASCRIPT 라이브러리들은 JQUERY 를 요구하기···
PHP+JQUERY 를 이용한 안전 숫자 키패드 프로그램
웹 > 개발테스트/교육
PC에서 웹 결제 프로그램을 이용하다보면 많이 보게 되는 숫자 키패드는 생각보다 간단하게 만들 수 있다. 물론 PG사 특성상 보안 프로그램으로 2중 체크하여 처리하겠지만 보안 프로그램을 제외한다면 별반 다를것 없이 제작할 수 있다. 이번에 소개할 웹 프로그램은 PHP 와 JQUERY 를 이용하여 만든 안전 숫자 키패드 프로그램으로 간단하게 만들었기때문에 구···
이태원에서 발생된 대형참사
정보바다 > 뉴스/정보
2022년 10월29일 이태원동 해밀톤호텔 부근 골목에서 할로윈 축제를 즐기로온 수 많은 사람들 사이에서 발생된 사고로 시간대는 22시 15분경에 처음 신고가 접수되었다. 이로인해 다음날인 10월30일 기준 사망자 154명 부상자 102명으로 현재까지 사망자가 더 늘어나고 있어 계속 지켜봐야 할듯 하다. 대부분의 사망자들은 젊은 층으로 10대부터 20대가 ···
[네이버API] 네이버로그인 - 팝업을 이용한 로그인방식
API서비스 > 네이버API
지난편에서 네이버 로그인 API 사용을 위한 애플리케이션 생성에 대해 간단하게나마 알아 보았다. 이번 편에서는 팝업을 이용한 로그인 방식에 대해 알아 보도록 하자 네아로 로그인 요청 시 필요한 정보는 네아로 개발가이드에도 자세히 나와있으니 함께 보면서 참고하도록 하자 네이버 로그인 개발가이드 - 로그인 URL 네이버 로그인 개발가이드 - LOGIN 네이버 ···
[네이버API] 네이버로그인 - 애플리케이션 생성
API서비스 > 네이버API
네이버 로그인은 국내에서 사용하는 3대(카카오,네이버,페이스북) 로그인중 하나이며 대부분의 회원인증이 필요한 사이트에서 많이 볼 수 있다. 하지만 개발자 입장에서 본다면 네이버와 페이스북은 검수 절차가 있기때문에 조금 까다로운? 편에 속하며 바로 사용할 수 없다는 작은 단점이 있다. 하지만 검수과정이 있는만큼 사용자 입장에서는 조금더 신뢰감있는 사이트가 될···
SK C&C 데이터센터 화재로 인한 카카오서비스 장애
정보바다 > 뉴스/정보
22년 10월 15일 SK 주식회사 C&C 데이터 센터 화재로 인해 카카오서비스 전체적으로 장애가 발생했다. 원인의 경우 카카오와 무관하겠지만 같은 데이터 센터를 이용중인 네이버와의 카카오 대응 차이에 대해 카카오에 대한 상당한 비난이 몰아닥치고 있다. 네이버의 경우도 이번에 피해를 입었지만 다행히 빠른 복구가 이루어져 대다수의 서비스가 15일 밤까···
JQUERY 의 AJAX를 통한 서버 header 데이터 주고 받기
웹 > PHP 일반
지난편에서 `SetEnvIf 를 활용한 헤더(header) 데이터 받기` 를 알아보았고 이번편에서는 AJAX 통신으로 헤더값을 주고 받는 방법에 대해 알아보고자 한다. (왠지 내가 올린글들만 설명이 많이 떨어지는것같다..) JQUERY 의 AJAX 로 헤더 데이터를 담아 보내기 서버에 index.php 파일을 만든다음 아래 소소코드를 복붙한다. 참고로 헤더 ···
SetEnvIf 를 활용한 헤더(header) 데이터 받기
웹 > PHP 일반
API 작업 시 헤더에 중요 정보를 담아서 처리해야할때 가있다. 하지만 서버에 따라 apache_request_headers() 함수가 지원이 안되는 경우가 있는데 이때 해결방법으론 .htaccess 를 이용하여 별도 처리하는것이다. 작업은 조금 번거로울 수 있으며 아파치의 mod_setenvif 모듈이 설치되어있어야 해결가능하다. 그외 방법은 나도 찾아본···
웹 수집에 방해 되는 iframe 을 제거 하자
블로그를 개설한지 꽤 오랜 시간이 흘렀다. 하지만 방문자 유입은 이전 내 블로그보다 훨씬 적었다. 물론 구글 유입은 역시나 많았지만 네이버 같은경우 웹사이트 자료 수집률이 10%정도밖에 되지 않았다.     그래서 내린 결론은 iframe 을 뜯어내는것이였다. 오차피 정보를  공유하는 사이트인데 홍보한다해서 될 블로그···
아파치 .htaccess 를 이용한 아이피별 접속 제어 (+버전분기)
서버 > Linux
웹 제어가 index.php 에서 이루어지지 않고 각 디렉토리 방식으로 제어가 되는 경우 보안을 위해 접근이 불가한 디렉토리를 설정해야 할때가 있다. 설정 방법에는 아파치 설정을 통한 방법과 아파치에서 제공하는 .htaccess 를 통한 제어 방식이 있는데 이번편에서는 .htaccess 를 통한 제어 방식을 설명하고자 한다. .htaccess 는 아파치에서···
PHP 를 이용하여 간단하게 만든 총 학점 출력 프로그램
웹 > 개발테스트/교육
대학교 시절 학점이 그렇게 좋지 않아 만들기 싫었지만 우연히 학점 계산방법 소개글을 보다가 학점 출력 프로그램을 만들어 보았다. 본 프로그램은 하단 블로그를 통해 학점 계산 방법을 숙지한 뒤 간단하게나마 만들어 보았으니 참고 바라며 해당 프로그램은 스타일을 고려하지 않을려다가 조금이나나 CSS를 넣었기때문에 가독성을 위한 수정이 필요할 수 있다. 학점은 처···