'javascript'에 해당되는 글 32건

  1. 2020.07.06 [Spring] 다국어(i18n) 적용 하기.
  2. 2020.05.08 [Javascript] Input text onsubmit 처리
  3. 2020.04.23 [Bootstrap] Modal 예제
  4. 2016.06.27 [Javascript] English to Korean (영문 한글 전환)
  5. 2013.05.15 [JavaScript] undefined check.
  6. 2011.11.30 JavaScript Cookie 맛보기.
  7. 2011.11.22 Javascript queryString 맛보기
  8. 2011.11.17 javascript apply 와 call 맛보기. 2
  9. 2011.11.17 javascript substring 과 substr 맛보기.
  10. 2011.11.10 javascript event 맛보기.

[Spring] 다국어(i18n) 적용 하기.

ITWeb/개발일반 2020. 7. 6. 16:08

다국어를 적용 하기 위한 Code Snippet

 

1. Javascript

- 구글링 해보시면 몇 가지 framework 들이 나옵니다.

- 쉽게 구현을 한다고 하면, 현재의 locale 정보를 cookie 또는  session 에서 읽어 와서 해당 하는 locale 의 message 파일 또는 변수를 가지고 설정 하면 됩니다.

 

예제)

let MESSAGE = new Object();
let INTL = MESSAGE["ko"];

document.addEventListener("DOMContentLoaded", function(){
  let applicationLocale;

  try {
    applicationLocale = $.cookie("APPLICATION_LOCALE");
  } catch (e) {
  }

  if(!applicationLocale) {
    applicationLocale = "ko";
  }

  INTL = MESSAGE[applicationLocale];
});

MESSAGE.ko = {
  "HELLO": "안녕"
};

MESSAGE.en = {
  "HELLO": "Hello"
};

MESSAGE.ja = {
  "HELLO": "こんにちは"
};

- 여기서 원래는 jquery 를 이용 하다 보니 $ 가 들어 갔었는데 $(document).ready(); 였으나 $를 찾지 못해서 걍 바꿔 놓았습니다.

- 코드 설명은 쉽습니다. 그냥 정적으로 정의해서 사용 하는 내용이라 보시면 다 아실 것 같습니다.

 

2. Spring Boot + Thymeleaf

Cookie 와 Session 두 가지로 적용이 가능 합니다.

구글링 해보시면 거의 똑같은 코드로 예제들이 나올 거예요.

그냥 담는 그릇을 Cookie 로 할건지 Session 으로 할 건지의 차이 라고 보시면 됩니다.

- 프로젝트에서 "Resource Bundle 'messages'" 를 추가해 주세요.

- 추가 하면서, ko, en, ja, zh 생성 하시면 됩니다.

- messages.properties

- messages_ko.properties

HELLO=안녕

- messages_en.properties

HELLO=Hello

- messages_zh.properties

- messages_ja.properties

HELLO=こんにちは

 

2.1 Session

@Configuration
public class LocaleConfig implements WebMvcConfigurer {

  @Bean
  public LocaleResolver localeResolver() {

    SessionLocaleResolver sessionLocaleResolver = new SessionLocaleResolver();
    sessionLocaleResolver.setDefaultLocale(Locale.KOREAN);

    return sessionLocaleResolver;
  }

  @Bean
  public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
    localeChangeInterceptor.setParamName("locale");
    
    return localeChangeInterceptor;
  }

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
  }

}

 

2.2 Cookie

@Configuration
public class LocaleConfig implements WebMvcConfigurer {

  @Bean
  public LocaleResolver localeResolver() {

    CookieLocaleResolver cookieLocaleResolver = new CookieLocaleResolver();
    cookieLocaleResolver.setDefaultLocale(Locale.KOREAN);
    cookieLocaleResolver.setCookieName("APPLICATION_LOCALE");
    return cookieLocaleResolver;
  }

  @Bean
  public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
    localeChangeInterceptor.setParamName("locale");
    return localeChangeInterceptor;
  }

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
  }

}

그래서 Thymeleaf 에서는 아래와 같이 쓰시면 됩니다.

<h1 th:text="#{HELLO}"></h1>

 

:

[Javascript] Input text onsubmit 처리

ITWeb/개발일반 2020. 5. 8. 09:56

Enter 입력을 통한 액션 수행을 onSubmit 이벤트가 onKeyDown 이벤트로 처리

<form onsubmit="return false;">

<input type="text" onkeydown="func(event);">

function func(e) {
  if ( e.keyCode === 13 ) {
    // 수행 할 내용 작성
  }
}

 

