[Java/Javascript]캐리지리턴과 브라우져 비호환성

이번에 회사 업무를 하면서 간단하다고 생각했던 일에 큰 코를 다쳤던 일이 있었습니다.

바로 “캐리지리턴“과 “브라우져 비호환성” 문제였습니다.

================================================================

먼저, “캐리지리턴“은 mysql DB에 저장되어 있던 한글 varchar 데이터를 가져와서

컨트롤러의 ModelMap에 변수에 담아 자바스크립트단의 변수로 쓸 생각이었습니다.

그런데 문제는, 이 변수가 자꾸 define하는 과정에서 “Unexpected token ILLEGAL

에러를 뱉어냈습니다.

debugging을 해봐도 정상적인 데이타가 나와 한참을 삽질하던 도중…

데이타에 “캐리지 리턴“이 포함되어 있는 것을 어렵사리 확인하였습니다 ㅠㅠ

그래서 아래와 같이 서버단에서 “캐리지 리턴“을 replace 처리해서 삽질을 끝냈습니다.

  String data = data.replaceAll("\r","");

================================================================

두번째로, 서버단에서 받아온 ModelMap변수를 자바스크립트단에서 구분자로 나눠

textarea에 각 배열요소를 넣고 끝에 “엔터키”를 삽입하도록 했습니다.

<html>
<head>
<script language="javascript">
var a = [서버단 ModelMap 변수];
var arrList = a.split("|");

for(var i=0; i<arrList.length; i++) {
    if(navigator.appName == "Microsoft Internet Explorer") {  //IE
        $("#box").append(arrList[i]+"\r");
    }else{  //Crome, Mozilla, Etc..
        $("#box").append(arrList[i]+"\n");
    }
}
</script>
</head>
<body>
    <textarea id="box" name="issueHashTag" rows=20 cols=30></textarea>
</body>
</html>

위 소스에서 보이는 바와 같이, 브라우져 별로 “엔터키”를 삽입할 때도 “IE”는

캐리지리턴(“\r”)을 사용하고 그 외의 브라우져는 라인피드(“\n”)를 사용합니다.

만약, IE에서 라인피드(“\n”)를 사용했다면 현재 위치에서 아래로 한줄 내리는 기능은

동작하지만 커서위치가 한칸 띄어지는 현상을 발견할 수 있습니다.

그러므로 캐리지리턴(“\r”)을 사용해야 다음줄의 첫 위치로 커서를 옮길 수 있습니다.

================================================================

마지막으로,  위 소스에서 Textarea에 값을 넣어놓고 해당 값을 삭제하는 순간 크롬에서

아래와 같은 경고메세지가 나오더군요.

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

‘이건 또 모야…’ 하고 구글링을 해보니 jquery를 1.7로 업데이트 했더니 해당 문제를

고칠 수 있었다고 나와있어 그것도 시도해 보았지만 Textarea에 액션이 들어가는 순간,

저 메세지는 변함없이 발생하였습니다.

그리고 Textarea에 기존에 세팅되어 있던 값을 건드리지 않고 새로운 값을 넣었을 때

즉, 데이타를 append 할때는 들어갔지만 역시나  Textarea에 액션을 가하면 여지없이

위의 경고메세지가 출력되며 정상작동하지 않는 문제가 있었습니다.

파폭도 동일하게 정상작동하지 않는 문제가 발생했습니다

여기서 중요한건!!!!

“IE에선 이상없이 잘 동작한다는 것입니다! 오잉~~~ ㅋㅋ” 

================================================================

클라이언트 개발이 어렵다는 사실을 새삼 실감하고 공부가 많이 필요하겠구나 느낀

요 며칠이었습니다.

참고로, jquery 버전은 1.6.1과 1.7.1을 번갈아 사용했습니다.

혹시나 해결책을 알고 계신 분은 댓글 꼭 부탁드릴께요^^

*참고 url

Advertisements

[javascript]object 코딩 실습

제가 대학다닐 때, 그러니까 1999년부터 2006년 사이에는

자바스크립트“하면 저는 그저 인터넷에 돌아다니는 몇몇 스크립트 긁어다가 붙여 쓰는게

다였습니다. 그 만큼 개념이 없었죠. ㅡㅡ;

하지만 지금은 그 중요성이 날로 증대되고 있는 상황이니 참 짧은 시간이지만

격세지감을 느낍니다.

저도 요즘 “ppk 자바스크립트“를 출근길에 보면서, “내가 자바스크립트 공부도 하는구나~!”

라는 사실이 가끔씩 새롭게 느껴질 때가 있습니다.

================================================================

각설하고, 잠깐 책에 나온 “자바스크립트 코어“부분에 나온 “객체“에 소개된 부분을

