하늘과 나의 IT 이야기

Vue.js와 MySQL을 사용하여 회원가입 사이트를 만드는 방법입니다. 1. 프로젝트 설정우선, Vue.js 프로젝트와 Node.js 서버를 설정합니다.Vue.js 설정# Vue CLI를 사용하여 새로운 프로젝트 생성vue create signup-appcd signup-app  Node.js 설정# Node.js 프로젝트 초기화mkdir servercd servernpm init -y# 필요한 패키지 설치npm install express mysql bcrypt body-parser cors axios   2. Vue.js 클라이언트 구현signup-app 폴더에서 작업을 진행합니다.src/components/SignUp.vue   회원가입 아이디: ..

자바스크립트로 개발하게 되면 많이 하는 일 중 하나가 문자열을 체크하는 것이었습니다. input type의 value 값을 읽어 문자열을 체크하거나 유효성 검사를 할때 많이 사용되는데, 이때 종종 만나는 오류중 하나가 undefined 와 null 입니다. 특히 json과 같은 object 타입에서 많이 만날 수 있는데, if(문자열 == "") 와 같은 방식으로는 처리가 되지 않는 경우가 많이 있었습니다. 이럴 경우는 undefined는 typeof를 이용하여 체크할 수 있습니다. 그러나 아래와 같이 간단한 함수를 작성하여 사용하는것이 편리합니다.

어떤 사이트를 보면 마우스 휠을 위아래로 움직였을 때 요즘 스마트폰을 터치해서 화면을 위아래로 움직이는 것처럼 부드럽게 움직이는 사이트가 있습니다. 이번에 저도 홈페이지 작업을 하면서 JQuery를 이용하여 화면을 부드럽게 스크롤 되는 플러그인을 사용해서 화면을 부드럽게 구현하니 기존 사이트와 상당히 다른 느낌을 주는 사이트로 만들어졌습니다. JQuery의 smoothwheel이라는 플러그인을 사용해서 작업을 했습니다. 여러분도 JQuery의 smoothwheel 플러그인을 이용해서 화면 부드럽게 스크롤되는 사이트를 만들어 보시기 바랍니다^^ JQuery 소스 소스 https://github.com/fatlinesofcode/jquery.smoothwheel 데모 사이트 http://fatlinesofc..

자바스크립트로 만든 즐겨찾기 추가 소스(javascript bookmark) 블로그나 홈페이지를 만들다 보면 링크를 클릭하면 웹브라우저의 즐겨찾기에 추가할 수 있는 스크립트 소스가 필요할 때가 있어 이렇게 포스팅해 봅니다. 다른 여러 사이트를 찾아봤지만 일반적으로 모든 브라우저에 적용되지 않아서 모든 브라우저(인터넷익스플로러, 크롬, 파이어폭스, 오페라등)에서 쓸 수 있는 스크립트가 별로 없더라구요. 아래와 같이 하면 대부분의 브라우저에서 즐겨찾기에 추가할 수 있습니다. 소스 보기 오른쪽 상단의 첫번째 버튼을 누르시면 소스를 복사하실 수 있으니 복사해서 사용하세요^^ 아래의 파일을 다운로드 하셔도 됩니다. 위의 자바스크립트 소스 부분은 그냥 붙여넣기해서 사용하시면 되구요. bookmarksite()함수는..

[HTML] 수정가능한 SELECT 태그 소스(Editable 'Select' element) 115x175 mm 120x160 mm 120x287 mm 실행결과 위의 소스코드를 실행하면 아래와 같이 나옵니다.익스플로러 10 에서 테스트한 화면입니다. 출처 : http://stackoverflow.com/questions/2141357/editable-select-element

요즘 부트스트랩이 하나의 화두로 떠오르고 있습니다. 웹개발을 부트스트랩을 이용해서 하고 있다는 이야기도 여기저기 들려오구요. 많은 티스토리 블로거들도 운영하고 있는 블로그의 스킨을 부트스트랩(bootstrap)으로 바꾸려고 알아보고 있거나 또는 스킨으로 바꿀 계획 중이신 것 같습니다. 이쯤되면 도대체 부트스트랩이라는 녀석이 무슨 녀석이길래 이렇게 많은 사람들의 입에서 오르내리고 있는지 궁금해지는데요. 이번 포스팅에서 부트스트랩에 대해 알아보도록 하겠습니다. 부트스트랩(bootstrap)이 등장한 이유? 부트스트랩(bootstrap)이 등장한 이유? 웹페이지 개발을 위해 하나의 프로젝트가 시작되는 경우 한두사람에 의해 진행되기 보다는 여러 사람이 한 곳에 모여 개발을 진행하거나 또는 온라인 상의 커뮤니티 ..

[JQUERY] INPUT 박스에 기본값 넣어주고 마우스 클릭시 초기화해주는 소스 오늘은 JQUERY를 이용해서 클릭하면 초기화하고 blur시 디폴트값을 넣어주는 소스코드를 보도록 하겠습니다. 소스코드는 아래와 같습니다. 클래스 이름을 input_click_init이라고 정해주었습니다. 이 클래스를 지정해준 객체는 클릭하면 빈 값이 설정되고 blur가 되면 0을 설정합니다.

