세이박스

빅데이터 및 데이터 공유 시대에 공공데이터 등 수많은 데이터들이 쏟아져 나오고 있으나 이를 잘 활용하기 위한 실무 중심의 무료 교육(특강)을 준비 했습니다.그리고, 평일 대학생들이 학교 수업 때문에 좋은 교육을 듣기가 어려웠기에 주말 교육을 어럽게 준비하게 되었습니다.전문 강사님들을 모시고 2일간 스파르타식의 특강의 기회를 놓치지 마세요!! □ 과정명 : 공공데이터를 활용한 웹개발 실무 교육 □ 후원 : NIA 한국정보화진흥원□ 교육대상 : 대학생 (전공 무관, 아무나)□ 강의료 : 무료□ 교육기간 : 2018년 11월10일(토), 11월11일(일) / 2일간□ 교육시간 : 09:00 ~ 22:00 (1일 11시간, 총 22시간)□ 교육내용 : 공공데이터 활용 개념(이론) / 실습교육(앱 개발, 분석 및..

안녕하세요! 안드로이드스터디 운영자 이경용 입니다. 요즘 개발하는 대부분은 앱들이 서버와의 통신을 기본으로 개발되고 있습니다. 하지만 대부분 모바일 앱 개발 관련 교육만 있으며, 서버 중심의 관리페이지 개발에 대해서는 잘 없기에 준비했습니다. "요기요", "배달의민족", "쿠팡"와 같은 앱의 업소 정보는 매번 바뀔때 마다 앱을 어떻게 업데이트 할까요? 업소 정보는 별도의 웹 환경에서 관리페이지를 만들고 DB와 이미지를 관리하며, JSON으로 앱과 자료를 주고 받습니다. 이러한 관리페이지를 만드는 기본 과정을 학습하고 실습을 통해 만들어 보고자 합니다. 관리페이지를 만드는 언어는 html , css, javascript, php, mysql 를 이용해서 만들니다. 해당 언어의 기초 지식이 있으면 좋지만, ..

node.js 첫 관문인 hello world 출력하는 것으로 시작하게 된다. 그런데, 뜻하지 않게 undefined 메시지를 만나게 된다. 당황하지 말고 아래 설정 옵션을 true 실행해 준다. module.exports.repl.ignoreUndefined = true; 끝, 드이상 해당 메시지는 나타나지 않는다. ^^; [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=nodejs&wr_id=8

안녕하세요! 안드로이드스터디 운영자 이경용 입니다.요즘 개발하는 대부분은 앱들이 서버와의 통신을 기본으로 개발되고 있습니다. 하지만 대부분 모바일 앱 개발 관련 교육만 있으며, 서버 중심의 관리페이지 개발에 대해서는 잘 없기에 준비했습니다. "요기요"와 같은 앱의 업소 정보는 매번 바뀔때 마다 앱을 어떻게 업데이트 할까요? 업소 정보는 별도의 웹 환경에서 관리페이지를 만들고 DB와 이미지를 관리하며, JSON으로 앱과 자료를 주고 받습니다. 이러한 관리페이지를 만드는 기본 과정을 학습하고 실습을 통해 만들어 보고자 합니다. 관리페이지를 만드는 언어는 html , css, javascript, php, mysql 를 이용해서 만들니다. 해당 언어의 기초 지식이 있으면 좋지만, 전체 구성을 이해하는것 만으로..

기본 JQueryMobile을 변경하고 싶을땐 크롬에서 F12 눌러서 Element 메뉴에서 적용하고자 하는 영역의 class 이름을 알아 내어서 CSS로 컨트롤 해야함.

롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다. [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=193

어느날 갑자기 그누보드 및 배추빌드 사이트에 회원가입 또는 게시판에 자동등록방지 코드 부분이 오류가 생기는 경우가 발생했다면? --------------------------- 웹 페이지의 메시지 --------------------------- 자동등록방지용 코드가 맞지 않습니다. --------------------------- 확인 --------------------------- 1차 kcaptcha 관련 파일들을 새로 업로드 한다. /js/jquery.kcaptcha.js /bbs/kcaptcha_session.php /bbs/kcaptcha_result.php 재등록 ^^ 2차 회원 가입 쪽에도 오류가 나면 해당 코드를 수정한다. if (typeof(f.wr_key) != 'undefined'..

웹호스팅을 이용할 경우 php.ini 수정이 어려운 경우가 있습니다. 특히 외부의 파일을 가져올 경우 allow_url_fopen = 0; 일 경우 1로 수정 해줘야 하지만, 보안상 막아둔 경우 서버를 공용으로 사용하므로 수정을 해주지 않습니다. 저의 경우 cafe24 호스팅을 주로 이용하는데 이곳 역시 allow_url_fopen = 0 으로 되어 있어서 fopen(), file(), file_get_contents() 함수로 외부 URL 을 읽어 들이기가 안됩니다. Warning: file_get_contents() URL file-access is disabled in the server configuration in 하지만, 오류를 해결하는 방법으로 외부 파일을 읽어 들이는 함수 이용전에 다음과 ..

다음 카페 대문에 광고 삽입되는것을 보고서 어떻게 구현하는 것일까? 고민하다가 소스를 보니 자바스크립트를 이용하고 있더군요. 일단, 다음 카페 설정에서 대문 설정이 있는데 html 모드로 설정 하시면 태그를 입력 할 수 있습니다. 하지만, 태그는 사용할수 없도록 차단하고 있습니다. 차단 방법이 iframe 단어로 차단하고 있으므로 ifr ame 을 분리 하면됩니다. 하지만 이렇게 태그를 분리하면 iframe 동작을 못하게 됩니다. 따라서, 자바스크립트의 document.write() 를 이용해서 출력해주면 됩니다. 위 소스처럼 "

그누보드 및 제로보드 게시판 이용시 다음과 같은 오류 발생할 경우가 있다. Warning: Cannot modify header information - headers already sent by (output started at /home/public_html/bbs/_head.php:2) 이와같은 오류는 이미지 Header를 출력 했기 때문에 수정할 수 없다라고 합니다. 논리적 오류로써 header 함수가 호출되기 전에 공백또는 문자 등이 이미 사용자에게 열려 있다는 의미입니다. 즉, 오류 페이지와 연관된 모든 페이지들을 확인해서 헤드 및 세션 처리 이전에 출력된 문자나 공백이 없는지 체크 해서 제거 해주면 되겠지만, 소스가 워낙 복잡한 경우 찾기가 쉽지가 않죠. 이때 소스 맨 상단에 ob_start..

쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다. 먼저 예제 이미지는 총 4장 입니다. 현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다. 1. 이미지 넘버 이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다. 이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다. "num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다. 2. 대표 이미지 출력 기본적으로 출력된 첫번째 이미지를 적용 합니다. img 태그에 id값을 "mainImage"로 적용합니다. 3. 자바스크립트 소스 자바스크립트 내부..

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다. 이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다. 1. 자바스크립트 소스 2. 테이블 소스 질문1 답변1 질문2 답변2 질문3 답변3 3. 소스 설명 : 제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다. 이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다. 먼저 모든 질문을 숨기기 처리합니다. 1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 ..

input 입력시 한글 입력을 style로 막을수도 있지만 자바스크립트로도 막을수 있습니다. 또는 반대로 한글만 입력하도록 적용할 수도 있습니다. 1. 스타일 style='ime-mode:disabled' 2. 자바스크립트 function NumberChk(){ if ((event.keyCode57)) { event.returnValue = false; return false; }else{ return true; } } 3. 적용예 4. 한글만 입력하도록 자바스크립트 함수 수정 function NumberChk() { if(event.keyCode=="") { event.returnValue = false; return false; }else{ return true; } } ▶ 최신영화, 최신 미국드라마..

유투브 동영상을 블로그에 올리고 난뒤에 사이트 접속하면 바로 동영상이 시작 되도록 하고 싶을떄가 있죠. 유트부 소스 보기를 해서 가져온 동영상 소스에 src URL 끝에 &autoplay=1 라는 값을 추가 해주면 됩니다. 빨간색으로 표시한 부분이 추가된 부분 입니다. 아래 달인쿠폰 동영상 바로 시작 되는거 보이시죠! 이번에 김병만의 달인 쿠폰 이벤트를 시작하게 되었구요. 많은 관심 바랍니다. 김병만의 달인 쿠폰 : http://dalincoupon.com ▶ 최신영화, 최신 미국드라마 무료 다운로드... [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=49

오늘 달인쿠폰(http://dalincoupon.com/) 커밍순 페이지를 추가하는 작업을 했습니다. 달인 김병만씨 사진을 PNG로 투명하게 가운데 보이도록 설정하고 배경이미지를 추가 했더니 IE6 브라우저에서 투명 처리 부분이 하늘색으로 보이는 것입니다. 아직은 IE6 이용자가 많다보니 그냥 놔두기엔 아닌것 같더군요. 그렇다고 Gif 파일로 투명하게 하자니 색상이 256이라 김병만씨 사진이 이상하게 되더군요. 자료를 찾아보니 역시나 답은 있더군요. 자바스크립트와 스타일 소스 조금 추가해서 해결하면 되더군요. 먼저 사이에 다음과 같은 소스를 추가 합니다. 1. 자바스크립트 소스 자바스크립트 소스는 스크립트 파일로 따로 분리 하셔도 상관 없습니다. 2. Style 소스 Style소스 역시 Style 파일에..

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다. 아이디 : 위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다. 보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다. 다음은 ime-mode 옵션에 대한 설명 입니다. style="ime-mode:auto" - 현재 선택되어 있는 상태로 한/영중 선택 style="ime-mode:active" - Default로 한글 선택 되는 모..

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다. 아이디 : 위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다. 보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다. 다음은 ime-mode 옵션에 대한 설명 입니다. style="ime-mode:auto" - 현재 선택되어 있는 상태로 한/영중 선택 style="ime-mode:active" - Default로 한글 선택 되는 모..

엠게임 (mgame.com) 사이트 접속하면 우측 하단에 스르륵 광고가 올라 오는 것을 볼 수 있습니다. 이와 같은 광고 방식을 토스트 Toast 배너 광고 방식 이라고 합니다. 세이박스에도 구현되어 있으니 참고 하시기 바랍니다. 엠게임의 경우 보여주고 사라지는 동작만 자바스크립트로 구현하고 슬라이딩 효과는 플래시로 구현 했더군요. 하지만, 일일이 플래시에서 슬라이딩 효과를 줄려면 광고가 바뀔때 마다 적용해야하니 번거롭겠죠! 따라서, 플래시가 되었던 이미지가 되었던 어떤 내용이던지 슬라이딩 효과를 내도록 적용 해 봤습니다. 그리고, 닫기 기능도 간단하게 추가 해놨습니다. 먼저, 표시될 광고 html 소스 예제 입니다. ...... [닫기] 위 HTML 소스에서 수정할 부분은 "광고영역"에 배너 이미지 또..

자바스크립트로 사용자가 입력한 숫자에 천단위로 콤마를 삽입 하고자 하거나 빼고 싶을때 필요한 함수 입니다. 예를들어 입력된 값이 1000000원을 1,000,000원으로 바꾸고자 할 경우 setComma(1000000); 함수를 이용하시면 됩니다. 1,000,000원에서 콤마를 빼고 싶다면 RemoveComma('1,000,000'); 함수를 이용 하시면 됩니다. //1,000단위 마다 콤마(,) 추가 하기 function setComma(str) { return Number(String(str).replace(/\..*|[^\d]/g, "")).toLocaleString().slice(0,-3); } //1,000 단위 마다 콤마(,) 제거 하기 function RemoveComma(str) { ret..

자바스크립트에서 문자를 자르거나 분리하기 위한 방법 입니다. 1. 문자를 특정 위치로 부터 지정한 길이 만큼 자리기 함수 : substr() var a = "123456789"; var b = a.substr(0,3); alert(b); //결과 : 123 var c = a.substr(5,2); alert(c); //결과 : 67 php의 경우 substr(변수,자를위치,자를갯수)이미지만 자바스크립트에서는 변수.substr(자를위치,자를갯수) 방식으로 사용합니다. 자를위치는 문자열 처음이 1이 아닌 0으로 되어 있습니다. 즉, 0,1,2.. 이렇게 시작하니 착오 없으시길 바랍니다. 2. 문자열에서 특정 문자 기준으로 자르기 함수 : split() 적용예 : var a = "010-1111-2222"; ..

전광판 기능 입니다. 아직 초기작이라 디테일한 기능은 없습니다. 추후 요청시 기능을 반영하고자 합니다. 예를 들어 당일 게시글에 한해서만 노출하기라던지 또는 함수 함수 호출시 폭지정 등을 할 수 있도록 개선 할 예정 입니다. 일단 현재 버전에서는 latest.skin.php 파일에서 폭,높이 등을 수정 하셔야 합니다. 전광판 노출 옵션 설정 : /skin/latest/saybox.display/latest.skin.php cont.width = 380; //폭수정 cont.height = 15; //높이수정 cont.scrollspeed = 20; //글자 스크롤 속도(20->0.02초) cont.pausedelay = 3000; //글자 머무는 시간 (3000->3초) cont.pausemouseove..

PHP에서 특정 자리수 만큼 지정된 문자로 변경하고자 할 때 간단하게 str_pad() 함수를 이용하면 편리 합니다. 예를들어 1~20까지의 숫자가 있는데 1~9까지는 2자리수로 맞혀 주기 위해 앞에 "0"을 붙이고자 할 경우 str_pad($a, 2, "0", STR_PAD_LEFT); 라고 하면 간단하게 1~9 인경우 앞에 "0"이 붙게 됩니다. 기타 옵션에 따른 결과를 간단히 설명하겠습니다. 결과 : 1:test s 2:****tests 3:**test**s 4:test*s 1번은 변경할 문자를 입력하지 않을 경우 " " 부족한 자릿수 만큼 우측에 공백으로 추가합니다. 2번의 경우는 LEFT 부족한 자리수 만큼 왼쪽부터 채우며, 3번 BOTH는 좌,우 모두 균등하게 배치합니다. 만약 남은 공백이 5..

1. 드림위버에서 .say 확장자 오픈 되도록 적용 드림위버를 실행후 메뉴 > Edit > Preferences > File Types / Editors > Open in code view: 항목에 .say 추가 합니다. .js .asa .css .cs .config .inc .txt .as .asc .asr .vb .say 2. 드림위버에서 .say 확장자 파일을 불러올 때 php 코드 부분 컬러를 변경 되도록 적용 C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\MMDocumentTypes.xml 파일을 EditPlus 또는 메모장으로 열어서 Ctrl + F 찾기에서 "php"를 찾습니다. 위 소스 라인에서 ,say 라..

회원가입후 비밀번호를 잊은 경우 기존 비번이 암호화 처리 되어 있어(개인정보 보호법에 의해 비밀번호 암호화 의무화) 비번을 임의로 생성후 메일로 발송해야 합니다. 문자 조합을 간단하게 해 버릴 경우 해킹 시도시 비번찾기를 이용해서 이메일로 수신된 비번을 보지 않아서 추측해서 알아 낼 수 가 있습니다. 예로 "aa1234bb" 라는 임시 비번으로 생성해서 회원에게 발송하는데, 항상 숫자 부분만 변동해서 보내 준다면 해커는 역으로 0000~9999까지 조합해서 임의로 접속 시도를 해볼수 있게 됩니다. 간혹 보안 적용이 허술한 사이트의 경우 위와 같이 비번을 발송해주는 곳이 더러 있더군요. 개인정보 유출 사고는 위와 같이 개발자의 부주의가 매우 크다고 보면 됩니다. 문자 조합을 복잡하게 하는게 복잡하지도 않습..

회원가입후 비밀번호를 잊은 경우 기존 비번이 암호화 처리 되어 있어(개인정보 보호법에 의해 비밀번호 암호화 의무화) 비번을 임의로 생성후 메일로 발송해야 합니다. 문자 조합을 간단하게 해 버릴 경우 해킹 시도시 비번찾기를 이용해서 이메일로 수신된 비번을 보지 않아서 추측해서 알아 낼 수 가 있습니다. 예로 "aa1234bb" 라는 임시 비번으로 생성해서 회원에게 발송하는데, 항상 숫자 부분만 변동해서 보내 준다면 해커는 역으로 0000~9999까지 조합해서 임의로 접속 시도를 해볼수 있게 됩니다. 간혹 보안 적용이 허술한 사이트의 경우 위와 같이 비번을 발송해주는 곳이 더러 있더군요. 개인정보 유출 사고는 위와 같이 개발자의 부주의가 매우 크다고 보면 됩니다. 문자 조합을 복잡하게 하는게 복잡하지도 않습..

RSS는 사이트에서 제공하는 자료를 손쉽게 회원에게 빠르게 전달하는 기능을 제공하고 있습니다. 요즘 티스토리와 같은 블로그에 접속해 보면 위 그림 처럼 브라우저의 RSS 피드가 활성화 되는것을 보실 수 있습니다. 보통 브라우저 우측 상단에 보시면 주황색 전파 표시 아이콘 입니다. 해당 피드 아이콘을 클릭하면 현재 페이지에서 제공해주는 RSS를 바로 볼 수가 있습니다. 특히 검색 엔진 로봇의 경우 해당 피드를 손쉽게 이용해서 자료를 참조 할 수 있어 방문자 유입에 필수라 해도 과언이 아닐 것입니다. 저역시 RSS 버튼이 웹사이트 상에 있는데 왜 브라우저에서 활성화가 안될까하고 고민후 티스토리 소스를 확인 해보니 역시 테그가 추가 되어 있더군요. 즉, 해당 페이지의 RSS 피드는 에 있습니다. 라고 알려줘야..

base url 이란? 현재 디렉토리를 지정한 디렉토리로 변경 해주는 기능 입니다. 조금 설명을 구체적으로 하면 다음과 같습니다. 브라우저에서 특정 사이트를 접속시 일단 html 소스를 읽어 옵니다. 그리고 html 소스를 순서대로 분석하면서 이미지, 플래시, 동영상 등의 파일을 다시 불러와서 내컴퓨터 임시 폴더 영역에 저장 합니다. 임시로 저장하는 영역은 IE 7.0인 경우 다음 경로와 같습니다. 브라우저 메뉴 > 도구 > 인터넷 옵션 > 설정 > 파일보기 를 클릭하면 앞전에 받았던 이미지 등이 보일 것입니다. 예) 브라우저에서 읽어온 html 소스에 예와 같은 이미지 테그가 있는경우 브라우저에서는 자동으로 접속한 도메인을 base url로 생각하고 이미지를 받아 옵니다. 즉, 처럼 적용해서 이미지를 ..

홈페이지 title 및 메타태그는 방문자 유입을 위한 가장 기본적인 기능이다. 검색 엔진(로봇)의 경우 홈페이지의 title 또는 메타 태그 내용을 기반으로 검색어를 생성 하므로 게시판 내용의 경우 제목영역이 title이나 메타태그로 지정 되면 매우 효과 적이다. 이러한 특성을 잘 살리고 있는것이 블로그 들이다. 티스토리의 경우 역시 게시글의 제목을 제목 형식으로 이용해서 검색 노출에 매우 좋은 효과를 보이고 있다. 하지만, 그누보드의 경우 "사이이트명 > 게시판 제목 ..." 형태로 표시되어서 검색 효과를 보지 못하게 됩니다. 따라서, /head.sub.php 에서 "//title 적용 부분" 주석 처리 된 부분을 다음과 같이 수정하시면 각 페이지 환경에 맞게 출력이 됩니다. //title 적용 부분 ..

자바스크립트(javascript)에서 팝업 띄우기를 실패 할 경우 alert 메시지로 팝업차단을 변경 할 것을 요청하는 방법 팝업을 해지 해야만 서비스 가능한 경우 위와 같이 처리 하면 가능할 것 같습니다. [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=114

간혹 특정 폴더(디렉토리) 내에 있는 파일들 중에 전체 또는 선택 적으로 일괄 삭제를 해야 할 경우가 있습니다. 다음과 같은 함수를 할용하시면 됩니다. 1. opendir(path) path 지정한 경로의 폴더안에 있는 파일들을 불러 옵니다. 예) 결과) filename: . : filetype: dir filename: .. : filetype: dir filename: apache : filetype: dir filename: cgi : filetype: dir filename: cli : filetype: dir 2. glob(패턴) 파일의 패턴을 호출할때 사용합니다. 예로 *.txt 라고 하면 txt 확장자 파일을 모두 찾아 줍니다. 예) 결과) funclist.txt size 44686 func..