명우니닷컴

삶의 늪에 들어 가기 전/정리중(미정리)

[Node.js] mysql 모듈 설치 및 연동하기

[Node.js] mysql 모듈 설치 및 연동하기 * 사전에 미리 node.js가 설치되어 있어야 합니다. * 참고 : http://myeonguni.tistory.com/1388 http://bcho.tistory.com/892 node.js는 대표적인 RDBMS(Relational Data Base Management System) 오픈소스인 mysql을 지원합니다. 여러가지 mysql 연동 모듈이 있지만 이번 포스팅에서는 가장 보편적으로 사용되는 node-mysql 모듈에 대하여 알아보도록 하겠습니다. * node-mysql은 오픈소스로 https://github.com/felixge/node-mysql 에 공개되어 있습니다. 1. mysql 모듈 설치하기 -> mysql 모듈을 설치할 폴더를 생..

삶의 늪에 들어 가기 전/정리중(미정리)

[참고사이트] JSFiddle - https://jsfiddle.net/

[참고사이트] JSFiddle - https://jsfiddle.net/ html, css, javascript에 대한 코드 테스트를 지원해주는 웹 어플리케이션 사이트

삶의 늪에 들어 가기 전/정리중(미정리)

[자바스크립트] 부트스트랩(Bootstrap) 라이브러리 외부 연결 URL

[자바스크립트] 부트스트랩(Bootstrap) 라이브러리 연결 URL 작업 내역 : 부트스트랩 라이브러리 파일이 로컬에 없을 경우 외부에서 사용가능한 URL 주소 소스 코드 //@ myeonguni.com @

삶의 늪에 들어 가기 전/정리중(미정리)

[Canvas] 캔버스 작업 내역 로컬에 이미지 파일로 저장하기(.png)

[Canvas] 캔버스 작업 내역 로컬에 이미지 파일로 저장하기(.png) 작업 내역 : 캔버스 영역 내에 작업한 2d 내역을 사용자의 로컬저장소에 이미지 파일로 저장하기 위하여(.png) 소스 코드 [javascript] //@ myeonguni.com @ // download(id)를 가진 버튼을 클릭할 경우 $("#download").click(function(){ downloadCanvas(this, 'canvas', 'myeonguni.png'); }); // 작업 이미지 로컬 다운로드(.PNG) function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); l..

삶의 늪에 들어 가기 전/정리중(미정리)

[자바스크립트] 접속 디바이스 체크 (데스크톱인지 모바일인지)

[자바스크립트] 브라우저 종류 및 버전 체크 작업 내역 : 접속자의 디바이스를 체크하여 마우스 이벤트를 지원할지 터치 이벤트를 지원할지 판단하기 위하여 소스 코드 //@ myeonguni.com @ // 접속 디바이스를 확인합니다(데스크탑:false, 모바일:true) function isTouchAble(){ if(navigator.userAgent.indexOf('Mobile') != -1){ return true; } else{ return false; } } 위에서 작성한 함수 사용 예) // 터치 지원 여부 var touchAble = isTouchAble(); // 디바이스에 따른 이벤트를 선택합니다. var START_EV = (touchAble) ? 'touchstart' : 'moused..

삶의 늪에 들어 가기 전/정리중(미정리)

[자바스크립트] 브라우저 종류 및 버전 체크

[자바스크립트] 브라우저 종류 및 버전 체크 접속자의 브라우저 종류 및 (익스플로러의 경우) 버전을 체크하는 자바스크립트 함수 입니다. //@ myeonguni.com @ // 접속 브라우저를 확인합니다(html5 지원하지 않을 경우 경고문을 출력하기 위해 사용) function isBrowserCheck(){ var agt = navigator.userAgent.toLowerCase(); if (agt.indexOf("chrome") != -1) return 'Chrome'; if (agt.indexOf("opera") != -1) return 'Opera'; if (agt.indexOf("staroffice") != -1) return 'Star Office'; if (agt.indexOf("webt..

삶의 늪에 들어 가기 전/정리중(미정리)

[명우니닷컴] 웹 실시간 그림판 만들기(4)

작업 내역 : node.js 웹 소켓 모듈 서버를 이용한 실시간 그림판 구현 진행 중 작업 : 데스크탑 및 모바일 최적화 완료 앞으로 진행해야할 사항 1) 데이터베이스 연동 (사용자가 캔버스 내에 작업한 내역이 유지되도록 - 최대 5만건 제한) - DB 서버로 사용할 고정 IP 필요 2) 그림 도구 추가 (펜 & 지우개 굵기 선택, 모든 색 지원을 위한 팔레트 라이브러리 추가) 3) 실시간 유저 목록 - 입장 시 닉네임을 받아 리스트 형식으로 유지하거나 / 마우스 오버 좌표 값에 따른 유저 닉네임 노출 4) 각 유저마다 다른 브라우저 프레임 크기에 대한 동기화 - 열심히 검색해볼것..... 테스트 주소 : http://myeonguni.com 진행 결과물 관련 소스코드 1. nodeWS.js [Serve..

삶의 늪에 들어 가기 전/정리중(미정리)

[Node.js] websocket 모듈을 통한 에코 서버 구축하기

[Node.js] websocket 모듈을 통한 에코 서버 구축하기 * 사전에 미리 node.js가 설치되어 있어야 합니다. * 참고 : http://myeonguni.tistory.com/1388 1. websocket 모듈 설치하기 -> websocket 모듈을 설치할 폴더를 생성해줍니다. (ex - c:\wsServer) -> 시작(윈도우키) + R -> cmd 입력 후 엔터 -> websocket 모듈을 설치할 폴더로 포커스를 이동 - "cd c:\wsServer" -> websocket 모듈 설치 명령어 입력 - "npm install websocket" (모듈을 인스톨하는 과정이 5초?정도 걸립니다) 여기까지 하셨으면 websocket 모듈은 설치가 완료되었습니다. 설치한 폴더로 가서 확인해봅..

삶의 늪에 들어 가기 전/정리중(미정리)

[Node.js] node.js 서버 구축하기

[Node.js] node.js 서버 구축하기 1. node.js 설치하기 설치주소 - https://nodejs.org/en/ -> LTS 를 클릭하여 install 파일을 다운로드 합니다. -> 모든 과정을 Next 해주시면 환경변수 설정까지 자동으로 해줍니다. 2. 설치 완료 테스트하기 -> 먼저 서버 소스코드를 구동할 폴더를 만들어 주세요(ex: c:\svr) -> 폴더를 만드셨으면 테스트용 서버 자바스크립트 파일을 생성하여 줍니다(소스코드는 아래 참고) (ex: testServer.js) var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}..

삶의 늪에 들어 가기 전/정리중(미정리)

test

>