callback 함수, 함수중복실행 방지, custom data attribute

자바스크립트에 있어서 callback함수는 Ajax로 구현된 어떠한 내용이 처리된 뒤에 다음 행동을 지정하는데 대표적으로 사용된다. 그 외에는 대표적인 메소드 setTimeout(); 정도가 있고 그 외에도 jQuery를 사용하며 animate(); 메소드를 호출한 다음에 어떠한 내용을 실행할 지에 대한 부분을 작성하는데 사용하게 된다. animate(); 메소드에 대한 callback 함수 사용법은 이전에 잠시 쓰던 블로그에 적어놓았다.

이번 프로젝트의 경우 대부분의 페이지 연결이 한 동작이 끝나고 연결동작이 나오는 식의 모션이 대부분이었다. 예를 들어 스크롤이 끝난 후 둘째 페이지의 액션이 나오고 또 다른 마우스 휠이나 클릭 액션이 들어간 다음 특정 함수가 실행되고 나면 또 따라서 나와야 하고 해당 페이지나 캐릭터 소개부분을 지나치면 다시 초기화하는 내용도 있고 정말 굴비 엮듯이 차곡차곡 엮여있는 그런 내용이다.

 callback 함수는 한 작업의 사이클이 끝났을 때 계속적으로 굴비 엮듯이 함수를 지속적으로 호출할 수 있다. 이런 callback함수의 특징을 이해하고 나니 굉장히 편한 것 같지만서도 이번에 작업한 프로젝트처럼 애니메이션이 많은 경우에 이걸 지속적으로 연결하게 되면 하드웨어 가속을 사용할 수 없는 웹브라우저는 컴퓨터의 자원을 많이 사용하게 되는 문제점을 발견하게 되었다. 어느정도냐면 cpu사용률이 80%씩 올라가는 문제가 생겼는데 그 이유는 callback함수를 호출하는데 하나의 함수 호출이 끝나지 않았음에도 계속적으로 마우스 휠 스크롤의 입력을 받아서 화면에는 당장 나타나지 않지만 내부에서는 계속 함수를 호출하는 문제가 발생된 것이다.

그리고 더불어 마우스오버액션이 들어가면서 실행되는 함수도 있는데 마우스를 문지르듯이 마우스오버와 아웃을 반복시키니 역시나 같은 문제가 발생되었다. 이에 함수중복실행 방지라는 것도 도입해야했다.

이름은 거창한데 별 거 없고 특정변수이름을 만들고 (예를 들어 isWheelAction 등) 값엔 기본적으로 false를 할당한다. 다음과 같이 된다. 

isBodyWheelEvent : false

위에 코드는 모듈패턴을 사용하여서 return으로 넘기는 방식이라 전통적인 var isBodyWheelEvent = false; 같은 방식은 아니다. 이렇게 전역변수를 하나 선언한 다음, 휠 액션이 생길 때마다 저 값을 true로 전환하고 휠 스크롤에 대응하는 액션이 끝난 후 callback  위치에 다시 false를 할당하는 간단한 논리이다. 그러면서 휠 액션이 들어오면 일단 if문을 추가하여 저 값이 true인지 false인지부터 판별하는 내용이 전반적으로 추가되어야 한다. 가장 단순하지만 가장 확실한 방법이라 나름 요긴하게 아주 잘 사용하였다.

이렇게 함수중복실행 방지처리를 하고 나니 아무리 스크롤을 돌려도 함수는 한번만 호출되고 액션이 끝날 때까지 일체의 함수 호출이 없다. 덕분에 cpu사용률도 평상시처럼 내려오는 효과를 가져오게 되었다.

이 부분이 이번 프로젝트를 걸치며 얻은 내용중에 가장 값진 내용이 아닐까 싶다.

마지막으로 다루고자 하는 부분은 custom data attribute이다. html 5에 새로이 추가된 명세이고 생각보다 굉장히 유용하다. 뭐랄까 지금까지 태그 명세에는 없는 나만의 속성과 값을 정의하여 만들 수 있고 단지 data-index="0" 같이 "data-"라는 접두어를 사용하면 된다. 이걸 사용하게 된 이슈는 이미지 갤러리에서 있던 일인데 총 10개의 이미지 중에 공개가 된 이미지만 골라서 크게보기에서 좌우로 넘어가야 한다. 그럴 경우 총 10개의 이미지 리스트 중에 공개된 이미지만 골라야 하고 그걸 순서대로 만들어야 하는데 공개된 이미지만 고르는 것은 문제가 되지 않았는데 공개된 이미지만 골라서 순서를 매기는 것이 어려웠다. 좀 더 머리를 굴려보면 됐을 거 같았는데 내 머리의 한계와 다가오는 마감의 압박으로 인해 말로만 들었던 custom data attribute를 사용했다. 뭐 물론 이 티져사이트는 운영을 100% 하드코딩으로 할 것이라 문제되는 부분이 없는데 개발에 붙이는 부분이라면 개발자와 필히 상의해야하는 부분이다. 왜냐면 IE 9 이하의 브라우저에서는 모르는 속성이라 에러를 내뿜기때문이다. 물론 jQuery의 힘으로 작동은 한다 : ) 뭐 그냥 간단하게 아래와 같이 구현했다.

var viewPrevSrc = function(){
	var dataCount = parseInt($("#shotLayer").attr("data-count"));
	dataCount--;
	if(dataCount<1){
		alert("첫 번째 스크린샷 입니다.");
		return false;
	} else {
		var imgCount = $("#imageWrap li[data-index="+dataCount+"]");
		$(".shotWrapper img").attr({
			"src":$(imgCount).find("a").attr("href"),
			"alt":$(imgCount).find("span img").attr("alt")
		});
		$("#shotLayer").attr("data-count",dataCount);
	}
};

이건 왼쪽 화살표 버튼 누를 때이고 오른쪽은 저기서 살짝 손보면 되더라. 추가로 스크린 샷이 오픈되면 기존에 설정된 data-index 값들을 조절해야하는 수고스러움이 있지만 지금과 같은 성격의 사이트에선 딱 맞는게 아닐까 싶다.