계박사의 코딩교실

이번에 소개 하는 jQuery Plugin 은 DataTables 라는 Grid 종류의 라이브러리입니다.

보통 개발할 때 데이터 리스트 출력 시 반복문으로 <tr><td>데이터</td><tr> 방법으로 출력을 많이 하게됩니다.

특별히 Grid 를 사용하지 않는 경우 html Tag 안에서 처리하는 경우가 많습니다.

이러한 방법으로 개발을 한다고해서 잘못된 코딩방법도 아니고 잘못 짜여진 소스도 아닙니다.

단지 리스트 출력 외에 여러 부가적인 기능들을 직접 코딩하여 개발을 하려면 시간도 많이 걸리고 디버깅도 쉽지가 않습니다.

에를 들어 Multi Sorting 이나 Paging 처리 라던지 직접 구현하려면 그만큼 시간도 듭니다.

하지만 괜찮은 Plugin 하나를 잘 알고 쉽게 다룰줄 안다면 쉽게 구현이 가능합니다.

그래서 이번에 사용해본 DataTables 같은 경우 많은 기능도 있고 특히 예제와 설명이 잘되어있어 사용하기 편리합니다.

https://www.datatables.net/

아래는 프로젝트에서 직접 개발했던 코드입니다.

코드를 간략하게 설명하자면 HTML 코드 부분은 단순하게 데이터 리스트의 컬럼과 위치만 잡는 역활을 하며

실제 데이터 출력은 javascript 부분의 ajax 함수에서 Json으로 가져와 리스트를 출력하게 됩니다.

Column 별로 rendering을 직접 구현도 가능하며 데이터 값에 따라 버튼의 유무 표현을 쉽게 할 수 있습니다.

1.Javascript 코드

2. HTML 코드

이번에 eBay에서 정말 저렴하게 고글을 하나 구매하게 됬습니다.

저는 이미 루디 변색 고글이 있지만 가격이... 안 살수가 없었습니다. ㅋㅋㅋ

보통 UVEX 104 변색 고글을 구매하려면 국내에서 아마 25~28 만원정도 되는 것으로 알고 있습니다.

그리고 Amazon 또는 eBay 에서 싸게 산다고 해도 15만원정도이구요.

그런데 독일 eBay에서 진짜 92.99 유료에 올라온게 있더군요!!!

달러로 하면 약 100달러 정도. 한화로는 한 12만원??? 그냥 사버렸습니다. ㅋㅋㅋ 

제 생각에는 아마 재고정리지 않았을까 생각이 됩니다.

저는 이미 변색 고글 중에서 제일 좋다는 루디 변색 고글을 사용하고 있습니다.

그리고 고글은 루디밖에 없어서 비교 할 대상이 루디 밖에 없네요.

UVEX 104 고글을 처음에 딱 써봤을 때 느낌은 한가지입니다.

시야가 정말 넓다.

루디 고글을 약 1년정도 사용하면서 크게 불편한 느낌은 없었지만 이 고글을 쓰고 바로 느끼는 점은 정말 넓습니다.

아마도 루디 고글 보다 렌즈가 좀 더 크고 렌즈 자체가 하나로 되어있어 그런듯 싶습니다.

그리고 고글  안경테도 더 큰 줄 알았는데 그냥 루디랑 비슷하네요. 

루디와 같이 사진을 찍어봤습니다.

두개를 비교한 사진을 보면 가로 길이는 큰 차이가 없지만 세로가 확실히 UVEX 104 가 조금 더 깁니다.

그리고 렌즈가 일체형과 분리형은 썼을 때 시야에 큰 차이가 느껴집니다.

그리고 흰색이 이쁩니다.

전에 타전 캐논데일 캐드8의 경우 노란색이라 루디를 노란색으로 구매를 했는데 생각보다 내 얼굴에는 잘 안어울렸던 것 같습니다.

그리고 고글의 안경테가 루디에 비해 좀 더 두꺼워서 그런지 머리가 큰 저에게 고글이 작다는 느낌은 들지 않습니다. ㅋㅋㅋ

가장 중요한 변색이 남았는데...

이게 사실 제가 막눈이다 보니까 큰 차이를 잘 못느끼겠습니다. 

다만 좀 느껴지는건 변색 시 색이 짙어지는건 루디가 더 검게 변하는 것 같네요.

루디 변색이 최상급이라고는 하는데 제 눈에는 UVEX 104 가 좀 더 편하게 느껴집니다.

jQuery Plugin 중에 이름 그대로 validation 기능을 하는 plugin 입니다.

특히 사용자 등록, 수정 또는 검색 조건 입력 부분과 같이 사용자가 입력하는 부분에 validation 체크와 함께 메세지를 편리하게 사용 가능합니다.

장점은 역시 가독성이 좋고 정규화 되어있기 때문에 편리합니다.

특히 if else, for, switch 등등 소스가 정신없이 되어있지만 jQuery Validation Plugin 쓰면 깔끔해서 좋습니다.

사용법은 아래 링크에 들어가면 예제와 함께 금방 익힐 수 있습니다.

http://jqueryvalidation.org/