웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리를 사용해 플러그인(plugin)을 만들어 사용하는 것은 플러그인 방식이 아닌 것에 비교하여 다양한 장점들이 존재한다. 아래는 플러그인을 사용했을 경우 얻을 수 있는 장단점을 알아보고 플러그인을 만들때 유념할 사항들에 대하여 얘기해보고자 한다. 먼저 플러그인이 무엇인지 간단하게 알아보자.
ii. 추가적인 기능 구현 및 에러, 버그 수정등을 버전을 통해 관리가 가능함
iii. 인적, 물리적 시간의 리소스가 감소
iv. 어려운 기술적 리스크(invention risk) 감소
위와 같은 장점이 존재한다. 그렇다면 반대로 어떤 단점이 있을지 알아보면...
i. 단순한 기능 구현시 더 많은 시간과 노력이 필요
ii. 동일한 기능의 플러그인은 없거나 찾기 어려워 커스터마이징에 어려움
iii. 외부 플러그인의 경우 활용을 위한 명세나 메뉴얼등이 어려울 수 있음
플러그인의 형태로 사용되는 경우 단독으로 사용되는 것이 아니라 다양한 다른 함수, 메소드등과 함께 사용될 수 있다. 이 경우 사용자의 편의성 및 체인이 끊기는 경우를 막기 위하여 반드시 체인 연결이 가능한 코드가 필요하다. 이 경우 아래와 같이 자신을 반환하는 코드 한 줄이면 체인 사용이 가능하다.
제이쿼리 라이브러리는 가장 많이 사용되지만 그 외에도 수 많은 라이브러리가 존재하고 이때 사용되는 $ 기호는 다른 라이브러리와이 충돌이 발생할 수 있다. 이런 충돌을 막기 위해 클로저(Closure)를 사용할 수 있으며 예를 들어 아래의 코드처럼 즉시실행함수에 'jQuery'를 넘겨주고 인자로 전달하여 실행되는 플러그인 내부에 클로저를 사용해 $로 표기된 부분이 jQuery로 사용되게 바꾸는 방법이 많이 사용된다.
잘 만들어진 제이쿼리 플러그인이 사용하기 어렵다면? 잘 만들어졌음에도 불구하고 좋은 플러그인이라 부르기 어렵다. 플러그인의 상단에는 주석처리를 사용하여 플러그인의 기능, 적용 가능한 옵션명 파라미터(parameter), 현재버전, 간단한 예제 등의 정보가 기록되야한다. 아래의 예제는 간단하게 주석 처리에 정보를 담은 예제이다.
또한 그 외에도 간단한 튜토리얼 예제 및 use case를 만들어 제공하는 것도 생각해야 합니다. 요즘 많이 사용되는 유용한 플러그인들인 이러한 명세들이 매우 잘 정리되어 있다.
플러그인은 다양한 옵션이 존재하게 된다. 만약 선택 가능한 옵션이 많음에도 각각의 프로퍼티를 설정하도록 파라미터를 사용할 경우 플러그인이 가진 메소드나 옵션사항 이외의 프로퍼티와 혼동할 수 있는 여지가 더 많다. 이 경우 간단하게 option등의 객체를 만들어 선택 가능한 옵션 사항들을 함께 관리하는 것이 매우 편리하고 개발하는 이점에서도 알아보기 매우 쉽다.
버전을 사용하는 이유는 이전에 만들어진 플러그인과 구분하기 위해서이다. 매우 단순하지만 이런 버전 관리는 실제로 큰 도움이 될 수 있는데 가장 중요한 이유는 기능 추가와 버그 및 에러 등의 수정사항을 관리할 수 있다는 점이다.
또 다른 이유로 더 높은 버전이 반드시 사용되야하는 것, 반드시 더 선호되는 것은 아니다. 예를들어 이전 버전의 플러그인에 맞추어 웹사이트를 이미 구축한 경우 다시 플러그인을 사용해야할 때 신규 버전은 호환성이나 기타 여러가지 문제점이 발생할 수 있다. 이 경우 오히려 과거 사용하였던 버전이 필요한 경우라 하겠다.
# 네이밍에 주의할 것
만들어진 플러그인은 나 이외의 누군가가 함께 사용하게 된다. 협업을 하는 대상자 이거나 아니면 오픈소스로 공개되 나 이외의 수 많은 사람이 사용할 수 있을 것이다. 이때 누구나 이름만 봐도 기능을 어림잡아 예측할 수 있도록 네이밍에 신중을 기해야 한다.
또한 플러그인의 이름 자체도 중요하나 함께 사용되는 메소드, 프로퍼티 역시 이해하기 쉬운 네이밍이 필요할 것이다.
플러그인의 가장 큰 목적이 재사용성에 있드시 반복되어 사용하다 보면 얘기치 못한 문제, 버그 등이 발생한 소지가 크다. 이런 경우가 최대한 발생하지 않도록 지속적인 버전관리를 통한 업데이트와 그보다 많은 검증의 과정이 무엇보다 중요하다.
! 제이쿼리(jquery) 플러그인이란?
제이쿼리 플러그인이란 제이쿼리를 사용하여 동작하는 간단한 플러그인 형태의 함수를 의미한다. 플러그인은 원하는 요소 및 컴포넌트 단위에 사용할 수 있고 간단하게 소스에 import 하면 원하는 기능을 모두 사용할 수 있으므로 코드를 재사용할 수 있는 매우 편리한 방법이다하겠다.! 플러그인 사용의 장점
i. 웹사이트의 기능 구현시 매번 똑같은 함수를 사용할 필요가 없음ii. 추가적인 기능 구현 및 에러, 버그 수정등을 버전을 통해 관리가 가능함
iii. 인적, 물리적 시간의 리소스가 감소
iv. 어려운 기술적 리스크(invention risk) 감소
위와 같은 장점이 존재한다. 그렇다면 반대로 어떤 단점이 있을지 알아보면...
i. 단순한 기능 구현시 더 많은 시간과 노력이 필요
ii. 동일한 기능의 플러그인은 없거나 찾기 어려워 커스터마이징에 어려움
iii. 외부 플러그인의 경우 활용을 위한 명세나 메뉴얼등이 어려울 수 있음
! 플러그인 만들 경우 알아두면 좋은 팁 및 정보들
# 스코프 체인(scope chain)을 만들어 둘 것
플러그인의 형태로 사용되는 경우 단독으로 사용되는 것이 아니라 다양한 다른 함수, 메소드등과 함께 사용될 수 있다. 이 경우 사용자의 편의성 및 체인이 끊기는 경우를 막기 위하여 반드시 체인 연결이 가능한 코드가 필요하다. 이 경우 아래와 같이 자신을 반환하는 코드 한 줄이면 체인 사용이 가능하다.
return this;
# 클로저(Closure)를 사용해 다른 라이브러리와의 충돌이 없도록 할 것
제이쿼리 라이브러리는 가장 많이 사용되지만 그 외에도 수 많은 라이브러리가 존재하고 이때 사용되는 $ 기호는 다른 라이브러리와이 충돌이 발생할 수 있다. 이런 충돌을 막기 위해 클로저(Closure)를 사용할 수 있으며 예를 들어 아래의 코드처럼 즉시실행함수에 'jQuery'를 넘겨주고 인자로 전달하여 실행되는 플러그인 내부에 클로저를 사용해 $로 표기된 부분이 jQuery로 사용되게 바꾸는 방법이 많이 사용된다.
<script>
(function($) {
$.fn.test = function() {
// Code here
}
})(jQuery)
</script>
(function($) {
$.fn.test = function() {
// Code here
}
})(jQuery)
</script>
# 사용하기 편리한 문서화(documentation) 또는 예제(tutorial)를 만들 것
잘 만들어진 제이쿼리 플러그인이 사용하기 어렵다면? 잘 만들어졌음에도 불구하고 좋은 플러그인이라 부르기 어렵다. 플러그인의 상단에는 주석처리를 사용하여 플러그인의 기능, 적용 가능한 옵션명 파라미터(parameter), 현재버전, 간단한 예제 등의 정보가 기록되야한다. 아래의 예제는 간단하게 주석 처리에 정보를 담은 예제이다.
<script>
(function($) {
$.fn.test {
/*
* Test Plug-in (v1.0)
- 여기에는 플러그인에 대한 설명 Ex) 선택 요소의 이동, 드래그 앤 드랍이 가능하도록 바꿈
- 여기는 간단한 플러그인 사용방법을 예시 Ex) element.test('move')
- 이 곳에는 설정가능한 옵션에 대하여 간략하게 표시 Ex) name, value parameter
*/
}
})(jQuery)
</script>
(function($) {
$.fn.test {
/*
* Test Plug-in (v1.0)
- 여기에는 플러그인에 대한 설명 Ex) 선택 요소의 이동, 드래그 앤 드랍이 가능하도록 바꿈
- 여기는 간단한 플러그인 사용방법을 예시 Ex) element.test('move')
- 이 곳에는 설정가능한 옵션에 대하여 간략하게 표시 Ex) name, value parameter
*/
}
})(jQuery)
</script>
또한 그 외에도 간단한 튜토리얼 예제 및 use case를 만들어 제공하는 것도 생각해야 합니다. 요즘 많이 사용되는 유용한 플러그인들인 이러한 명세들이 매우 잘 정리되어 있다.
# 선택옵션을 객체를 사용하여 받을 수 있도록 할 것
플러그인은 다양한 옵션이 존재하게 된다. 만약 선택 가능한 옵션이 많음에도 각각의 프로퍼티를 설정하도록 파라미터를 사용할 경우 플러그인이 가진 메소드나 옵션사항 이외의 프로퍼티와 혼동할 수 있는 여지가 더 많다. 이 경우 간단하게 option등의 객체를 만들어 선택 가능한 옵션 사항들을 함께 관리하는 것이 매우 편리하고 개발하는 이점에서도 알아보기 매우 쉽다.
# 버전을 표기하여 관리할 것
버전을 사용하는 이유는 이전에 만들어진 플러그인과 구분하기 위해서이다. 매우 단순하지만 이런 버전 관리는 실제로 큰 도움이 될 수 있는데 가장 중요한 이유는 기능 추가와 버그 및 에러 등의 수정사항을 관리할 수 있다는 점이다.
또 다른 이유로 더 높은 버전이 반드시 사용되야하는 것, 반드시 더 선호되는 것은 아니다. 예를들어 이전 버전의 플러그인에 맞추어 웹사이트를 이미 구축한 경우 다시 플러그인을 사용해야할 때 신규 버전은 호환성이나 기타 여러가지 문제점이 발생할 수 있다. 이 경우 오히려 과거 사용하였던 버전이 필요한 경우라 하겠다.
# 네이밍에 주의할 것
만들어진 플러그인은 나 이외의 누군가가 함께 사용하게 된다. 협업을 하는 대상자 이거나 아니면 오픈소스로 공개되 나 이외의 수 많은 사람이 사용할 수 있을 것이다. 이때 누구나 이름만 봐도 기능을 어림잡아 예측할 수 있도록 네이밍에 신중을 기해야 한다.또한 플러그인의 이름 자체도 중요하나 함께 사용되는 메소드, 프로퍼티 역시 이해하기 쉬운 네이밍이 필요할 것이다.
# 많은 테스트를 거쳐 완성도를 높일 것
플러그인의 가장 큰 목적이 재사용성에 있드시 반복되어 사용하다 보면 얘기치 못한 문제, 버그 등이 발생한 소지가 크다. 이런 경우가 최대한 발생하지 않도록 지속적인 버전관리를 통한 업데이트와 그보다 많은 검증의 과정이 무엇보다 중요하다.
아래의 글도 찾고 계시지 않나요?
