[경험담]#태그 단어가 중간에 짤리지 않도록 해주세요. (jQuery width() 활용)

요구사항

고객 요구사항 :  아래 이미지에서 #태그의 글자가 잘리지 않도록 해주세요.

(#양극활물질이 '#양극'에서 잘리지 않고 '#양글활물질' 이 붙어서 보이도록 해달라는 의미)

 

주제와 연관된 #태그들을 DB에서 조회해서 보여주는 로직입니다. 

즉, #태그는 보통 4~6개로 가변적입니다. 글자 길이도 당연히 가변적이고요. 

 

고객으로부터 이런 요구사항을 받았을 경우 여러분은 어떻게 하시겠나요? 

A. 이런 걸 뭐하러 하려고 합니까? 그게 그렇게 중요합니까?

B. 이건 글자 길이도 가변적이고, DB에서 조회해서 가져와서 보여주는거라 구현이 안됩니다. 

C. 가능한지 확인해보고 연락드리겠습니다. (내려가서 구글링 등으로 확인)

D. (로직을 머리속으로 빠르게 그려본 후) 대략 0일 정도 걸릴거 같습니다. 확인해보고 연락드리겠습니다. 

 

업무PL을 하면서 담당고객과 회의를 하면 (당연하겠지만) D와 같이 대답하는걸 좋아합니다. 고객 요구사항을 들어보면 대충 얼마나 걸릴지, 로직은 어떻게 구현하면 될지 빠르게 머리에서 분석을 하고, 가능여부와 시일 등이 나와야 하는 거죠. 단순 개발만 하다가 고객과 미팅하고 분석설계하는 위치로 올라가니 저게 어렵더군요. ㅎㅎ

저렇게 되려면 중요한건 개발할 때 단순 게시판성 개발만 하는게 아니라 다양한 요구사항을 경험해보고 기록해놓는게 중요한거 같습니다. 요구사항과 조금이라도 연관성이 있는 기능을 개발해본적이 있어야 로직을 어떻게 할지, 얼마나 걸릴지 판단할 수 있으니까요.

 

결과물

아무튼, 결과물은 아래와 같습니다. #태그가 중간에 짤리는 경우는 없습니다. 개발하고 테스트하고 운영반영까지 이틀정도걸린거 같네요. (물론, 컴퓨터 앞에 앉아서 일한 시간이 이틀은 아닙니다. 커피도 마시고, 회의도 하고.. ㅋㅋㅋ)

 

기능이 가능하다고 판단했던 근거

1. 문장형태가 아니라 단어형태!

2. #이라는 구분자가 있다. (즉, DB에서 N개의 Row 데이터를 가져오는 형태)

 

로직

1. #태그를 감싸는 영역의 width(A)를 구한다. 
2. #태그를 하나씩 추가해보고, #태그들의 width 합이 A의 width를 넘는지 체크한다. 
3. #A를 넘으면 바로 전에 추가한 #태그를 제거하고 줄바꿈 태그를 추가 후 #태그를 추가한다.

여기서 몇가지 신경써야할 포인트!

위 로직을 DB에서 가져온 #태그들을 html로 만들 때 추가하는건 안됩니다(즉, JSP에서  Foreach 구문안에 위 로직을 넣으려고 하는건 말도 안되는거죠)

일단 JSP에 넘어온 #태그 목록을 foreach 구문을 이용해서 일단 html로 변환해서 보여준 다음에 자바스크립트로 핸들링 해야 합니다. 

 

자바스크립트 로직

$(document).ready(function(e){
		
	$(".thumbnail_item>a>p").each(function(e){
		var kywd = $(this).text();
		var kywdArr = kywd.split(" ");
		var tobeKywd = "";
		var newLineKywd = "";
		var lineMaxLength = 195;
		for (var i = 0; i < kywdArr.length; i++) {
			
			newLineKywd += kywdArr[i] + " ";
			
			$("#kywdWidthP").html(newLineKywd);
			if($("#kywdWidthP").width() > lineMaxLength){
				tobeKywd += "<br/>";
				newLineKywd = kywdArr[i];
			}
			
			tobeKywd += kywdArr[i] + " ";	
			
		}
		$(this).html(tobeKywd);
	}); 
});	


//로직을 처리할 hidden 태그(글자 크기 등을 원래 #태그가 들어가 영역과 동일하게 맞춰줘야 함)
<span style="font-size:12px;display:none;" id="kywdWidthP" ></span>	

간단하게 해결되었습니다. 

자바스크립트에 대해서 다양하게 활용해본 겸험이 없으면 힘들수도 있습니다. 

 

앞으로 프로젝트 하면서 경험했던 특별한 요구사항과 처리했던 경험을 포스팅하도록 하겠습니다.