javascript로 카드번호 입력하면 4자리마다 하이픈 또는 공백 자동으로 붙이기(+마스킹처리)
웹 > HTML/CSS/JAVASCRIPT
이번편은 지난번 생년월일 입력 이벤트를 활용하여 카드번호 입력 후 4자리마다 하이픈 또는 공백등의 구분자를 붙여는 스크립트 예제에 대해서 알아보자. 참고로 기본적인 기능들은 앞서 생년월일 입력 이벤트와 유사하며 이를 조금만 활용하면되고 다만 카드 입력의 경우 보안이 중요한 만큼 마스크처리를 추가하였다. 카드번호 입력 후 유효성 체크하여 자동 구분자 넣어주는···
javascript로 생년월일 입력하면 슬래시 또는 하이픈 자동으로 붙이기 (+유효성 체크)
웹 > HTML/CSS/JAVASCRIPT
생년월일은 과거 달력에서 선택하는 방식을 많이 채택하였지만 나이가 있으신분들은 한참을 뒤로 가야하는 불편함이 발생되어 요즘은 입력방식을 사용하는편이다. 이번편에서는 간단하게나마 생년월일 입력 후 슬래시(/) 또는 하이픈(-)을 붙여주는 스크립트이다. 본래 이번편에 소개하는 예제는 JS 라이브러리로 제공할 목적이였으나 시간상 여유가 없어 간단하게 입력 후 처···
아파치 웹서버 - Service Unavailable Error(503 에러) 해결 방법
서버 > APM
아파치 웹서버에서 발생되는 Service Unavailable Error 에러는 서비스는 시작되었지만 접근할 수 없는 서버 내부 오류로 검색을 통해서 해결이 안되는 경우가 있다. 주로 검색을 하면 포트를 열어서 해결하라는 식으로 소개가되는데 이러한 방법으로도 끝까지 해결이 안되는 경우가 있다. 물론 포트를 사용가능하게 여는것도 필요하지만 가장 중요한건 서버···
추억은 스며든다
평행세계 > 부끄러운 시한편
추억은 스며든다 추억은 계속 스며든다. 오랜 시간이 지나도, 더욱 선명하게 떠오른다. 추억에 물들어 있을때쯤 희미하게 떠오르는게 있다.그건 바로 아쉬움이다. 추억과 함께 아쉬움이 존재하기도 하고, 아련했던 추억에다시 돌아오지 않는 그 시절을 떠올려 보기도 한다. 하지만 결국 스며들기만 할뿐 돌아갈 수 없고 아쉬움만 생각하다어느세, 검게 물들어 버린다. 그···
첫사랑은 그랬다
평행세계 > 부끄러운 시한편
첫사랑은 그랬다. 보고만 있어도 좋고,생각만해도 그냥 좋았어 그렇게도 가기 싫었던 학교가너로 인해 매일 설레였어 고백이란 것도 모르고 살았던 나에게처음 고백의 용기를 준 게 너였어 너와 함께했던 순간부터그냥 온통 하루가 다 너였어.
아버지의 크기
평행세계 > 부끄러운 시한편
어릴적 아버지의 등은 거대하고, 기대고 있으면 포근했다무서운 일도 아버지의 등뒤에 숨으면 다 가려질것만 같았다 하지만 내가 커지면 커질 수록 아버지의 등은더 작아지셧고,내가 아버지만큼 컸을땐 아버지의 등은 굽어있었다 기대고 싶어도 더이상 기댈 수 없었다어릴적 보던 아버지의 등이 아니였다때론 안쓰럽기도하고, 심지어슬프기도 했다 하지만, 세월이 지나고보니아버···
우린 늘 친구였습니다
평행세계 > 부끄러운 시한편
우린 늘 친구였습니다. 전 그저 당신이 가는 길을 묵묵히 응원해 줄 뿐입니다.저에게 친구라는 단어는 쉬우나 친구라는 자체는 아직 어렵습니다. 비록 몇년간 연락이 되지 않아도, 한번쯤 서로를 생각해 준다면그걸로서 친구라는 의미를 되새기엔 충분하다고 생각합니다. 너무 다가올려고도 하지 마십시오, 친구란 다가오는것만이 아닙니다.지켜보는것도 친구로서 하나일 수 ···
웹 소켓 서버(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 는 에러를 보완할 수 있는 수단이라기 보단 에러는 회피하는 용도로 사용되고, 커스텀 ···
RWS 프레임워크 프로젝트 개발 후기(1)
RWS 라이브러리 > 기타
RWS 프레임워크는 Redinfo Web Sever 의 줄임말로 현재 운영되는 사이트를 통합한 프레임워크의 이름이다. 처음 개발을 시작한지 2년이 지난것같다. 최근에 대규모 업데이트를 하면서 어느정도 프레임워크 형태가 갖추어 지고 있긴 하지만 고려하지 못했던 사항들이 발생되어 지속적으로 업데이트 중에있다. 처음 개발을 시작하게된 목적은 사이트를 운영할때 조···
PHP8 도입은 언제쯤이 좋을까?
웹 > PHP 일반
PHP와 함께 해온지 벌써 10년이 다되가는것같다. 내가 처음 사용한 버전은 PHP5 버전대였는데 영원할것같던 5도 이제 역사속으로 사라지고 PHP7로 갈아탄지가 엊그제 같은데 부지런하고 똑똑한 PHP 연구원들덕에 빠르게 사라질 듯 싶다. 솔직히 PHP8은 작년에 개발서버에 설치만 해놓고 언젠간 해야지라는 믿을 수 없는 결심만 하고 지금껏 모른척 했지만 회···
RWS 프레임워크 기반 로또 자동추첨 프로그램 업데이트 안내
로또연구소 > 업데이트
오랫동안 미뤄왔던 로또 자동추첨 프로그램을 그디어 업데이트 하게 되었다. 이번 업데이트는 프로그램 업데이트 보단 RWS 프레임워크를 기반으로 변경한게 가장 크고 중간에 오픈했다가 포인트 분할 시스템을 잘 못 만져서 중단된 로또 게임도 다시 오픈하게 되었다. REDINFO 로또 원하는 번호를 조금더 현명하게 추출 하도록 도와주는 로또 자동 추첨 사이트 로또 ···
JQUERY 와 CSS 를 이용하여 텍스트가 길경우 더보기/접기 기능을 만들어보자
웹 > HTML/CSS/JAVASCRIPT
컨텐츠형 페이지를 만들다보면 특정 구간에 불필요한 내용이 길어져 일부 내용을 자르고 더보기 기능을 만들어야할 때가 있다. 더보기 기능은 간단할것 같으면서도 막상 만들려면 귀찮을때가 많이 있다. 특히나 반응형 작업 시에는 고정 크기 화면의 PC화면과는 다르게 크기별로 높이가 달라져 조건처리가 필요할 수도 있다. 이번편에 소개할 더보기 기능은 아래와 같이 두가···
PHP를 이용하여 문장의 앞뒤로 자르고 접두사 붙이기 (mb_substr_after / mb_substr_before)
웹 > PHP 일반
주로 컨텐츠 관련된 작업을 하다보면 글이 길경우 잘라야 하는 경우가 있다. 보통 문장의 뒷부분을 자르고 접두사(...)를 붙이는 경우가 많다. 다만 요즘은 반응형으로 사이트를 많이 제작하다보니 PC기준으로 최대한 글자수를 자르고 CSS로 말줄임 처리를 하는 경우가 많다. 이번편에서는 간단하게나마 PHP를 이용하여 문장의 뒷부분 또는 앞부분 자르는 함수에 대···