자바스크립트를 이용한 요일 구하기 소스 자바스크립트를 이용한 오늘이 무슨 요일인지 구하는 소스를 보도록 하겠습니다. 자바스크립트를 이용해서 요일을 구하기 위해서는 먼저 getDay() 함수를 이용해야 합니다. getDay() 함수로 오늘의 요일(Day of the Week)에 해당하는 숫자를 얻을 수 있습니다. 숫자는 0으로 시작하며 0은 일요일을 의미합니다. 월요일은 1, 화요일은 2, 수요일은 3 이렇게 표현됩니다. 아래의 소스와 같이 먼저 요일 이름이 들어있는 배열을 만들고 요일 이름이 들어 있는 배열에, 이 숫자를 첨자(인덱스)로 넣으면 현재 "요일명"이 나옵니다. 위 소스코드를 실행하면 아래와 같이 오늘이 무슨 요일인지 확인할 수 있습니다.

웹페이지를 프로그래밍 하다보면 년,월,일 등의 날짜를 입력해야 할 필요가 있는데요. 그런 때 달력이 필요하죠? 그런데 달력을 직접 만들자니 그렇고... 또 인터넷에 있는 소스를 또 그대로 가져다 쓰자니 또 그렇고 여러가지 고민이 되었습니다. 그런데 JQuery에서 제공하는 Datepicker라는 녀석을 이용하니 금방 되더라구요. 디자인은 투박하지만 달력으로의 기능은 문제없으니 간단하게 사용해주면 될 것 같네요. Datepicker라고 해서 소스가 길 것 같다구요? 소스도 간단합니다. Date: 위의 소스를 그대로 복사 & 붙여넣기 하시면 JQuery를 이용한 간단한 달력이 완성됩니다. 소스 응용하기 위의 소스를 조금만 응용해 볼까요?위에 보이는 실행 결과와 조금은 다른 화면임을 알 수 있는데요. 년도와 ..

HTML5, CSS3, JAVASCRIPT 무료 자료를 찾다보면 주로 영어로 된 자료들이 많은데요. 무료로 공개해주신 분이 있어 이렇게 공유합니다.정보를 공개해주신 분은 한국성공회대학교 소프트웨어 학부 외래교수이며, Microsoft Visual C# MVP로 활동하고 계신 원철연 님입니다. 원철연 님이 1년 정도 집필한 책이 우여곡절을 거쳐 출판을 할 수 없게 되자, 누구나 무료로 이 정보를 볼 수 있도록 공개해주신 것입니다. 최근 HTML5와 CSS3, JAVASCRIPT에 대한 새 책이 시중에서 많이 출간되고 있는데, 전문가 분들 중 몇 분은 "그 책들과 비교해서 손색이 없으며 어떤 부분은 이 공개자료가 더 좋기에 그 책들이 영향을 받지 않을까 걱정된다."란 말까지 할 정도라고 하네요. 링크 : h..

클립보드 내용 자동으로 지우기 아래의 소스는 1초마다 클립보드의 내용을 지우는 자바스크립트 소스입니다. 스크립트로 드래그나 마우스 오른쪽 클릭을 막아도 알툴바나 기타 다른 프로그램을 이용하면 자연스럽게(?) 긁어갈 수 있는데요. 이 소스로 조금이나마 막아볼 수 있지 않나 생각을 해봅니다.

JQuery를 이용하는 방법 아래의 소스는 JQuery를 이용한 방법입니다. 아래의 소스는 Javascript를 이용한 방법입니다.

자바스크립트를 이용한 토글 예제 토글이라는 말 아시나요? 한번 누르면 들어가고 한번 누르면 나오고 하는게 토글이라고 보시면 쉽겠네요. 오늘은 자바스크립트를 이용해서 특정 ID를 가진 객체가 사라졌다가 나왔다가 하는 토글 기능을 만들어 볼건데요 먼저 토글 기능의 소스코드를 작성하기 전에 실행화면을 보도록 하겠습니다. 보셨나요? menu 버튼을 누르면 내용이라는 글자가 보였다가 menu 버튼을 한번 더 누르면 내용이라는 글자가 사라지는 것을 보셨을 것입니다. 그러면 이제부터 그 소스를 작성해 보도록 하겠습니다. 소스코드 위와 같은 함수를 사용해서 만들어 보도록 하겠습니다. 전체 예제 소스코드입니다. menu 내용 소스코드 화면의 우측 상단의 첫번째 버튼을 누르면 원본 소스를 보실 수 있습니다. 여러분도 한번..

Javascript의 오류를 모아보았습니다. Javascript 구문 오류 JavaScript 구문 오류는 프로그램이 실행되기 전 컴파일 단계에서 발행하는 오류이며 JavaScript 언어의 문법 규칙을 하나 이상 위반할 경우 발생하는 오류입니다. 오류 번호 / 설명 1019 루프 밖에서는 'break'를 사용할 수 없습니다 1020 루프 밖에서는 'continue'를 사용할 수 없습니다 1030 조건부 컴파일이 해제되었습니다 1027 'switch' 문에서 'default'는 한번만 나타날 수 있습니다 1005 '('가 필요합니다 1006 ')'가 필요합니다 1012 '/'가 필요합니다 1003 ':'가 필요합니다 1004 ';'가 필요합니다 1032 '@'가 필요합니다 1029 '@end'가 필요합니..

프로그래밍을 하다보면 모바일 기기별로 나눠서 프로그래밍을 해야할 때가 있습니다. 대표적인 예를 들자면 안드로이드와 아이폰, 그리고 윈도우 폰이 되겠네요. 그러면 각 기기별로 user-agent 값이 어떻게 나오는지 알아보도록 하겠습니다. 각 기기별 user-agent값은 다음과 같습니다.(출처 : http://artyst.egloos.com/2779071) * 아이폰 Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_6 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8E200 Safari/6533.18.5 * 아이패드 Mozilla/5.0 (iPad; U; CPU OS 4_3 ..