Web Tech 검색 결과

해당 글 70건

필수적인 제이쿼리 플러그인 패턴

Essential jQuery Plugin Patterns 자바스크립트에서는 일반적인 개발 문제를 해결하기 위해 입증,검증된 좋은 방법인 Design Pattern(설계 패턴)을 사용함으로써 유용한 이익을 얻을 수 있습니다. 공식 jQuery 플러그인 작성가이드와 Widget 도 훌륭한 출발점을 제공하지만 또 다른 플러그인 디자인 패턴을 살펴보도록 하겠습니다. 플러그인의 개발은 지난 몇 년동안 많은 진전을 해 왔습니다. 우리는 더이상 플러그인을 하나의 방식으로 작성하지 않습니다. 실제로, 플러그인의 특정 패턴은 다른 이슈에 있어서 더 나은 사용성을 제공할 수 있을 것입니다. 일부 개발자들은 jQuery UI widget factory 를 사용할 수 있습니다. 그것은 복잡하고 유연한 UI 구성 요소에 유용..
Web Tech/jQuery 2016. 9. 28. 18:08

jQuery.ajax() & json 간단 이미지 동적 로드하기

jQuery.ajax() & json 이 포스팅에서는 간단하게 ajax 를 이용한 json 파일을 구성해보도록 합니다. 다음의 html, json, script 파일을 구성하여 json 파일을 동적으로 load 해 봅니다. html html images.json 파일 json { "images": [ {"title":"이미지 1","url":"images/img1.jpg"}, {"title":"이미지 2","url":"images/img2.jpg"}, {"title":"이미지 4","url":"images/img4.jpg"}, {"title":"이미지 5","url":"images/img5.jpg"}, {"title":"이미지 6","url":"images/img6.jpg"} ]} script javas..
Web Tech/Ajax 2016. 9. 5. 15:02

jQuery Ajax 알아보기

jQuery Ajax Core Method jQuery Ajax 이해하는 데 필요한 핵심 메서드에 대해 알아보도록 합니다. jQuery Ajax 에 사용되는 메서드는 다음과 같은 것이 있습니다..load()jQuery.get()jQuery.post()jQuery.ajax()jQuery.ajaxSetup() .load() load( url, [data,] [complete(reponseText, textStatus, XMLHttpRequest)]) load 메서드는 주로 외부 파일에 들어 있는 콘텐츠를 읽어 들여 특정 엘리먼트에 추가할 때 사용할 수 있습니다. 즉, 이 메서드는 서버 주소나 파일 위치로부터 html 콘텐츠를 읽어오는데 사용됩니다. 매개변수 url 에 주소 또는 파일위치를 설정하면 파일 안의..
Web Tech/Ajax 2016. 8. 26. 15:30

Ajax 를 활용한 동적 이미지 노드 생성하기

Danymic image node with Ajax이 글은 [저자 김춘경님]의 jQuery를 활용한 인터랙티브 웹 콘텐츠 웹 제작의 예제를 바탕으로 작성한 것임을 알려드립니다. Ajax 를 활용한 이미지 생성(XML 버전)마크업과 CSS 는 다음과 같이 구성합니다.(jQuery 필요함) html & css 이미지 읽어들이기 xml 을 다음과 같이 구성할 수 있습니다. xml 이미지1 images/img1.jpg 이미지2 images/img2.jpg 이미지4 images/img4.jpg 이미지5 images/img5.jpg Ajax 를 이용하여 이미지를 불러와 생성하는 코드는 다음과 같습니다. javascript var xmlHttp; window.onload=function(){ $('#btn_load'..
Web Tech/Ajax 2016. 8. 11. 07:00

package.json 간단히 알아보기

NodeJS package.json이 글에서는 package.json 파일에 작성되어 있는 것에 대해 간단히 알아보도록 하겠습니다.더 많은 정보는 npm-config 를 참고바랍니다. package.jsonpackage.json 에서 가장 중요한 항목은 "name" 과 "version" 입니다.이 항목들은 필수로 입력되어야 하며 이 항목들이 누락되면 여러분의 패키지는 설치할 수 없습니다. namename 과 version 을 통해서 각 패키지의 고유성을 판별하게 되고 패키지의 내용을 변경하려면 version 을 변경해야 합니다. serveral rulename 은 반드시 214자 보다 짧아야 하고, 이는 scoped package 의 scope 를 포함합니다.name 은 점(.)이나 밑줄(_)로 시작할 ..
Web Tech/Gulp 2016. 8. 8. 07:00

Gulp 사용법 #6 (Browser-sync)

Gulp with BrowserSync 로컬에서 프론트엔드 작업시 웹서버를 실행하여 작업한 결과물을 확인하게 됩니다. 파일을 수정할 때마다 띄워놓은 웹서버에서 refresh 를 하여 작업물을 확인하는 것이 일반적이지만 지금 다루려고 하는 BrowserSync 를 사용하면 위의 과정을 보다 편리하게 자동화시킬 수 있습니다. BrowserSync는 Gulp 플러그인이 아닌 node.js 기반의 어플리케이션이지만 Gulp 와 매끄럽게 연동해서 사용할 수 있습니다. 자체적으로 다양한 옵션을 가진 미니 웹서버 기능을 지원하고, 파일 변경시에 이를 자동으로 감지해서 브라우저 Refresh 를 수행할 수 있습니다. 가장 흥미로운 기능은 여러 개의 브라우저를 실행했을 때 한 브라우저에서 클릭을 하면 다른 브라우저에서도..
Web Tech/Gulp 2016. 8. 5. 14:58

Gulp 사용법 #5 (gulp-livereload)

Setting Up Gulp With LiveReload, and Other Tasks앞선 포스팅 단계별 gulp 사용법 #4 까지 스크립트, gulp-sass, gulp-sourcemaps 에 대해 알아보았습니다.이번 글에서는 liveReload 를 다뤄보도록 하겠습니다.일반적으로 로컬에서 프론트엔드 작업을 할 때 어떤 형태로든 웹서버를 띄워서 결과물을 확인하게 됩니다. 파일을 수정할 때마다 정적 리소스들을 빌드해준 후에 띄워놓은 웹서버에 접속해서 리프레시를 해서 결과물을 확인하는 것이 일반적인 작업 패턴일 것입니다.livereload 는 파일 변경(Sass, css, js, html 등...)시에 이를 자동으로 감지해서 브라우저 refresh 를 자동으로 수행할 수 있도록 도와 줄 수 있는 도구입니다..
Web Tech/Gulp 2016. 8. 5. 07:00

Gulp 사용법 #4 (gulp-sass, gulp-sourcemaps)

gulp-sass, gulp-sourcemaps 지난 포스팅에서부터 단계별(#1,2,3)로 전반적인 Gulp 설치와 사용방법에 대해 알아보았습니다. 이 글에서는 CSS 의 전처리기인 Sass 를 컴파일하는 gulp-sass 와 Sass 파일을 역추적할 수 있는 gulp-sourcemaps 에 대해 간단히 알아봅니다. gulpfile.js 지난 gulp 사용법 #3 의 소스코드를 가지고 이어서 gulp-sass, gulp-sourcemaps 모듈을 설치하고 gulpfile.js 를 작성해 보도록 합니다. 먼저 두 개의 gulp 플러그인을 다음과 같이 설치하도록 합니다. Command Line Interface $ npm i gulp-sass gulp-sourcemaps --save--dev gulpfile..
Web Tech/Gulp 2016. 8. 4. 07:00

Gulp 사용법 #3 (gulp-uglify, gulp-rename)

Gulp Plugin - gulp-uglify, gulp-rename 지난 포스팅에서 gulp 설치와 대략적인 gulp 문법, 그리고 gulp 플러그인을 다운받은 후 간단한 gulpfile.js 를 작성해 보는 시간을 가졌습니다. 이번 글에서는 프론트 엔드에서 많이 사용되는 다양한 플러그인을 설치하고 그에 따른 gulpfile.js 를 한 단계, 한 단계 작성해 보도록 합니다. gulp 는 앞서 설명했듯이 node.js 스트림 기반의 task runner 입니다. 반복적으로 발생하는 노가다성의 작업들을 빌드를 함으로서 필요한 작업을 보다 쉽게 처리할 수 있도록 gulp(자동화 빌드 시스템) 란 유용한 도구를 이용해 처리할 수 있습니다. gulp 의 작업흐름 방식은 다음과 같습니다. 위 이미지에서 보았듯이..
Web Tech/Gulp 2016. 8. 3. 08:00

Gulp 사용법 #2 (gulp-concat)

Syntax Gulp 이전 포스팅에서는 gulp 의 설치방법 및 간단한 task 에 대해 알아보았습니다. 이제 본격적으로 gulp 사용방법에 대해 알아봅니다. 만약 gulp 설치가 되어 있지 않다면 Gulp #1 설치를 참고하시기 바랍니다. Determining Folder Structure(폴더 구조 생성하기) gulp 의 workflow(작업흐름) 방식을 이해하기 위해서 전체적인 맥락을 짚어보며 진행하도록 하겠습니다. gulp 설치를 완료한 후 package.json 과 gulpfile.js가 준비되었다면 사용자 프로젝트에 디렉터리 구조를 구성할 필요가 있습니다. 먼저, src (source) 폴더와 dist (distribution) 폴더를 먼저 만들어두로록 합니다. scr 폴더는 어떠한 처리도 하..
Web Tech/Gulp 2016. 8. 2. 08:13

Gulp #1(걸프 설치 및 개요)

자동화 빌드 시스템 : Start Gulp 현재 생산성을 높이고 개발자들의 수고를 덜어줄 수 있는 유용한 도구로는 Grunt, Gulp, Brunch, Bower 등이 있습니다.이러한 도구는 예를 들어 사용자들이 반복적으로 수행하게 되는 일인, javaScript 와 CSS를 온라인 툴이나 기타 툴을 사용하여 파일의 용량을 줄이기 위해 압축, 병합을 시도한 후 수정작업이 발생할 경우 또 다시 일련의 반복작업을 하게 되는 것이 다반사인데 이러한 반복적인 할 일들을 자동으로 대신 처리해주는 것이 자동화 빌드 시스템입니다. 이 글에서는 다른 자동화 빌드 시스템보다 쉬운 문법을 제공하고 있는 gulp 에 대해 알아보도록 합니다.gulp 는 Grunt 보다 후발주자임에도 쉬운 문법으로 인해 접근성이 뛰어나 꾸준한..
Web Tech/Gulp 2016. 8. 1. 13:19

Animation jQuery- delay()

애니메이션 지연 앞선 포스팅에서 사용한 애니메이션 효과는 메서드가 실행되지 마자 바로 효과가 나타났습니다. jQuery 효과 관련 메서드를 사용자가 정의하여 특정한 시간 후에 실행하고자 할 경우에는 delay() 메서드를 사용할 수 있습니다. jQuery delay() 메서드 delay() 메서드의 매개 변수에는 지연시키려는 시간을 밀리초 단위로 작성합니다. 다음의 예제를 통해 확인해보도록 합니다. See the Pen jQuery delay() 메서드 by jaeheekim (@jaehee) on CodePen. 각 박스는 delay() 메서드로 인하여 0.5초 지연 후에 애니메이션 효과가 나타나는 것을 확인하실 수 있습니다. Related Info 애니메이션 큐와 애니메이션 정지하기 Jaehee's ..
Web Tech/jQuery 2016. 7. 13. 07:00

애니메이션 정지와 큐 - jQuery stop() 메소드 & clearQueue()

Animation Stop & Queue제이쿼리에서 애니메이션 사용시 이용되는 stop() 과 clearQueue() 에 대해 알아보도록 합니다.먼저 애니메이션 큐부터 알아보도록 하겠습니다. 애니메이션 큐큐는 특정한 엘리먼트에서 발생될 애니메이션의 목록입니다. 제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션은 큐에 저장됩니다. 엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킵니다.다시 말해, 애니메이션 효과의 명령은 큐(Queue)에 누적됩니다.큐는 먼저 들어간 것이 먼저 나오는 공간을 말합니다.jQuery의 효과 메서드를 사용하면 효과 명령이 차례차례 큐에 들어가게 되고, 들어간 순서대로 실행되게 됩니다. 아래의 코드를 실행하면서 살펴..
Web Tech/jQuery 2016. 7. 12. 18:36

jQuery의 each() 메서드 알아보기

jQuery - each() 메서드 jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다. javascript // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 위의 메서드를 차례로 알아보도록 하겠습니다. $.each() $.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다...
Web Tech/jQuery 2016. 7. 4. 07:00

attr() 메서드와 prop() 메서드의 차이점

attr() Vs prop() jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다. attr() prop() HTML 의 속성(attribute)을 취급 JavaScript의 프로퍼티(property)를 취급 속성은 HTML Element에 있는 정보 프로퍼티는 JavaScript에서 사용하는 정보 (HTML의 정보와 일치 또는 불일치) 다음의 예시를 살펴보도록 합니다.. 먼저 다음의 코드가 있다고 가정해봅니다. html 버튼 javascript var $goLink = $('.link'); console...
Web Tech/jQuery 2016. 7. 1. 11:37