:

[Bootstrap] Modal 예제

ITWeb/개발일반 2020. 4. 23. 18:12

아래 공식 문서에 잘 나와 있습니다.

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

:

[Javascript] English to Korean (영문 한글 전환)

ITWeb/검색일반 2016. 6. 27. 23:51

필요해서 구글링으로 퍼왔습니다.

기본적으로는 한글 자모 분리 기능 구현을 사용한다고 보시면 됩니다.


아래 코드 중 구글링으로 퍼온 코드에서 읽기 쉽도록 약간의 변수명등 수정을 했습니다.

자바스크립트에서 function 선언에 대한 기본 이해를 하시면 코드 보기가 더 쉽습니다.


<html>

<head></head>

<script>

var convertEngToKor = function(args) {

var engChosung = "rRseEfaqQtTdwWczxvg"

var engChosungReg = "[" + engChosung + "]";

var engJungsung = {k:0,o:1,i:2,O:3,j:4,p:5,u:6,P:7,h:8,hk:9,ho:10,hl:11,y:12,n:13,nj:14,np:15,nl:16,b:17,m:18,ml:19,l:20};

var engJungsungReg = "hk|ho|hl|nj|np|nl|ml|k|o|i|O|j|p|u|P|h|y|n|b|m|l";

var engJongsung = {"":0,r:1,R:2,rt:3,s:4,sw:5,sg:6,e:7,f:8,fr:9,fa:10,fq:11,ft:12,fx:13,fv:14,fg:15,a:16,q:17,qt:18,t:19,T:20,d:21,w:22,c:23,z:24,x:25,v:26,g:27};

var engJongsungReg = "rt|sw|sg|fr|fa|fq|ft|fx|fv|fg|qt|r|R|s|e|f|a|q|t|T|d|w|c|z|x|v|g|";

var regExp = new RegExp("("+engChosungReg+")("+engJungsungReg+")(("+engJongsungReg+")(?=("+engChosungReg+")("+engJungsungReg+"))|("+engJongsungReg+"))","g");


var converter = function (args, cho, jung, jong) {

return String.fromCharCode(engChosung.indexOf(cho) * 588 + engJungsung[jung] * 28 + engJongsung[jong] + 44032);

};

var result = args.replace(regExp, converter);

console.log(result);

return result;

}


function run(engStr) {

convertEngToKor(engStr);

}


var convertEngToKor2 = (function () {

var engChosung = "rRseEfaqQtTdwWczxvg"

var engChosungReg = "[" + engChosung + "]";

var engJungsung = {k:0,o:1,i:2,O:3,j:4,p:5,u:6,P:7,h:8,hk:9,ho:10,hl:11,y:12,n:13,nj:14,np:15,nl:16,b:17,m:18,ml:19,l:20};

var engJungsungReg = "hk|ho|hl|nj|np|nl|ml|k|o|i|O|j|p|u|P|h|y|n|b|m|l";

var engJongsung = {"":0,r:1,R:2,rt:3,s:4,sw:5,sg:6,e:7,f:8,fr:9,fa:10,fq:11,ft:12,fx:13,fv:14,fg:15,a:16,q:17,qt:18,t:19,T:20,d:21,w:22,c:23,z:24,x:25,v:26,g:27};

var engJongsungReg = "rt|sw|sg|fr|fa|fq|ft|fx|fv|fg|qt|r|R|s|e|f|a|q|t|T|d|w|c|z|x|v|g|";

var regExp = new RegExp("("+engChosungReg+")("+engJungsungReg+")(("+engJongsungReg+")(?=("+engChosungReg+")("+engJungsungReg+"))|("+engJongsungReg+"))","g");


var converter = function (args, cho, jung, jong) {

return String.fromCharCode(engChosung.indexOf(cho) * 588 + engJungsung[jung] * 28 + engJongsung[jong] + 44032);

};


return (function (args) {

var result = args.replace(regExp, converter); 

console.log(result);

return result; 

});

})();


function run2(engStr) {

convertEngToKor2(engStr);

}

</script>

<body>

<input id="eng" value="skdlzl">

<button onclick="run(document.getElementById('eng').value)">run</button>

<button onclick="run2(document.getElementById('eng').value)">run2</button>

</body>

</html>


코드를 보시면 아시겠지만, 영문으로 작성한 skdlrl(나이키) 를 한글 나이키로 변환해서 리턴해 주도록 해줍니다.

보통 검색에서 자동완성 기능 구현 시 client side 에서 한영변환에 대한 기능으로 활용하기 위해 사용 합니다.