토대로 예제코드를 만들어 보았습니다.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" language="javascript">// <![CDATA[
var test = {
	a : 2,
	b : '2',
	c : function() {
	    return this.a*this.b;
	}
};

$(document).ready(function() {
    /*
    for(var i in test) {
        alert(test[i]);
    }
    */

    //document.write(test['c']());
    document.write(test.c());
});
// ]]></script>

결과는 예상하신대로, “4”가 브라우져에 출력되게 됩니다.

test 객체의 b 프로퍼티의 값은 c메서드에서 숫자로 자동인식하여 2*2=4의 결과를

만들어내게 됩니다.

위 예제에서 for문의 주석을 풀고 결과를 확인하시면 test 객체의 각 프로퍼티와 메서드가

출력됩니다.  c메서드는 본문 전체가 나오게 됩니다.

그리고 마지막에 test객체의 c메서드를 호출할때, “연관배열“을 사용할 수도 있습니다.

연관배열“의 정의를 책에서 빌려오면

  • 어떤 값의 이름 문자열을 사용해 그 값을 찾을 수 있게 해주는 배열

이라고 소개되어 있습니다. a프로퍼티는 test[‘a’] 저런식으로 가져오면 되겠죠.

자바스크립트에도 자바와 동일하게 try-catch-finally가 있어 헷갈리던 시절…

이제 자바스크립트도 자바처럼 “객체지향적“으로 “멋지게” 코딩할 수 있는 날이

어서 왔으면 좋겠네요. 많은 단련을 해야겠습니다. ^^

[Search]업무나 기타 공부에 참고했던 블로그글 리스트

오늘 업무를 하다 문득,

업무나 공부를 하며 무의식적으로 구글링을 통해 유용하게 사용했던 글들을 놓쳐버려

다음에 동일한 것을 또 찾고 있는게 아닌가라는 생각이 들었습니다.

그래서, 간단하게나마 리스팅을 하는게 나을 것 같아 오늘부터 리스팅을 시작합니다.

데이타가 많이 쌓이면 앞으로 이 포스트에서 검색할 수 있는 날이 올 수도 있겠네요 ^___^

================================================================

[Android]”스타크래프트 프로리그” 업데이트/게시 완료!

          

기존에 “신한은행 프로리그 10-11“앱 업데이트를 드뎌 오늘 끝냈습니다.

저번 포스팅에서 업데이트의 주요관점으로 다뤘던 내용은

  • 프로리그/팀/개인리그 결과 잘못나오는 버그패치(O)
  • 버전업데이트 액티비티 추가(X)
  • admob 달기(X)
  • minor 버그패치/성능개선(O)

인데, 실수로 “신한은행 프로리그 10-11“의 키스토어 파일을 잃어버려서(ㅠ.ㅠ)

할 수 없이 업데이트를 하고 리패키징을 하고 앱 이름을 수정해서 신규버전으로

다시 안드로이드 마켓에 올렸습니다.

  • 스타크래프트 프로리그 안드로이드 마켓URL : http://bit.ly/x8t5ZX

================================================================

이번 업데이트 버전의 주요사항은 아래와 같습니다.

  • 전체적으로 프로리그 경기결과,랭킹보기등의 처리속도 개선
  • 개인랭킹을 상위 100위까지 볼 수 있도록 함
  • 프로리그에서 현재 검색된 날짜를 노란색으로 표시함
  • 기존에 있던 마이너버그 수정

기술적인 부분에서 달라진 점을 말씀드리면,

  • 기존 html 파서를 Jericho에서 Jsoup으로 변경(DOM, CSS, jquery에 최적이라고 함)
  • json 라이브러리를 안드로이드 내장라이브러리에서 gson으로 변경(코드량 확 줄임!)
  • 파일/이벤트 관련 부분을 독립적인 클래스로 분리(관심대상을 별도의 클래스로 분리함)

저 정도 입니다. 특히나 gson을 사용할 때는 기존 안드로이드 내장 라이브러리를 사용할때

보다 훨씬 코드량이 줄어드는 것을 체감했습니다. 기존에 노가다로 했던 작업들을

라이브러리에서 모두 가져갔기 때문이죠.

결국, 코드도 기존보다 훨씬 깨끗해졌습니다. 물론 유저들은 못 느끼겠지만요^^

그리고, 또 하나!

파일관련 작업과 버튼을 클릭했을 시 이벤트처리 같은 부분도 본래 경기결과나 랭킹을

보여주는 액티비티 안에 중복으로 코드가 있었는데, 이러한 부분들은 엄밀히 말하자면

주요 액티비티와는 다른 관심대상이었고, 당연히 분리되어야 했으며, 또 하나의 큰

