javascript로 카드번호 입력하면 4자리마다 하이픈 또는 공백 자동으로 붙이기(+마스킹처리)
웹>HTML/CSS/JAVASCRIPT
이번편은 지난번 생년월일 입력 이벤트를 활용하여 카드번호 입력 후 4자리마다 하이픈 또는 공백등의 구분자를 붙여는 스크립트 예제에 대해서 알아보자. 참고로 기본적인 기능들은 앞서 생년월일 입력 이벤트와 유사하며 이를 조금만 활용하면되고 다만 카드 입력의 경우 보안이 중요한 만큼 마스크처리를 추가하였다. 카드번호 입력 후 유효성 체크하여 자동 구분자 넣어주는···
javascript로 생년월일 입력하면 슬래시 또는 하이픈 자동으로 붙이기 (+유효성 체크)
웹>HTML/CSS/JAVASCRIPT
생년월일은 과거 달력에서 선택하는 방식을 많이 채택하였지만 나이가 있으신분들은 한참을 뒤로 가야하는 불편함이 발생되어 요즘은 입력방식을 사용하는편이다. 이번편에서는 간단하게나마 생년월일 입력 후 슬래시(/) 또는 하이픈(-)을 붙여주는 스크립트이다. 본래 이번편에 소개하는 예제는 JS 라이브러리로 제공할 목적이였으나 시간상 여유가 없어 간단하게 입력 후 처···
웹 소켓 서버(Websocket) - Ratchet 웹 소켓 서버에서 접속자를 제어
웹>PHP 일반
Ratchet 웹 소켓 서버를 실행하면 소켓의 정보만 있다면 로컬에서만 접속가능한 환경이 아닐 경우 TCP URI 정보만 있다면 누구든 클라이언트에서 웹 소켓을 연결하여 접속을 할 수 있게된다. 우리는 이를 사전에 막아 보안강화를 할 필요가 있다. 기본적으로 포트를 막는 방법엔 아래와 같이 두가지 방법이 있다. 1. iptables 를이용하는 방법이 가장 ···
웹 소켓 서버(Websocket) - Ratchet 라이브러리의 보안 프로토콜(wss) 소켓 생성방법
웹>PHP 일반
웹 소켓은 ws 와 wss 프로토콜 방식을 제공하는데 이는 일반적인 URI의 HTTP 와 HTTPS와 같이 일반전송과 암호화전송 정도로 이해하면 된다. ws 프로토콜을 이용할경우 일반적인 원문으로 전송이 되기 때문에 중요 데이터를 공격자는 그대로 볼 수 있다. 이는 DB로 본다면 비밀번호 칼럼을 그대로 원문으로 처리한것과 동일하다. 이럴경우 DB가 노출되면···
웹 소켓 서버(Websocket) - 자바스크립트 Websocket 이용한 간단한 채팅 프로그램 예제
웹>PHP 일반
자바스크립트에서 공식적으로 제공되는 Websocket 객체는 클라이언트 와 서버 간 데이터를 주고 받을 수 있도록 연결 스트림을 만들어 주는 기술로 일반 소켓통신은 서버간 통신였다면 웹 소켓은 클라이언트 to 서버간 통신으로 볼 수 있다. 그렇다고 해서 클라이언트만 이용가능한건 아니며 서버간 통신도 가능하지만 서버간 통신이라면 굳이 복잡한 웹 소켓을 보단 ···
웹 소켓 서버(Websocket) - PHP Ratchet 라이브러리 설치 및 실행
웹>PHP 일반
PHP를 통해 웹 소켓을 하기 위해선 소켓 서버가 있어야한다. 당연하게도 우리는 웹 소켓 프로그램을 만들기엔 오랜시간이 걸리고 어쩌면 영영 못만들 수 있다. 그래서 제공되는 라이브러리를 사용해야 하며 라이브러리는 Composer를 통해 쉽게 관리할 수 있다. 우선 들어가기 앞서 Composer 설치가 안되어 있을 경우 진행할 수 없으니 사전에 Compose···
순수 javascript의 fetch 함수를 이용한 커스텀 비동기 ajax 함수
웹>HTML/CSS/JAVASCRIPT
순수 javascript 에서 ajax 통신을 할때 주로 XMLHttpRequest 또는 fetch 를 이용했을 것이다. XMLHttpRequest의 경우 현재도 많이 사용되는 방식이긴 하나 현재까지 와서는 이보다 더 강력한 fetch 함수를 많이 사용하고 있는 편이다. 이번편은 fetch 함수를 이용한 커스텀 비동기 ajax 함수에 대해 알아보도록 하자 ···
JQuery 에서 ajax 전송시 동기(async:false) 처리가 되지 않아 return 값을 받을 수 없을 시 대안
웹>HTML/CSS/JAVASCRIPT
JQuery를 이용한 ajax 처리 시 보통 비동기로 처리하지만 동기 처리를 통해 결과값을 받아야하는 경우가 있다. 이때 ajax 옵션에 async:false 를 넣어주면 동기방식으로 처리를 할 수 있기에 자주 사용을 했었는데 특정 기기 환경에서 결과값을 받지 못하는 경우가 발생했다. 처음엔 AJAX 처리시 오류가 발생했나 하여 디버깅을 여러번 해보았지만 ···
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은 작년에 개발서버에 설치만 해놓고 언젠간 해야지라는 믿을 수 없는 결심만 하고 지금껏 모른척 했지만 회···
JQUERY 와 CSS 를 이용하여 텍스트가 길경우 더보기/접기 기능을 만들어보자
웹>HTML/CSS/JAVASCRIPT
컨텐츠형 페이지를 만들다보면 특정 구간에 불필요한 내용이 길어져 일부 내용을 자르고 더보기 기능을 만들어야할 때가 있다. 더보기 기능은 간단할것 같으면서도 막상 만들려면 귀찮을때가 많이 있다. 특히나 반응형 작업 시에는 고정 크기 화면의 PC화면과는 다르게 크기별로 높이가 달라져 조건처리가 필요할 수도 있다. 이번편에 소개할 더보기 기능은 아래와 같이 두가···
PHP를 이용하여 문장의 앞뒤로 자르고 접두사 붙이기 (mb_substr_after / mb_substr_before)
웹>PHP 일반
주로 컨텐츠 관련된 작업을 하다보면 글이 길경우 잘라야 하는 경우가 있다. 보통 문장의 뒷부분을 자르고 접두사(...)를 붙이는 경우가 많다. 다만 요즘은 반응형으로 사이트를 많이 제작하다보니 PC기준으로 최대한 글자수를 자르고 CSS로 말줄임 처리를 하는 경우가 많다. 이번편에서는 간단하게나마 PHP를 이용하여 문장의 뒷부분 또는 앞부분 자르는 함수에 대···
QR코드 생성 및 PHP 활용 방법 (QR Code API)
웹>API/서비스 연동
QR코드란 문자열로 된 정보가 저장된 코드인데 보통 2차원 데이터 코드라고 한다. 이건 수학에 좀더 관심있는 사람이라면 쉽게 이해할 수 있겠지만 그런걸 깊게 파고 싶다면 역사부터 시작해야하니 본 포스팅에서는 넘어가고 QR코드는 정사각형으로된 정보코드로 이해하고 넘어가자. (솔직히 나도 설명하기 힘듬) QR코드는를 보기전에 이와 비슷한 바코드가 있는데 바코드···
PHP의 mb_strlen 결과와 javascript의 length 결과값이 다를때 대처
웹>PHP 일반
지금까지 개발하면서 mb_strlen 과 Javascript의 길이가 다를 수 있다는걸 인지하지 못하였다. 아무래도 서버단에서만 체크하다보니 디테일한 부분은 인지를 못했던것같다. 보통 우리가 javascript로 글자수를 판별할 시에는 아래와 같이 `변수.length`와 같이 판별을 할것이다. <script> var a = "한글 입니다."; a···
PHP 의 exec 함수로 결과값(output) 받을시 전체 결과값이 안나올경우 처리방법
웹>PHP 일반
PHP에서 exec 함수의 경우 쉘 명령어(shell)를 수행할 수 있도록 도와주는 함수이며 그만큼 사용시에 보안에 신경 써야한다. 대부분 가공된 데이터를 기준 한정된 코드로 가공하여 많이 사용하게 되는데 특정 명령어를 사용할때 출력되는 내용이 전체가 아닌 마지막 부분만 노출되는 경우가 있다. 분명 쉘(shell)에서 입력할때는 정상 출력 되지만 PHP e···
PHP를 이용하여 HTML 소스 치환과 번역 기술에 사용되는 언어팩의 기본원리를 알아보자
웹>PHP 일반
치환이란 어떠한 것을 다른 무언가로 교체하는 것을 의미한다. 언뜻 보면 바꾸는 것과 비슷해 보이나 치환은 바꾼다는 뜻보단 대체로서의 의미가 맞는 말이다. 웹 프로그래밍의 경우 HTML 소스와 함께 병행하여 쓰다보니 소스가 상당히 보기 불편해 지는 경우가 많다. 이럴때 사용할 수 있는게 치환자인데 이는 비공개 소스에 대한 유저용 치환자를 제공해 주는 템플릿 ···
별도 라이브러리 없이 자체 캡챠(Captcha) 기능을 구현해보자. (for PHP+CSS+JQUERY)
웹>개발테스트/교육
캡챠는 사용자 입력 검증 관련된 개발하다보면 한번쯤 사용했거나 들어본적이 있을 것이다. 쉽게 설명하면 입력후 제줄된 문서를 진짜 타이핑해서 쓴건지 아니면 별도 프로그램으로 이용하여 제줄한건지 사전에 체크할 수 있는 시스템이다. 이러한 캡챠는 지속적으로 기술이 발전되고 있지만 자동입력 프로그램 또한 지속 발전하여 보안코드 마저 인식 후 뚫어버리는 경우가 있다···
PHP의 예외처리 try/catch/finally 의 기본 사용방법
웹>PHP 일반
PHP에서 예외처리를 할 수 있는 try ~ catch 라는 제어문은 try 블록 내에 소스코드 내에 작성하고 예외처리가 있을 경우 catch 블록으로 보내서 처리를 할 수 있게 만들어 준다. finally는 가장 마지막에 실행되는 처리문으로 보면되고 실제 복잡하게 사용한다면 내용만 길어지고 어려울 수 있으니 이번편에서는 예외 프로그램 처리 시 간단한 활용···
jQuery 연결 이벤트 on에 대해 알아보자.
웹>HTML/CSS/JAVASCRIPT
jQuery 에서 사용되는 on 이벤트는 연결 이벤트중 하나로 click, mousedown,keydown 등의 여러 동작 이벤트를 연결하여 처리가 가능하다. 참고로 같은 용도로 사용되는 연결이벤트 bind, delegate, live 등이 있지만 jQuery API 문서내 권고 사항으로 본다면 on 이벤트로 대체해야 추후 높은 버전을 사용하더라도 변경없이···