:

[JavaScript] undefined check.

ITWeb/개발일반 2013. 5. 15. 18:55


if ( typeof obj === "undefined" ) {

}


if ( obj === undefined ) {

}


요렇게 하셔야 합니다.

:

JavaScript Cookie 맛보기.

ITWeb/개발일반 2011. 11. 30. 14:40
Browser 에서 Cookie 를 다루는 것은 매우 오래된 기술이죠.
그래서 맛보기 작성해 봅니다.
기억을 새록 새록 ㅎㅎ

[제약사항]
- 단일 Domain 에대한 쿠키 count 와 length 제한이 있습니다. 이전 글 참고하세요.
http://jjeong.tistory.com/278

[참고사이트]
http://www.quirksmode.org/js/cookies.html
http://www.w3schools.com/js/js_cookies.asp

[Session vs Persistent Cookie]

- Session Cookie
Temporary Cookie 라고도 합니다.
말 그대로 임시쿠키 입니다.
브라우저가 살아 있는 동안만 유지되는 쿠키로 expire date 이 없기 때문에 브라우저를 닫으면 바로 쿠키는 사라집니다.

- Persistent Cookie 
세션쿠키와 다르게 브라우저가 닫혀도 쿠키가 유지 되는 쿠키 입니다.
즉, expire date 을 설정해 주기 때문에 그 기간 동안 쿠키는 유지 되며, 임의 삭제를 하지 않는 이상 유지됩니다.
이 쿠키는 expire 되기 전까지 쿠키 file 에 쓰여져서 저장됩니다.



[소스코드]

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Cookie</title>

<script type="text/javascript">

//<![CDATA[

var COOKIE = {

set:function (n,v,e,t) {

var expireDate = new Date();

var cookieValue;

switch ( t ) {

case 'day' :

expireDate.setDate(expireDate.getDate() + e);

break;

case 'hour' :

expireDate.setTime(expireDate.getTime() + (e*60*60*1000));

break;

default :

expireDate.setDate(expireDate.getDate() + e);

}

if ( e ) {

cookieValue = escape(v)  + '; expires='+expireDate.toGMTString();

} else {

cookieValue = escape(v) ;

}

document.cookie = n + '=' + cookieValue + '; path=/';

},

get:function(n) {

var cookies = document.cookie.split(';');

var i, key, val, size, idx;

size = cookies.length;

for ( i=0; i<size; i++ ) {

idx =  cookies[i].indexOf('=');

key = cookies[i].substr(0, idx);

val = cookies[i].substr(idx+1);

key = key.replace(/^\s+|\s+$/g,"");

if ( key == n ) {

return unescape(val);

}

}

},

del:function(n) {

this.set(n,'',-1);

}

}


function testGet() {

var val = COOKIE.get('DUID');

alert(val);

}


function testDel() {

COOKIE.del('DUID');

alert(document.cookie);

}

//]]>

</script>

</head>

<body style='margin:0px; padding:0px;' topmargin='0px'  leftmargin='0px' marginheight='0px' marginwidth='0px'>

<button onclick="COOKIE.set('DUID', '123456789', 365);">set cookie</button>

<button onclick="testGet();">get cookie</button>

<button onclick="testDel();">del cookie</button>

</body>

</html>


※ 기본 code base 는 위 두 사이트를 바탕으로 작성한 것입니다.
:

Javascript queryString 맛보기

ITWeb/개발일반 2011. 11. 22. 11:15
가끔 Server Side 말고 Client 만 가지고 queryString 처리를 해야 할 때가 있습니다.
그래서 그냥 하드코딩 올려 봅니다.

[참고URL]
http://www.w3schools.com/jsref/jsref_split.asp
http://www.w3schools.com/jsref/obj_location.asp
http://www.w3schools.com/jsref/prop_loc_href.asp

// 예) http://www.my.com/index.html?width=320&height=48&allow=my.com

<script type="text/javascript">

var href = window.location.href;

var queryString = href.split('?');

var params = queryString[1].split('&');

var size = params.length;


for ( var i=0; i<size; i++ ) {

var param = params[i].split('=');
        alert('KEY : ' + param[0] + "\n" + 'VALUE : ' + param[1]);

}

</script>



[추가정보]
- document.URL : 읽기 전용으로 동일한 정보를 가져 옵니다.
- document.location : 읽기/쓰기 가능 하며 동일한 정보를 가져 옵니다.
- location.search : ?width=320&height=48&allow=my.com 이 부분만 가져 옵니다.


 
:

javascript apply 와 call 맛보기.