문제는 같은 코드가 여러 액티비티에서 중복되어 작성되었다는 점이었습니다.

이러한 부분들도 과감하게 리팩토링하여 독립적인 클래스로 분리하였습니다.

물론 액티비티에 내용을 표시하는 것 외에, html 파싱하는 부분도 리팩토링하여

독립적인 클래스로 분리할 수 있으나 이 부분은 다음 업데이트때 진행하기로 했습니다.

        

================================================================

솔직히, 이번에 업데이트 하면서

  • 알람기능 추가
  • 앱아이콘 및 UI 개선
  • admob/cauly 광고 달기
  • 사용자게시판 추가
  • 전체 OOP관점에서 설계하고, 모델링, 소스 리펙토링, 단위 테스트 작성

등의 욕심이 있었고, 실제로 리팩토링단위테스트 작성 부분에 있어서는 어느정도

성과가 있었다고 생각합니다.

그리고 남아있는 기능추가와 UI 개선은 앞으로도 계속적으로 도전해야 될 부분이

될 것 같습니다.

많이 부족하지만 지속적으로 업데이트할 계획입니다.

SNS를 하시면 폐북에 링크공유와 트위터의 무한 RT로 홍보도 많이 부탁드립니다.

스타크래프트 프로리그“앱의 업데이트와 기술적인 내용도 계속 포스팅하겠습니다^^

    

================================================================

*참고 url

[javascript]암묵적 전역변수 실습 – 안티패턴

오늘 출근하면서 “ppk 자바스크립트” 5장 코어를 보는 와중에 “var“를 선언하지 않은

변수는 함수 밖이든 안이든 모두 전역변수가 된다는 글을 보았습니다.

제 상식에는 함수 안에서 쓰면 무조건 지역변수가 되야 할 것 같은데 자바스크립트는

명시적으로 변수 앞에 “var“를 붙여주지 않으면 암묵적 전역변수가 된다고 합니다.

그래서, 아래 테스트코드를 만들어 보았습니다

<html>
<head>
<script src="../jquery.1.6.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    globalVariableTest();
    print(x);
});
var print = function(val) {
    document.write("global variable x value : " + val);
}

function globalVariableTest() {
    var y = 4;  //함수내 지역변수
    x = y*2;    //암묵적 전역변수
}

</script>
</head>
<body>
</body>
</html>

결과는 변수 x를 선언하지 않았다는 오류가 나올것 같지만 의외로 아래와 같은 결과가

나옵니다.

globalVariableTest() 함수가 실행되면,  x는 암묵적으로 “전역변수“가 되어  document

body에 x의 값이 찍히는 것입니다.

하지만 이것은 “안티패턴“이라고 하네요.  되도록

  • 전역변수를 최소화하라
  • 변수를 선언할때는 명시적으로 “var“를 쓰고, 단일 var패턴을 사용하라.

저렇게 “자바스크립트 코딩기법과 핵심패턴“에 나와있다고 하네요. 저도 나중에 꼭

읽어볼 책입니다.

단일 var패턴“에 대해 궁금하시면 링크를 참고하세요.

여튼,  결론은

  • 변수는 꼭 “var“를 써서 명시적으로 선언하고,  “단일 var“패턴을 사용하라!

[Java]정규식 사용하여 트위터 해시태그 추출기능 만들기

트위터에 보면 “#” 을 붙여 해시태그를 만듭니다.

그런데, 가만히 해시태그가 되는 규칙을 살펴보면 “#“로 시작해서

특수문자공백이 오면 “#“부터 그 사이를 해시태그로 인식해서 보여줍니다.

다만, 연속적으로 “#“을 사용하면 트위터에선 해시태그로 인식을 하지 않더군요.

예를 들면 “#테스트#테스트1#테스트2″같은 문자열은 각각

“#테스트”, “#테스트1”, “#테스트2” 세개의 해시태그로 인식되어야 할 것 같지만 결과는

아무것도 해시태그로 인식하지 못합니다. 궁금하면 직접 한번 해보세요~*

그래서 회사의 업무와 연관되기도 하여서 해시태그 추출기능 테스트코드를 만들었습니다.

@Test
public void extractHashTagTest() {
    String test ="나는 어딘가에서 #테스트 포를 #가#나다#라라라$ #배$#%@ #443##fefef";
    String test1 ="#아무개가 세미나에 참여했다.";
    String test2 ="#아무개? 이 캐릭터는 누구냐?";
    String test3 ="#작두#망토 어때요?";
    String test4= "말도안돼#니가$정말#그 사람이었다니 말야##이상하군!! 정말";

    Pattern p = Pattern.compile("\\#([0-9a-zA-Z가-힣]*)");
    Matcher m = p.matcher(test4);
    String extractHashTag = null;

    while(m.find()) {
	extractHashTag = sepcialCharacter_replace(m.group());

	if(extractHashTag != null) {
		logger.debug("최종 추출 해시태그 :: {}", extractHashTag);
	}
    }
}

public String sepcialCharacter_replace(String str) {
    str = StringUtils.replaceChars(str, "-_+=!@#$%^&*()[]{}|\\;:'\"<>,.?/~`) ","");

    if(str.length() < 1) {
   	return null;
    }

    return str;
}

test부터 test4까지 테스트를 돌려보면 아래와 같은 결과가 나옵니다.

결과를 보면 아시겠지만,  “#“연속으로 사용한 문자열도 순서적으로 추출할 수 있도록

하였습니다.  “작두“와 “망토“가 결과로 튀어나온거 보면 확인할 수 있죠~

추출된 해시태그에서 “#“는 삭제하였습니다. 순수한 문자열만 추출하기 위해서요.

그래서 한단계를 더 거치게 되는데, 만약 정규식이 최적화되어서 한번에 #을 제외한

문자열을 추출할 수 있다면 더욱 베스트겠죠.

혹시 더 좋은 방법을 알고 계시다면  댓글로 달아주세요~^^

*다른 정규식 예제 포스팅은 아래에서 확인하실 수 있습니다.

[jquery].data() api 실습

jquery api중 “.data()” api가 있습니다.

이 api에 대한 내용은 링크를 참조하시면 됩니다.

대략, api 내용을 보면 .data() api 인자에 key, value를 넣을 수 있고,

key만 넣으면 해당 키에 저장된 값(value)을 넘겨주고 key, value를 함께 지정하면,

해당 key의 value를 지정하게 됩니다.

근데 제가 궁금했던 건,

다른 소스코드를 보던 중 아래와 같은 소스가 뜬금없이 나와서 사용되고 있어서였습니다.

    <div id="test_div" data-id="100" data-specify-name="bluepoet">test</div>

위 html의 div요소를 가져오는 자바스크립트에서는 아래와 같이 사용했습니다.

    var $dataId = $testDiv.data("id");
    var $dataSpecifyName = $testDiv.data("specifyName");

오잉! 먼가 이상하지 않으신가요??

jquery 속성을 가져오는 건 .attr() api를 사용해 풀네임 속성으로 값을 가져오는 것으로

알고 있었는데 갑자기 “data-“가 빠진 “id“만 가지고 오다니요…!

그리고 두번째는 더 심하게 “data-specify-name“이 아닌 “specifyName“만

가져오더군요.

그런데! 여기서 순간! 개발자의 직감으로..

specifyName“을 쓰는 것을 보니 “뭔가 내가 모르는 네이밍규칙이 있구나“라는 생각이

들었습니다. 그래서 찾아봤더니 허무하게도 .data() api에 해당내용이 나와있더군요.

data-*“이 html5의 속성이였습니다. 그리고 이것은 jquery 1.4.3 이상에서는

자동으로 jquery data object로 들어간다고 나와있더라구요 ㅎㅎ

html5의 “data-*”속성에 대한 설명은 링크를 참고하세요.

역시 “등잔밑이 어둡구나“라는 옛말이 또 한번 들어맞는 순간이었습니다.

하여튼, 문제를 해결하고 .data() api에 있는 예제를 조금 수정해 “data-*“속성을

테스트해보기로 했습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="test_div" data-id="100" data-specify-name="bluepoet">A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>

  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>
<script>
$(document).ready(function() {
	var $testDiv = $("#test_div");
	var $dataId = $testDiv.data("id");
	var $dataSpecifyName = $testDiv.data("specifyName");

	$("button").click(function(e) {
	  var value;

	  switch ($("button").index(this)) {
	    case 0 :
	      value = $("div").data("blah");
	      $dataId = 1;
	      $dataSpecifyName = "kim";
	      break;
	    case 1 :
	      $("div").data("blah", "hello");
	      value = "Stored!";
	      $dataId = 2;
	      $dataSpecifyName = "lee";
	      break;
	    case 2 :
	      $("div").data("blah", 86);
	      value = "Stored!";
	      $dataId = 3;
	      $dataSpecifyName = "park";
	      break;
	    case 3 :
	      $("div").removeData("blah");
	      value = "Removed!";
	      $dataId = 4;
	      $dataSpecifyName = "choi";
	      break;
	  }

	  $("span").text("" + value+ ", data-id : "+ $dataId + ", data-specify-name : " + $dataSpecifyName);

	});
});

</script>

</body>
</html>

결과는,  위 그림처럼 data-id와 data-specify-name가 버튼을 누를때마다 다른 값이

나오게 됩니다.