이번에 동기가 드래그 앤 드롭 기능을 구현하는 것을 보았는데, 생각해보니 나도 드래그 앤 드롭으로 뭘 만들어 본 적이 없어서 이번에 그냥 재미삼아 만들어 보려고 한다. 실제 이것저것 만드는 기능은 바닐라js로 만들 생각이지만, 제이쿼리에 sortable 함수도 있길래 그냥 간단히 정리만 해보려고 한다. 아래와 같은 목차로 진행되니 보도록 하자. 기본문법 예제 그외 sortable의 편리한 속성들 제이쿼리의 sortable 함수를 활용한 드래그 앤 드롭 구현 당연하지만 제이쿼리의 함수를 사용하는 것이기 때문에, 제이쿼리 라이브러리를 추가해줘야 한다. cdn을 남겨놓을테니 필요한 사람은 가져다 쓰도록 하자. 제이쿼리 cdn코드 기본문법 $([열에 해당하는 컬럼]).sortable({ items : $([행에..

옛날 신입이 시절에 정리해야지 라고 생각하고 임시저장 해놨던 걸 이제서야 정리해본다. 그때 구현했던 게, 클릭한 텍스트에 fontWeight를 두껍게 주는 기능이었는데.. 해당 코드는 현재 VueJs의 클래스바인딩으로 변경되었으니, 올려도 되겠지 싶어 그냥 올린다. 1년이 넘어 기억은 안나지만, 대충 아래와 같은 기능을 구현하려고 짠 코드 같음.. 1. 제이쿼리 선택자를 활용한 CSS 변경 2. Event.target을 활용한 Style 변경 그래서 오늘은 2가지에 대해 알아보자. 그럼 바로 시작해보자. testFile.html 클릭해보세요 이 html을 가지고 연습해보자. 1. 제이쿼리 선택자를 활용한 CSS 변경 기본문법 $([클래스명 or 아이디명]).css([propertyName], [value..

DOM이 랜더링 되면 바로 해야 할 작업 ( 변수 생성, 함수 호출 ... )이 있을 때 자주 사용하는 녀석인데 제이쿼리 : Ready 순수자바스크립트 : DOMContentLoaded 둘의 차이점은 아래와 같다. 1. Ready가 DOMContentLoaded보다 먼저 실행된다. 2. Ready는 여러번 실행되지만, DOMContentLoaded는 단 한번만 실행된다. 필요한 녀석을 골라쓰자. 아래 샘플 코드를 적어놓음 ( 근데 Ready는 사용을 피하는 게 좋다고 한다.. ) JQuery버전 $(document).ready(function(){ // 실행할 기능을 정의해주세요. }); 순수 javascript 버전 document.addEventListener("DOMContentLoaded", fu..

내가 진행했던 프로젝트에서는 제이쿼리에서 지원하는 플러그인인 jqGrid를 사용했다. 물론 지금도 그때 뭐 데이터가 null인 녀석이 있다면 그리드 자체에서도 'null' 이라는 문자열이 떴고, 고객쪽에서 이거 보기 안좋다. null인 녀석들은 그냥 아무것도 표기 되지 않게 해달라 라는 요청이 있었다. jqGrid에서는 목록으로 만들 데이터를 model에 넣어서 목록으로 뿌리는데, 그 안에서 for문처럼 데이터의 갯수, 행 만큼 돌고 돌아 그리드를 만드는 형식이다. jqGrid에 대한 자세한 설명은 다음에 설명하기로 하고, 오늘은 formatter 옵션에 대해서만 좀 알아보자. 대충 로직은 다음과 같다. ( 혹시 이해 안되면, 다음에 jqGrid에 대한 글을 써서 링크를 달아놓을테니 참고 바람.. ) m..

이번에 작업을 하면서 객체를 활용하여 객체에 값이 있으면 작업을 진행하고, 값이 없으면 넘어가는 조건문을 만들었다. 그런데 객체가 비었는지 알 수 있는 방법을 몰라 이것 저것 찾다가 이렇게 정리한다. - $.isEmptyObject(object) - jQuery.isEmptyObject(object) 제이쿼리에서 제공하는 함수로 objcet가 빈값이면 true를, 값이 들어있으면 false를 반환해준다. 위와 같이 a와 b라는 객체를 생성하여 $.isEmptyObject()에 넣으니 true, false를 반환해주었다. 이렇게 간단하게 객체가 빈값인지 빈값이 아닌 지 확인 할 수 있다~~

오늘은 AJAX를 통해서 동적인 서버통신을 한번 해보겠다~~ AJAX란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 라고 구글에는 적혀 있다. AJAX를 이용하면 좋은 점은 다음과 같다. 우선 보통의 폼방식과 같이 서버통신을 하게되면 전체페이지가 새로고침된다. 하지만 AJAX는 웹페이지의 일부분만 갱신이 가능하기 때문에 쓸모 없는 것 까지 갱신을 할 필요가 없어 속도가 빠르다. 설명은 길게 써도 이해가 안되니 바로 어떻게 쓰는지 보자. 본문에서는 어떻게 통신을 하는지만 다루도록 하겠다 여기서는 크게 3가지 방법으로 AJAX를 사용해보도록 하겠다. ====================..