ITWeb/개발일반 2011. 11. 17. 10:50
이전에 작성한 글중에 일부 내용이 있습니다.
http://jjeong.tistory.com/161 

javascript 에서 클래스와 상속 관련에 대한 내용으로 다뤘던 내용이구요.
여기서도 가볍게 상기시키는 관점에서 올려 봅니다.

[Function.apply]

Syntax :
  Function.apply(thisArg[, argArray])

thisArg 는 상속 받을 클래스를 지시합니다.

java 를 예로 들면
  public class OneClass extends InheritClass {
  }

여기서 OneClass 가 thisArg 가 됩니다. (OneClass 에서 InheritClass 의 member 들을 상속 받죠.)
JavaScript 에서 apply 를 사용하게 되면 thisArg 의 클래스로 상속을 해주게 됩니다.
아래 예를 보시면 이해가 쉬우실 겁니다. 

Example :

  function Car(make, model, year) {

    this.make = make;

    this.model = model;

    this.year = year;

  }

 

  function RentalCar(carNo, make, model, year) {

    this.carNo = carNo;

    Car.apply(this, new Array(make, model, year));

  }
보시면 RentalCar 클래스는 Car 클래스를 상속 받게 됩니다.
Javs 로 표현해 보면
  public class RentalCar extends Car {
  }

가 되겠죠. 



[Function.call]

Syntax :
  Function.call(thisArg[, arg1[, arg2[, ...]]])

apply 와 동일 합니다.
다만, argument 전달 방식이 array 냐 list 냐의 차이이고 동일하게 동작을 합니다. 

Example :

  function car(make, model, year) {

    this.make = make;

    this.model = model;

    this.year = year;

  }

 

  function hireCar(carNo, make, model, year) {

    this.carNo = carNo;

    car.call(this, make, model, year);

  } 


[참고사이트]
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Apply
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call



:

javascript substring 과 substr 맛보기.

ITWeb/개발일반 2011. 11. 17. 09:03
흔히 많이 사용하는 함수 인데 워낙에 다양한 개발언어를 쓰다보면.. 가끔 문법이 헷갈릴때도 있죠..!!
그래서 정리 하는 습관을 저는 그냥.. 블로그에 정리 하는 걸로 한답니다.. 그래서 맛보기 들어가보죠.. ㅎㅎ

[참고사이트]
http://www.w3schools.com/jsref/jsref_substring.asp
http://www.w3schools.com/jsref/jsref_substr.asp

string.substr(start, length)
- length 부분은 옵션 이구요.
- 의미는 start index 부터 length 길이 만큼.. return 합니다.
- length 가 없으면 그냥 start index 부터.. 끝까지.. 쭈욱...


string.substring(from, to)
- from index 부터 to index 까지 잘라서 return 합니다.
- 역시 to 도 옵션이기 때문에 없으면 끝까지.. 쭈욱...


샘플 코드는 참고사이트 보시면 됩니다. :)
:

javascript event 맛보기.

ITWeb/개발일반 2011. 11. 10. 17:12

그냥 맛보기로 ㅎㅎ

[참고URL]
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_early.html


javascript 에서 event 를 다루는 것은 매우 중요 합니다.
뭐 이런건 이야기 하지 않아도 잘 아실것 같고요.. ^^

event preventing 관련해서 뭐 좀 보다가.. 걍.. 맛보기로만 정리해 보아요..

[맛보기코드]

<!DOCTYPE html>

<html lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

//<![CDATA[

function doSomething(url) {

var d = new Date();

location.href =  url + '?dummy=' + d.getTime();

}

//]]>

</script>

</head>

<body>

<a href="http://192.168.1.1/index.html" onclick="doSomething(this.href); return false;">doSomething!!</a>

</div>

</body>

</html>

- 이 맛보기 코드의 동작은 click 이벤트 발생 시 doSomething(..) 함수가 동작하게 되고 page 가 전환 됩니다.
- 결과적으로 <a href=""> 의 href 기본 동작은 작동하지 않게 되는 것입니다.
- 이유는 onclick="....; return false;" 때문입니다.
- 만약 onclick 시 doSomething() 동작 후 기본 동작이 실행 되게 하고 싶다면 return true; 로 변경을 하시면 됩니다.


※ Event bubbling 이나 preventing 관련해서는 위의 URL 들을 참고하세요.
※ 간혹 어떤 분들은 href 와 onclick 중 어떤게 먼저 동작하냐고 물으시는 분들이 있는데요.. ^^;; 당연히 event(onclick) 가 먼저 발생 합니다.




 
: