jQuery: selector와 traversing 메소드 2009년 1월에, JQuery 창시자 John Resig는 Sizzle이라 불리는 새로운 오픈 소스 javascript 프로젝트를 소개했습니다. 이것은 Standalone CSS Engine이며, JQuery 1.3이레로, 검색 엔진으로 Sizzle을 사용하고 있습니다. 이번 블로그에서는 Sizzle에서 제공하는
jQuery: 애니메이션 jQuery는 웹화면에서 visual effect를 간편하게 만들고 변경할 수 있게 도와 줍니다. 이런 visual effect는 웹 화면에 대한 사용자의 만족도를 높이는 방법 중에 하나입니다. 오늘은 jQuery Animation 프레임워크를 살펴 보겠습니다. 1.
jQuery: 참 편리한 날짜선택 위젯- datepicker 웹 페이지를 검색하다 보면, 주로 회원가입 또는 날짜 관련해서 입력을 요구 하는 경우가 많습니다. 이처럼 날짜를 입력 받을 때 직접 입력 받는 방법도 있지만, jQuery에서 제공하는 달력 형식의 UI 위젯중 하나인 datepicker가 있습니다. datepicker 위젯은 제가 현재까지 진행했던 프로젝트에서 빠지지 않고 항상 사용했습니다. 참
jQuery : 플러그인 개발 개발 작업을 간단하게 처리하거나 자동화하는 jQuery는 자바스크립트의 핵심 라이브러리가 된지 오래입니다. 많은 개발자들이 jQuery의 기본 기능을 사용하여 작업을 수행합니다. 하지만 더 나아가 플러그-인을 사용하여 jQuery를 확장하여 사용하기도 합니다. 이미 배포된 플러그-인을 적용해서 사용할 수 있지만 직접 플러그-인을 개발하여 프로젝트에서 활용한다면 개발팀의 기술 수준 뿐만
jQuery: data() 이해와 활용 jQuery를 조금이나마 접해보신 분들은 다양한 방법으로 DOM을 select하거나 이벤트 제어, Ajax통신 등 jQuery가 지원하는 편리한 기능에 많이 익숙해지셨을 거라 생각됩니다. 이번에 준비한 글은 매우 유용하고 활용도가 높은 함수이지만 지나치기 쉬운 jQuery의 data()에 대해 알아보겠습니다. 간략하게 말해 data()는 HTML 엘리먼트 내에 데이터를 저장하고
jQuery: Ajax Global Event jQuery 하면 빼놓을 수 없는 것이 Ajax입니다. jQuery의 함수와 이벤트를 사용할 때 발생하는 이점이 Ajax에서는 더욱 증가됩니다. 순수 JavaScript의 Ajax는 너무 복잡하기 때문이죠. jQuery의 Ajax 함수를 사용하면 정말 간단하게 Ajax 통신을 할 수 있고 넥스트리 홈블로그의 이전 글에서 소개된 바가 있습니다. Ajax 통신을 너무
jQuery : Parsing (JSON, XML, HTML) jQuery에 내장되어있는 parseJSON(), parseXML(), parseHTML()을 이용하여 각 문서를 javaScript 객체로 가져와서 사용하는 방법을 알아 봅니다. JSON, XML, HTML 문서는 클라이언트와 서버가 통신할 때 요청/응답 전문 외에도 다양한 목적을 가지고 활용합니다. 특히 JSON은 텍스트이므로 cache나 code정의 등의 용도로도 쉽게 사용할 수 있습니다. 어떤
jQuery : 마우스 이벤트 이전 글(jQuery: 이벤트 연결)에서 이벤트 연결과 해제 방법, 이벤트를 발생시킨 요소(element) 정보를 가지고 있는 이벤트 객체 등을 살펴보았습니다. 이벤트를 조금 경험했으므로, 이번에는 이벤트 종류와 사용방법을 주제로 조금 더 깊게 들어가 봅니다. 이벤트 종류는 네 가지입니다. * 마우스 이벤트 * 키보드 이벤트 * 윈도우 이벤트
jQuery Mobile jQuery는 클라이언트 단의 스크립트 언어 사용을 단순화 할 수 있는 JavaScript 라이브러리입니다. 이 jQuery가 유명하고 널리 쓰이는 라이브러리이기 때문인지, jQuery Mobile을 jQuery의 어떤 기능 중 하나거나, 축소판 정도로 생각하기도 합니다. 하지만 jQuery Mobile은 ‘모바일 환경’에 알맞는 기능들을 제공하는 jQuery core를 바탕으로 만들어진 확장(
jQuery : DOM 탐색 메소드와 필터 jQuery는 DOM핸들링에 뛰어난 JavaScript 라이브러리입니다. jQuery에서 DOM객체를 탐색하는 방법은 여러 가지 있습니다. 이번 글은 DOM구조를 이용하여 DOM객체를 찾는 방법을 다룹니다. DOM객체에 관한 자세한 설명과 기본적인 Selector에 대한 설명은 넥스트리블로그 김유리님의 jQuery와 DOM 첫걸음 [https://www.nextree.co.kr/p9747/]을 참조하세요. DOM을 탐색하는 Filter
객체지향 개발 5대 원리: SOLID 현재를 살아가는 우리들은 모두 일정한 원리/원칙 아래에서 생활하고 있습니다. 여기서의 원칙 이라 함은 좁은 의미로는 개개인의 사고방식이나 신념, 가치관 정도가 될 수가 있겠고, 넓게는 한 국가의 통치 이념이나 통치 방법 정도가 되겠습니다. 그럼 우리는 왜 이런 원칙들 아래에서 생활하고 있는 걸까요? 이거다라고 단정할
HTML5 Canvas – 첫번째 이야기 HTML5는 차세대 웹문서의 표준으로 기존의 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현, 제공 하도록 진화한 "웹프로그래밍언어"입니다. 기존의 HTML4에서 오디오, 비디오, 그래픽처리, 위치정보제공 등 다양한 기능을 추가로 제공함으로 웹 자체적으로 처리할 수 있는 기능을 대폭 향상하였습니다. 총 3가지의 Part로 구성될 것이고 HTML5에 관심을
JavaScript, jQuery, 그리고 Ajax Ajax는 Asynchronous JavaScript And XML의 약어로 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법입니다. 화면 갱신이
jQuery와 DOM 첫걸음 jQuery는 JavaScript의 뛰어난 라이브러리 중 하나입니다. 순수 JavaScript에 비해 간단하게 DOM접근을 할 수 있다는 것이 큰 이유입니다. DOM이 무엇인지, 이 DOM접근을 하는 경우와 이유는 무엇인지 알아보고 DOM접근시 jQuery와 순수 JavaScript의 차이, 성능을 함께 알아보도록 하겠습니다. 1. DOM(Document Object Model)이란? 제가 DOM에 대하여
jQuery : 이벤트 연결 이벤트는 어떤 일이 발생했다는 것을 알리는 비동기적 알림입니다. 이벤트는 사용자 인터페이스, 외부I/O, 또는 프로그램의 다른 부분에서 일어날 수 있습니다. 이벤트는 웹에서도 많이 발생합니다. 예전에는 JavaScript를 통해 많은 이벤트를 연결하고 처리하였습니다. 하지만 최근에 들어와서 jQuery 라이브러리를 통해 개발자가 손쉽게 이벤트를 연결하고 처리합니다. 그래서 이번
Spring Security와 보안, 두번째 이야기 하나의 애플리케이션에 두 개의 인증! 스프링 시큐리티를 프로젝트에 적용하면서 가장 좋은 케이스는 기본적인 설정을 조정하는 것만으로도 고객의 요구사항을 만족시킬 수 있을 때입니다. 특히나 스프링 시큐리티는 커스터마이징을 하게 되면 예상치 못한 상황에서 그것을 컨트롤하기 어려우므로 더더욱 그러합니다. 하지만, 불행히도 이번 프로젝트를 진행하는 동안 그러한 상황에
AngularJS: Scope와 데이터 바인딩[ $apply, $watch ] 오늘의 주제는 AngularJS에서 가장 기초가 되고 중요한 scope입니다. 앞선 사용자정의 디렉티브 생성시에도 scope 옵션을 설정하는것을 볼 수 있듯이 AngularJS를 접하게 되면 가장 많이 접하게되는것이 scope입니다. 그리고 scope와 깊은 관계가 있으며 AngularJS를 강력한 도구로 만들어주는 양방향 데이터바인딩에 대해 알아봅니다. 1. Scope AngularJS에서 Scope는 컨트롤러나 디렉티브의
HTML : 폼(form) 이해 폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른 웹 페이지를 보여줍니다. 이번 글에서 우리가 잘 모르는 폼의 내부적인
CSS : 반응형 웹(Responsive Web) 태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(
CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우저에 알맞게 보이는 것’이 중요하기 때문입니다. 그래서 웹 표준에서는 구조(Constructure)와 표현(Presentation)
Node.js: Hello로 시작하는 Web 애플리케이션 2009년 Ryan Dahl이 발표한 Node.js 는 자바스크립트로 서버 애플리케이션을 구현할 수 있게 해 주는 서버 플랫폼입니다. C나 Java 언어가 주도하던 기존의 기업형 서버 환경에서 이제 자바스크립트가 하나의 영역으로 자리 잡아가고 있습니다. Node.js 덕분에 자바스크립트를 잘 구사하는 UI 개발자들도 서버 영역에 진입할 수
JavaScript: 네임스페이스 패턴(Namespace Pattern) 바로 알기 프로그래밍 언어의 장점을 활용해서 사용하는 것만큼, 단점을 보완하는 것도 중요한 일입니다. 단점을 무시한 채 장점만을 활용한 코드는 효율성과 안정성을 보장하기 힘들기 때문입니다. 전역변수를 기초로 하는 JavaScript의 단점 때문에, 전역 네임스페이스(
JavaScript : 프로토타입(prototype) 이해 JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또
JavaScript : Scope 이해 JavaScript는 단순한 언어로 여겨져 왔습니다. 그래서 여러 개발자분들이 JavaScript를 배우기도 쉽고 간단히 쓸 수 있다는 편견을 가지고있습니다. 하지만, 최근 JavaScript의 관심이 늘어나면서 JavaScript는 더이상 '쉬운 언어'가 아닌 깊은 이해를 필요로 하는 언어라는 인식이 생기고있습니다. 저는 JavaScript에 대한 깊은 이해를 하기 위해서는
Node.js: 비동기 프로그래밍 이해 대부분의 기업형 애플리케이션은 중앙의 서버에서 동작합니다. 이러한 서버는 Web을 위한 HTTP 서버 또는 소켓 통신을 위한 네트워크 서버 등이 있습니다. 서버는 중앙집중형태로 클라이언트의 요청을 받으므로 병목현상이 발생하기 쉬우며 처리 성능에 항상 주목해야 합니다. 클라이언트의 요청이 많은 경우 서버는 병목 구간이 발생합니다. 이러한 병목구간을 분석해