javascript로 카드번호 입력하면 4자리마다 하이픈 또는 공백 자동으로 붙이기(+마스킹처리)
웹>HTML/CSS/JAVASCRIPT
이번편은 지난번 생년월일 입력 이벤트를 활용하여 카드번호 입력 후 4자리마다 하이픈 또는 공백등의 구분자를 붙여는 스크립트 예제에 대해서 알아보자. 참고로 기본적인 기능들은 앞서 생년월일 입력 이벤트와 유사하며 이를 조금만 활용하면되고 다만 카드 입력의 경우 보안이 중요한 만큼 마스크처리를 추가하였다. 카드번호 입력 후 유효성 체크하여 자동 구분자 넣어주는···
javascript로 생년월일 입력하면 슬래시 또는 하이픈 자동으로 붙이기 (+유효성 체크)
웹>HTML/CSS/JAVASCRIPT
생년월일은 과거 달력에서 선택하는 방식을 많이 채택하였지만 나이가 있으신분들은 한참을 뒤로 가야하는 불편함이 발생되어 요즘은 입력방식을 사용하는편이다. 이번편에서는 간단하게나마 생년월일 입력 후 슬래시(/) 또는 하이픈(-)을 붙여주는 스크립트이다. 본래 이번편에 소개하는 예제는 JS 라이브러리로 제공할 목적이였으나 시간상 여유가 없어 간단하게 입력 후 처···
어릴적 아버지의 등은 거대하고, 기대고 있으면 포근했다무서운 일도 아버지의 등뒤에 숨으면 다 가려질것만 같았다 하지만 내가 커지면 커질 수록 아버지의 등은더 작아지셧고,내가 아버지만큼 컸을땐 아버지의 등은 굽어있었다 기대고 싶어도 더이상 기댈 수 없었다어릴적 보던 아버지의 등이 아니였다때론 안쓰럽기도하고, 심지어슬프기도 했다 하지만, 세월이 지나고보니아버···
웹 소켓 서버(Websocket) - Ratchet 라이브러리의 보안 프로토콜(wss) 소켓 생성방법
웹>PHP 일반
웹 소켓은 ws 와 wss 프로토콜 방식을 제공하는데 이는 일반적인 URI의 HTTP 와 HTTPS와 같이 일반전송과 암호화전송 정도로 이해하면 된다. ws 프로토콜을 이용할경우 일반적인 원문으로 전송이 되기 때문에 중요 데이터를 공격자는 그대로 볼 수 있다. 이는 DB로 본다면 비밀번호 칼럼을 그대로 원문으로 처리한것과 동일하다. 이럴경우 DB가 노출되면···
HTML 태그의 data 속성처럼 특정 속성을 저장하고 javascript 객체로 가져오기 (for jquery)
웹>HTML/CSS/JAVASCRIPT
HTML 태그의 data 속성은 공식 지원되는 객체 속성으로 jquery를 사용하여 data 속성을 가져오게 되면 객체형태로 쉽게 받을 수 있기때문에 활용도가 높은 편이다. 이번편은 data 속성은 잘 알려져 있기에 이번편에서는 data 속성과 같이 특정 속성을 저장하고 jquery를 통해 객체화 하는 방법에 대해 알아보자. 우선 방법을 소개하기전 data···
자바스크립트(javascript) 에서 try~catch 활용 예제
웹>HTML/CSS/JAVASCRIPT
자바스크립트를 사용하다보면 런타임 중 에러를 무시하고 다음 라인을 실행해야 하는 경우가 발생한다. 이때 사용할 수 있는건 사전에 에러 발생이 안나도록 변수나 함수의 타입을 검증하는 예외처리가 필요하지만 try 블록을 이용하여 처리를 회치할 수 있다. 사실 try~catch 는 에러를 보완할 수 있는 수단이라기 보단 에러는 회피하는 용도로 사용되고, 커스텀 ···
PHP8 도입은 언제쯤이 좋을까?
웹>PHP 일반
PHP와 함께 해온지 벌써 10년이 다되가는것같다. 내가 처음 사용한 버전은 PHP5 버전대였는데 영원할것같던 5도 이제 역사속으로 사라지고 PHP7로 갈아탄지가 엊그제 같은데 부지런하고 똑똑한 PHP 연구원들덕에 빠르게 사라질 듯 싶다. 솔직히 PHP8은 작년에 개발서버에 설치만 해놓고 언젠간 해야지라는 믿을 수 없는 결심만 하고 지금껏 모른척 했지만 회···
블로그 서버 이전에 대한 고려와 전체 사이트 개편 계획
평행세계>한마디
최근들어 물가도 많이 상승했고 똑똑한 GPT 덕분인지는 모르나 REDINFO 로 운영되는 모든 사이트의 방문자가 뚝 떨어진것을 볼 수 있었다. 물론 이득을 위한 실서비스가 아닌 개발 용도로 운영하는 사이트들이긴 하나 유독 내가 운영하는 사이트들만 유입이 적다보니 개발 의지도 줄어들게 되고 이럴때면 내 옆에 우뚝 서있는 서버가 슬퍼서 울고 있는것같다. (`G···
PHP 의 exec 함수로 결과값(output) 받을시 전체 결과값이 안나올경우 처리방법
웹>PHP 일반
PHP에서 exec 함수의 경우 쉘 명령어(shell)를 수행할 수 있도록 도와주는 함수이며 그만큼 사용시에 보안에 신경 써야한다. 대부분 가공된 데이터를 기준 한정된 코드로 가공하여 많이 사용하게 되는데 특정 명령어를 사용할때 출력되는 내용이 전체가 아닌 마지막 부분만 노출되는 경우가 있다. 분명 쉘(shell)에서 입력할때는 정상 출력 되지만 PHP e···
별도 라이브러리 없이 자체 캡챠(Captcha) 기능을 구현해보자. (for PHP+CSS+JQUERY)
웹>개발테스트/교육
캡챠는 사용자 입력 검증 관련된 개발하다보면 한번쯤 사용했거나 들어본적이 있을 것이다. 쉽게 설명하면 입력후 제줄된 문서를 진짜 타이핑해서 쓴건지 아니면 별도 프로그램으로 이용하여 제줄한건지 사전에 체크할 수 있는 시스템이다. 이러한 캡챠는 지속적으로 기술이 발전되고 있지만 자동입력 프로그램 또한 지속 발전하여 보안코드 마저 인식 후 뚫어버리는 경우가 있다···
PHP의 예외처리 try/catch/finally 의 기본 사용방법
웹>PHP 일반
PHP에서 예외처리를 할 수 있는 try ~ catch 라는 제어문은 try 블록 내에 소스코드 내에 작성하고 예외처리가 있을 경우 catch 블록으로 보내서 처리를 할 수 있게 만들어 준다. finally는 가장 마지막에 실행되는 처리문으로 보면되고 실제 복잡하게 사용한다면 내용만 길어지고 어려울 수 있으니 이번편에서는 예외 프로그램 처리 시 간단한 활용···
모바일에 가장 최적화된 스와이프 라이브러리 Swiper API (1편 - 초급)
웹>HTML/CSS/JAVASCRIPT
싸이트를 운영하다보면 멋진 슬라이드 기능을 구현하고 싶을때가 있다. 무작정 JAVASCRIPT 를 이용하여 만들기엔 너무 어렵기 때문에 시중에 오픈된 라이브러리를 이용하게 되는데 그중 모바일에 가장 친화적인 Swiper API가 있다. Swiper API는 업데이트도 꾸준히 되고 있으며 초기에 발생되었던 많은 버그들이 지속적으로 업데이트되어 현재는 거의 완···
PHP의 JSON을 이용한 자바스크립트 변수 활용법
웹>PHP 일반
JSON은 오브젝트 데이터의 직렬화 데이터 기법으로 프로그램에서는 공통 언어로 많이 사용된다. 이는 프로그램 언어가 서로 달라도 하나로 통일하여 소통이 가능하도록 연결해주는 역활을 한다. PHP에서는 배열을 이용하여 json_encode() 함수를 이용한 변환 방식을 주로 사용하는데 이와 함께 많이 쓰이는 serialize() 함수도 있다. serializ···
PHP로 예외처리 후 이동된 페이지에서 에러메시지 띄우기
웹>PHP 일반
웹 사이트를 운영하다보면 사용자 입력 또는 프로그램 처리 시 조건에 맞지 않을 경우 예외처리를 해야한다. 이럴때는 해당 페이지에 스크립트 alert 을 이용하여 에러 메시지를 띄우고 페이지를 이동을 하게 되는데 보기가 좋지 않다. 이럴때 사용할 수 있는 방법은 처리되는 페이지를 ajax 처리 하여 결과를 받게 되는데 페이지 구조상 ajax 처리가 아닌 페이···
윈도우에서 hosts 파일은 무슨 파일일까?
정보바다>사용팁/다운로드
프로그램 사용 또는 서버 설정을 하다보면 hosts 파일 수정이 필요할때가 있다. 대부분은 용도를 잘 모르고 변경을 하기 쉽상인데 해당 파일은 보안면에서 본다면 관리를 잘해야한다. 잘못했다간 인터넷으로 연결되는 모든 서비스가 중단될수도 있기때문에 hosts 파일이 대충 어떤 용도로 사용되는지 정도는 이해하고 수정해야한다. hosts 파일 같은 경우 윈도우 ···
[네이버 API] PHP를 이용한 단축 URL API 서비스 사용
API서비스>네이버API
이번에 네이버 API 서비스에 대한 포스팅을 많이 했는데 결론적으로는 네이버에서 제공하는 단축 URL API 서비스를 위해 살펴보다가 포스팅 까지 하게 되었다. 그동안 네이버 API는 공유하기, 로그인, 지도 이외는 사용을 안해봤는데 이번에 간단한 API 기준으로 몇가지 사용해보니 생각보다 잘되어있어 외부 서비스할때도 많이 적용을 해볼까 한다. 네이버에서 ···
[네이버 API] PHP를 이용한 캡챠 음성 API 서비스 사용
API서비스>네이버API
지난번 편에서 네이버 캡챠 이미지 API 이용방법에 대해 알아보았다. 이번편에서 소개할 API는 캡챠 음성 API로 사용자가 음성에서 제공해주는 소리를 듣고 입력하여 검증하는 방식이다. 본 API 사용할려면 네이버 애플리케이션에 사용 API 등록이 필요하니 하단 링크를 참고하여 미리 설정해 주어야 한다. 음성 캡차 API 적용 가이드 - 개요 음성 캡차 A···
[네이버 API] PHP를 이용한 캡챠 이미지 API 서비스 사용
API서비스>네이버API
캡챠의 경우 사용자의 자동입력 방지를 위해 주로 사용되는 기능으로 네이버에서는 이미지 와 음성 캡챠 API를 제공해주고 있으며 오늘 알아볼 예제는 이미지를 이용한 캡챠이다. 캡챠 하면 네이버보다 조금더 알려진 구글에서 제공하는 리캡챠 API가 있다. 흔히 `로봇이 아닙니다` 로 불리는 이 리캡챠는 사이트 곳곳에서 많이 볼 수 있는데 해당 기능 구현을 자세히···
[네이버 API] PHP를 이용한 Papago 언어감지 API 서비스 사용
API서비스>네이버API
지난편에서 Papago 번역 API에서 대해서 알아보았고 이번편에서는 Papago 언어감지 API에 대해서 알아보도록 하자. Papago 언어감지 API의 경우 입력된 텍스트를 판별하여 어떤 언어인지 알려주는 API 이다. 이는 아래와 같이 구글 번역 사용 시 언어감지 기능처럼 사용이 가능하다. 먼저 네이버에서 소개하는 Papago 언어감지 API 문서 사···
[네이버 API] PHP를 이용한 Papago 번역 API 서비스 사용
API서비스>네이버API
Papago 는 네이버에서 제공되는 번역 API로 네이버에서 제공되는 API중 사용면에서 본다면 정말 쉬운편에 속하는 API중 하나다. 해당 API는 눈팅만 하다가 이번에 처음 써보는 API인데 한국 토박이인 나에겐 왠지 어울리지 않는 API이기도 하지만 그래도 공유를위해 포스팅을 하였다. Neural Machine Translation - INTRO Ne···