본문 바로가기

web2.0

[jQuery강좌] 20. jQuery Performance by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 20th - jQuery Performance jQuery 성능에 대한 넋두리 이번 시간에는 jQuery 성능에 대해서 이야기를 하려고 합니다. jQuery는 정말로 많은 기능을 개발자가 사용하기 쉬운 형태로 제공하고 있습니다. 하지만 얻는 게 있다면 잃는 것도 있는 게 세상의 이치이듯 jQeury의 강력한 기능을 사용함으로써 개발에 드는 공수는 줄어 들지만 클라이언트의 부하는 증가하게 됩니다. 하지만 앞으로 설명드릴 내용을 이해 하신다면 어느 정도의 부하를 줄일 수 있습니다. 말은 거창하게 시작했지만 크게 어렵거나 한 부분은 없으니, 부담 없이 강좌를 봐 주시면 되겠습니다. 첫 번째 - 셀렉터의 구체화 다른 사람을 이해시키기 위해서 자세하게 설명 하듯이 jQ.. 더보기
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~ by 승연아빠님 “Add Element”를 통해 요소를 동적으로 추가하고 해당 요소를 클릭시에 이전과 동일하게 동작을 하나 “Event Die” 버튼을 클릭하시면 더 이상 경고 창이 뜨지 않는 것을 확인 할 수 있습니다. $(‘li’).die() 의 경우는 요소 “”과 연결된 모든 이벤트를 삭제를 하며, $(‘li’).die(‘click’);이라고 지정할 경우에는 “”요소와 연결된 ‘click’ 이벤트만을 삭제 합니다. 너무나 간단하게 이벤트를 추가하고, 삭제할 수 있다니 그것도 동적으로 생성되는 요소에 정말 완소 아이템 아니 메서드가 아닌가 싶습니다. 바로 이어서 마지막으로 설명드릴 메서드는 더욱더 뽠따스틱한 기능을 하는 .one() 입니다. 이름에서 뭔가 느껴지지 않으시나요 ? (jQuery를 사용하다 보면 정말 메.. 더보기
[jQuery강좌] 18. jQuery Event - bind() 메서드 by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 18th - jQuery Event - bind() 메서드를 통한 이벤트 연결 이번 시간에는 jQuery에서 지원하는 이벤트를 좀더 고급스럽게 사용하는 방법에 대해 알아 보도록 하겠습니다.(고급이라고 해 봤자, 표현식이 좀 뭔가 있어 보이는 거 정도일까요 ?) 이번 강좌에서는 고급스런 내용의 첫 번째 주자로 나선 bind() 메서드에 대하여 알~ 차게 이야기를 해 보도록 하겠습니다. .bind() .bind() 메서드는 말 그대로 개체와 이벤트를 묶어주는 역할을 합니다. 앞에서 진행한 event 관련 메서드의 경우 해당 메서드를 직접 호출하지만, bind()의 경우 파라미터의 값으로 이벤트 이름을 넣음 으로써 해당 이벤트를 체크하게 됩니다. $(“div”).c.. 더보기
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드 by 승연아빠님 웹 프런티어와 함께 하는 jQuery 기초강좌 17th - jQuery Events 이벤트 지원 메서드 살펴보기 jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다. jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다. 그 만큼 개발자가 많은 이벤트를 쉽게 이용할 수 있고 좀더 나은 UX를 만들 수 있다는 큰~ 장점이 있습니다. (일만 많아 지는 건가요?) 이번 시간에는 jQuery를 통해 이벤트를 어떻게 이용할 수 있는지에 대해 알아 보도록 하겠습니다. 이벤트 중에서 이번 시간을 통해 알아볼 내용은 사용자의 .. 더보기
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 by 승연아빠님 웹 프런티어와 함께 하는 jQuery 기초강좌 16th - jQuery FORM API 폼(form)을 위한 API 이번 시간에는 Form에 대한 이야기를 진행합니다. 웹 프로그램에서 Form은 매우 중요한 요소입니다. 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다. ASP.NET에서는 단일 폼의 형태로 구성이 되어 있었으며, 많은 부분이 Form에 대해 크게 신경을 쓰지 않아도 되는 부분이 있었습니다. 하지만 ASP.NET MVC가 나오면서 상황은 바뀌었습니다. ASP, PHP 처럼 Form을 직접적으로 컨트롤 하고, 다중 폼을 이용한 프로그래밍이 쉬워졌기 때문입니다. 물론 ASP.NET도 Form을 통한 데이터 전달이나 이벤트 발생을 하고 있지만 대부분 개발자가 크게 신경을 써야 .. 더보기
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여 by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 15th - jQuery Attribute(속성 관련 메서드 알아보기) HTML 문서의 속성 제어하기 이번 시간에는 jQuery를 이용하여, 개체 속성을 제어하는 방법에 대해 알아 보도록 하겠습니다. HTML 요소에서 이름을 제외한 나머지 요소는 모두 속성이 될 수 있습니다. 즉 더보기
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여 by 승연아빠님 웹 프런티어와 함깨하는 jQuery 기초강좌 14th - jQuery CSS(스타일 관련 메서드 알아보기) HTML 문서의 스타일 제어하기 jQuery에서는 역시나 굉장히 많은 API를 제공 하고 있습니다만, 여기서는 자주 사용되는 API를 중심으로 설명을 드리고, 필요에 따라서 부수적인 API에 대해 이야기 하도록 하겠습니다. 우선 스타일을 직접적으로 제어하는데 사용되는 API를 알아 보도록 하겠습니다. .css() 적용된 스타일을 가져오거나, 새로운 스타일을 적용합니다. $(“div”).css(“background-color”)의 경우 해당 선택된 개체의 배경 색상을 가져옵니다. 기본적인 표현 식은 스타일에서 사용되는 구문을 동일하게 사용하시면 됩니다. 새로운 스타일을 적용하고 싶을 경우에는 css(.. 더보기
[jQuery강좌] 13. jQuery Core by 승연아빠님 웹 프런티어와 함께 하는 jQuery 기초강좌 13th - jQuery Core jQuery Core ? 지금까지 jQuery의 셀렉터나 API를 통한 jQuery 사용법을 알아 보았습니다. jQuery의 기본은 selector라고 말씀을 드렸지만, 이번 강좌는 제목 부터가 “CORE” 입니다. 기본 중에 기본이라고 해야 할까요? 강좌를 시작하면서 언급했던 내용으로 jQuery의 약자로 “$”를 사용한다고 말씀 드렸습니다. jQuery 소스를 확인 해 보시면 jQuery 문자 대신에 “$”를 사용할 수 있도록 설정하는 부분을 어렵지 않게 찾을 수 있습니다. (소스코드 마지막에 위치합니다.) 첫 번째로 jQuery(=$)를 사용하여, jQuery object를 생성하는 방법에 대해 알아 보도록 하겠습니다... 더보기

티스토리툴바