Loading...

jQuery 로 구현한 url 파싱하는 방법

jQuery 로 구현한  url 파싱하는 방법$(document).ready(function () {    var url = 'http://jquerybyexample.net/codes/code-repository?id=12#top';    //Create a new link with the url as its href:    var a = $('<a>', {  &nb..

Vue.js 로 행추가(중급기술)

https://codepen.io/jjelic/pen/yevNLZ<html> <head> </head> <div class="panel-body" id="app"> <table class="table table-hover"> <thead> <tr> <..

vue.js 로 행추가 및 삭제하기

https://jsfiddle.net/7nxhygLp/<html> <head> </head> <div id="app"> <table class="table"> <thead> <tr> <td><strong>Name</strong></td> ..

jQuery append 행추가 및 삭제

jQuery 행추가 및 삭제<button id='btn-add-row'>행 추가하기</button><button id='btn-delete-row'>행 삭제하기</button><hr><table id="mytable" border="1" cellspacing="3"> <tr> <th>제목</th> <th>일시<..

jQuery 로 파일 업로드 라이브러리 FileUp

http://www.jqueryscript.net/form/jQuery-AJAX-File-Uploader-FileUp.htmljQuery 로 파일 업로드 할때 좋은 라이브러리 인듯 싶네요.FileUp is a simple, flexible, customizable jQuery file upload plugin which makes it easy to upload your local files to servers via AJAX requests, wi..

File APIs 를 이용하여 자바스크립트로 파일들을 읽어보기

File APIs 를 이용하여 자바스크립트로 파일들을 읽어보기HTML5는 마침내 File API 사양을 통해 로컬 파일과 상호 작용하는 표준 방법을 제공합니다 . 기능의 예로 File API를 사용하여 이미지가 서버로 전송되는 동안 미리보기 이미지 미리보기를 만들거나 사용자가 오프라인 상태 일 때 앱이 파일 참조를 저장할 수 있습니다. 또한 클라이언트 측 로직을 사용하여 업로드의 MIME 유형이 ..

Vue.js v2 CRUD application

https://codepen.io/mevdschee/pen/BpbEbj1. html<html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Vue.js CRUD application</title> <meta name="description" ..

아이프레임 iframe 리사이즈 resize 조절 하는 방법

아이프레임 iframe 리사이즈 resize 조절 하는 방법https://github.com/davidjbradshaw/iframe-resizer부모 페이지 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"/> <title></title> <style> body ..

2017.08.02 00:29

mac 맥 환경에서 Vue.js 설치하기

Vue.js 설치하는 방법은 매우 쉽습니다. https://kr.vuejs.org/v2/guide/installation.htmlmac 에 NPM 이 설치되어 있어야 하며, 설치 이후에 아래와 같은 순서대로 설치를 하면 됩니다.제가 직접 MAC 환경에서 터미널화면을 통해 실행해 보겠습니다.sim-ui-MacBook-Air:vueJS shimjaewoon$ npm install vuenpm WARN saveError ENOENT: no suc..

ReactJS 를 mac 환경에서 설치해보기

ReactJS 작업환경 설정하기https://velopert.com/814 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff} span.s1 {font-variant-ligatures: no-common-ligatures} webpack2 입문 가이드 및 설치https://hyunseob.github.io/2017/03/..

jQuery 로 파일 업로드 로딩바 구현하기

클라이언트 단에서 파일을 처리하는 로딩 바랄 구현하는 부분이며, 실제 서버에서 처리하는 부분은 없음을 알고 사용해야 합니다. $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentCom..

javascript 로 로딩바 만들어 보기

javascript 로 로딩바 만들어 보기 <!DOCTYPE html> <html> <style> #myProgress { position: relative; width: 100%; height: 30px; background-color: #ddd; } #myBar { position: absolute; width: 1%; height: 100%..

Amazon S3 를 javascript 자바스크립트로 upload 업로드 하기

먼저 CORS 환경을 아래와 같이 설정해 줍니다.  그리고 나서 사용이 가능합니다.http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.htmlConfiguring CORSBefore the browser script can access the Amazon S3 bucket, you must first set up its ..

html 5 환경에서 파일 사이즈 file size 알아내기

html 5 환경에서 파일 사이즈 file size 알아내기ie 는 10 이상부터 지원이 됩니다.https://developer.mozilla.org/ko/docs/Using_files_from_web_applications <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>File(s) size</title> ..

2017.06.07 13:28

구글 캘린더(구글 달력) 에 일정 추가 하는 방법

구글 캘린더(구글 달력) 에 일정 추가 하는 방법1) 템플릿 형태 : 한글은 전부 url encoding 을 하셔서 전송하셔야 합니다.    => 설명글의 엔터값은 "%0A" 로 변환하셔서 전송하면 됩니다.<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text={제목}&dates=YYYYMMDDTHHMMSS/YYYYMMDDTHHMM..

Javascript key code 자바스크립트 키코드 알아보기

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes Key Code   Key Code   Key Code backspace 8 e 69 numpad 8 104 tab 9 f 70 numpad 9 105 enter 13 g ..

2017.04.23 00:32

mac 환경에서 angular 4 앵귤러 프로젝트 만들어보기

Angular CLI 는 기본 구조, 컴포넌트 생성, 빌드, 유닛테스트, 개발서버, 배포를 관리 할 수 있도록 도와주는 커멘드라인 인터페이스 입니다.https://github.com/angular/angular-clinpm 설치 이후에 angular cli 를 설치 하는 구문입니다. 터미널을 열어서 아래 구문을 실행합니다.npm install -g @angular/cli이제 angular cli 가 설치 완료되고 나서, angular 프로젝..

2017.04.18 14:58

windows 환경의 node.js 및 npm 설치 방법

node.js 사이트가서 다운로드 받습니다. 윈도우용~https://nodejs.org/en/download/설치 이후에, npm 최신버전을 다운로드 받도록 하죠.https://github.com/felixrieseberg/npm-windows-upgrade//1. 선택해서 버전을 설치할 경우, npm install --global --production npm-windows-upgrade npm-windows-upgrade//2. 최신버전 설치 방..

mac 환경에서 node.js 로 chat 구현해 보기

node.js 를 설치를 먼저 하고 옵니다.http://aspdotnet.tistory.com/1849express 를 설치 할 예정입니다. 먼저 폴더 nodesample 을 만들어서 거기에서 npm init 를 통해 package.json 을 생성합니다.그 다음, npm 을 통해 express 를 설치 합니다. npm install --save express p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: ..

2017.04.18 00:10

mac 환경에서 node.js 설치하기

MAC 환경에서 node. js 를 설치하기 위해서는, 우선 간단하게 터미널을 실행합니다.여기서는 nvm 을 통해 node.js 를 설치할 예정입니다.https://github.com/creationix/nvm 사이트 대로 따라 해 보겠습니다.터미널을 실행합니다.Last login: Mon Apr 17 22:04:04 on consolesim-ui-MacBook-Air:~ shimjaewoon$ curl -o- https://raw.githubuse..

2017.04.17 00:42

mac 환경에서 mysql 설치하기

mysql 사이트에 가서 mac 이면 ,  Mac OS X 10.12 (x86, 64-bit), DMG Archive 를 다운로드 받습니다.https://dev.mysql.com/downloads/mysql/설치 할때, 임시 비밀번호를 발급해 줍니다. 이 비밀번호를 꼭 어디에 복사해 놓길  바랍니다.mysql 은 시스템 환경설정에 가서 찾으시면 됩니다. 선택 한 다음 중지되어 있는 것을 시작해 주시기 바랍니다.터미널을 엽니..

2017.04.16 23:35

sts 툴에서 spring boot 개발시 jar 로 배포하기

sts 툴에서 spring boot 개발시 jar 로 배포하기sts 에서 jar 형태로 배포하기 위해서는 프로젝트 선택 후, 우클릭 하여 run as > maven build 를 선택합니다.workspace 를 선택하면 기본 디렉토리를 선택하는 새창이 뜨며, 배포할 프로젝트를 선택한 다음,  ok 를 선택합니다. 그 다음, goals 에 package 라고 기재 후 run 버튼을 누르면 배포가 됩니다.배포 경로에 가면 해당 폴더에 ja..

랜덤 위치 jQuery

랜덤 위치 jQueryhttps://codepen.io/kaypooma/pen/tAfwm?editors=1111html<div id="rand_pos" class="rand"></div><div id="pos_log" class="log">x: 0<br />y: 0</div><button class="new_pos">New position</button>css.rand {&n..

백그라운드를 슬라이드 형식으로 변환해 주는 멋진 vegas 오픈 소스이다.

백그라운드를 슬라이드 형식으로 변환해 주는 멋진 vegas 오픈 소스이다.http://serenity.is/demoVegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.https://github.com/jaysalvat/vegas

2017.03.21 10:44

Spring Tool Suite 툴에서 war 을 배포하는 방법.

Spring Tool Suite 툴에서 war 을 배포하는 방법. 먼저 저는 spring boot 로 프로젝트를 생성한 이유로 인해, 만약에 tomcat 과 관련된 부분을 pom.xml 에 넣었을 경우 war 배포시 오류가 발생합니다.              <!--             <dependency&g..

2017.03.15 14:57

STS Spring Boot 로 프로젝트 생성 및 Hello, Spring Boot! 실행하기

Spring Boot 로 프로젝트 생성 및 Hello, Spring Boot! 실행하기 spring starter project 를 선택합니다. type 은 maven 이고 packaging 은 war 로 지정합니다. 최소한의 jpa, web, h2 정도 컴포넌트를 지정하고 받습니다. 프로젝트 우측클릭 하고, debug as 를 선택한 다음, spring boot app 이 보이면 spring boot 로 개발이 진행되며, t..

javascript email check 이메일 체크

  이메일 주소 체크 하는 방법이 두 가지 있네요. function isEmail(email) { var regex = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|p..

2017.02.08 14:35

IntelliJ 로 spring mvc + gradle 설정하기

폴더구조build.gradle group 'com.gradle.springdemo' version '1.0-SNAPSHOT' apply plugin: 'groovy' apply plugin: 'java' apply plugin: 'war' sourceCompatibility = 1.8 targetCompatibility = 1.8 [compileJava, compileTestJava]*.options*.encoding = 'UTF-8' // 인..

jquery 자동 행 추가 및 이벤트 핸들러 설정

https://jsfiddle.net/shimpark/6Lxf55rq/html<button id="btnGenerateTable">Generate Table</button><br><div id="parentHolder"></div>jsvar bookDetails = [];bookDetails.push(["Book Id", "Book Title", "Author"]);bookDetails.push(..

java spring 동영상 강좌

스프링 동영상 강좌  신입SW인력을 위한 실전 자바(Java) 스프링(Spring) 동영상과정 제 01강 스프링이란게시자: Seoul Wiz24:28 신입SW인력을 위한 실전 자바(Java) 스프링(Spring) 동영상과정 제 02강 스프링 프로젝트 만들기게시자: Seoul Wiz33:44 신입SW인력을 위한 실전 자바(Java) 스프링(Spring) 동영상과정 제 03강 DI(Dependency..