daily

오늘만 사는 코드by Seㅈoong

영화 아저씨 원빈의 대사중 이런말이 있다. “니들은 내일만 보고 살지? 내일만 보고 사는 놈은 오늘만 사는 놈한테 죽는다. 난 오늘만 산다.” 이말을 하고 내일 까지 사는 놈들을 다 때려 버린다.
극중 원빈의 말을 듣고 요즘 내 모습이 떠올랐다. 물론 내가 오늘만 살고 죽는다는 뜻은 아니다.
NHN entertainment 신입사원 교육과정에서 내 코드와 지식은 오늘만 사는 녀석들이었다.

TF단위로 클라우드 노트라는 주어진 주제에 맡게 기획을 하고 제작하는게 교육에 큰 틀이다.

금요일 부터 시작된 짧은 1주차를 시작으로 프로젝트가 시작되었다.

2주차간 개발한 프로젝트 데모 발표를했다.
2주차 기간동안에는 구글독스나 트렐로 같은 굉장한 서비스를 만드는것을 상상도 했지만 딱, 신입사원 3명이 일주일 동만 만들었을 정도의 프로젝트가 나왔다.

3주차에는 TF끼리 서로의 프로젝트를 클론해서 이슈를 찾아 수정하게 하며 추가 스펙을 구현하는 과제가 주어졌다.
게다가 우리 TF는 좀더 욕심을 내 대대적인 프로젝트 변경작업도 병행하였다.
이때가 매주 한번씩 프로젝트를 거의 엎게 되는 첫 출발 이었다.
다른 TF가 등록한 Issue를 해결하기 위해 코드를 고치고 새롭게 프로젝트를 바꾸기 위해 더많은 코드를 고쳤다.

4주차도 쉽지 않은 한주였다.
프로젝트의 테스트 커버리지, 중복 코드, klocwork를 관리하는게 한주의 가장큰 미션이었다.
junit Test에 대해 찾아 공부하며 테스트 케이스를 만들고 젠킨스에서 중복/klocwork를 보고 불필요한 코드, 문제 가능성이 있는 코드를 찾아 또한번 수정했다.
이번주에도 역시나 미션 수행과 동시에 프로젝트를 크게 뜯어 고쳤다.
다른 TF들과는 다르게 우리 TF는 스프링 프레임워크를 적용하지 않아 스프링 프레임워크를 적용하기 위해서 어쩔수 없는 선택이었다

5주차 과제는 나에게 있어서 좀더 새로웠다.
2개 이상의 웹서버에서 session을 관리하는 방법을 토론하고 거기에 파일서버까지 적용하는 미션이었다.
4주차 때부터 새로운걸 많이 느꼈지만 5주차에서는 프로젝트 개발에 있어서 학부시절에는 미쳐 고려하지 못한 부분을 고민하고 구현한다는게 새로웠다.
5주차도 역시나 빠질수 없는 프로젝트 갈아 엎기. 그간 여러번 프로젝트를 변경하면서 신경쓰지 못했던 많은 부분들을 코드리뷰를 통해 알게 되었고 DB변경사항까지 겹치면서
또한번 프로젝트를 갈아 엎었다.

사실상 거의 4주간의 기간동안 첫 개발 1주를 제외하고 매주 프로젝트를 새로 만들다 싶히 하면서 힘들기도 했지만 그만큼 많이 배우고 이렇게 하면 왜 안되는지 몸과 머리로익힌 교육기간이었다.
남은 교육기간도 몸사리지 않고 몸과 머리로 시행착오를 즐기며 배워나가겠다.

아래는 프로젝트중 가장 고민한 메모 부분의 javascript 수정과정이다.

Javascript Drag n Drop

프로젝트 기능중 드로그 앤 드랍을 사용해야하는 상황이 있어서 아래와 같이 작성하였다.

ver_1

function dragOverFrame(event){
	event.preventDefault()
}

function dragFrame(event){
	event.dataTransfer.setData("targetId", event.target.id);
}


function dropFrame(event){
	var $movedFrame = $("#" + event.dataTransfer.getData("targetId"));
	$movedFrame.css("top", event.clientY);
	$movedFrame.css("left", event.pageX);
}

드래그한 엘리먼트의 아이디를 드랍 할때 이용하기 위한 코드이다. 크롬에서 정상작동을 하는것을 확인하고 다음 작업을 진행했지만 얼마안가 IE에서는 event.target.id를 인식하지 못한다는 사실을 알게되었다.

ver_2

$( ".draggable" ).draggable({stack : ".draggable"});

$( ".droppable" ).droppable({
      drop: function( event, ui ) {
      	moveMemo(ui.draggable);
      }
});

고민 끝에 jqueryui를 사용했다. 기존 함수에 비해 더 간결하고 다양한 추가기능을 쉽게 구현할 수 있었다. (기존 함수에서 IE 여부를 확인하고 IE에 맞는 로직을 구현할 수도 있다.) 이제는 더이상 고칠 코드가 없다고 생각했지만 jqueryui의 draggable이벤트 때문에 내가 이전에 구현한 click 이벤트가 작동하지 않는 또다른 문제가 발생했다.

ver_3

$( ".draggable" )
.draggable({
	stack : ".draggable"
})
.click(function() {
	$(this).draggable({ disabled: true });
})
.dblclick(function() {
	$(this).draggable({ disabled: false });
	$(this).find(".title").focus();
});

jqueryui document와 구글링을 통해 이벤트에 따라 drag기능을 on/off하게 만들었다. dblclick을 하면 드래그를 비활성화 시켜 click이벤트가 정상 작동했다.
이번에는 사용성에 문제가 생겼다. 드래그이벤트 활성화 순간이 문제였다.
드래그 비활성화 상태에서 드래그를 하려고 할때 첫 드래그는 실제 드래그를 수행하지 못하고 드래그 활성화에만 영향을 미치기 때문에 한번의 드래그를 하기위해 2번 드래그를 시도해야 했다.

ver_4

$("#talkItBoard").on("click", ".title, .content", function(evt){
	evt.stopPropagation();
	$(this).focus();
});

$(".draggable").draggable({stack : ".draggable"});

disalbled조건에 mousemove, blur, focusout등 다양한 조건을 줘봤지만 적당한 해결책이 없었지만 활성화/비활성화 기능을 빼고 이벤트 조건 타겟을 바꿔줘 우회적으로 문제를 해결했다..

교육기간 뿐만 아니라 하나의 코드에서도 시행착오를 거치며 코드를 개선해 나갔다.
내 희망과는 다르게 ver_4가 끝이 아닐수도 있을거 같다.

Published 08 February 2015