IT & Mobile

jQueryAutoComplete API Doc

suggestion (구글 검색창 처럼, 한 글자를 입력하면 자동으로 추천해주는 기능)

을 구현하기 위해서는 text box와 그 밑에 div를 이용해서 복잡하게 하는게 좋긴 한데

jQuery의 AutoComplete라는 기능을 이용해서 간단하게 할 수 있다. REF  (value만 있는 autoComplete)

label, value가 있는 autocomplete 예제는 여기: REF  - 별로 이쁘지 않고, 키로 값이 선택되지도 않음

약간 발전된 예제: REF -test중.

위 예제들에서 javascript 변수에 값 설정만 잘하면 된다.

추가로,  만약 Themeleaf를 사용하고 있다면..

<script th:inline="javascript">
    /*<![CDATA[*/
    var query = [[${query}]];
    console.log(message);
    /*]]>*/
</script>

방식으로 간단히 themeleaf변수를 javascript에 넣을 수 있다.

복잡한 변수의 경우 themeleaf파싱이 필요한데..  REF1

다음과 같이 themeleaf와 value, label을 조합해 사용할 수 있다.

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    var suggestionData = [[${javaData}]];
    $('#users').autocomplete({
      source: suggestionData,
      select: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
        //.val(label) and store selected Value
        $('#users').val(ui.item.label);
        $('#userSelected').val(ui.item.value);
      },
      focus: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
      }
    });
  });
  /*]]>*/
</script>

단, java에서는 Array혹은 ArrayList로 label,value를 멤버로 가지고 있는 class의 list를 넘겨야 한다.

하나의 html페이지로 Listing과 Editing을 동시에 수행하는 페이지는 다음과 만들 수 있다.

(참고:  jQuery와 themeleaf이용)

포인트: flag(isEditMode)를 두어서 list인지 Edit인지를 구분하고, 

 그에 따라 필요한 버튼을 hide/show

 input을 readonly or not 으로 세팅한다. 

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    allReload();

    //list-edit Mode switch
    function allReload() {
      if ($('#isEditMode').val() == 'true'){
        $('.form-control').prop('readonly', false);
        $('.form-control').css('border', '1px solid #ccc');
        $('#editBtn').hide();
        $('#storeBtn').show();
        $('#cancelBtn').show();
      } else {
        $('.form-control').prop('readonly', true);
        $('.form-control').css('border', 'none');
        $('#editBtn').show();
        $('#storeBtn').hide();
        $('#cancelBtn').hide();
      }
    }

    $('#editBtn').click(function () {
      $('#isEditMode').val('true');
      allReload();
    });

    $('#cancelBtn').click(function () {
      $('#isEditMode').val('false');
      allReload();
    });
    //Button process


  });
  /*]]>*/
</script>

<input type="hidden" id="isEditMode" th:value="${isEditMode}"/>
<form id="form" method="post" enctype="multipart/form-data" th:object="${chatRankingCoefficientForm}"
      action="/app/chat/ranking/constant">
  <table class="table table-hover table-bordered"
         style="word-break: break-all;word-wrap: break-word;" border="1">
    <tr>
      <th style="text-align:center">ranking</th>
      <th style="text-align:center">Value</th>
    </tr>
    <tr>
      <td>Days of Evaluation</td>
      <td>
        <input class="form-control" readonly="true" style="border:none;background-color:transparent;"
               type="number" th:field="*{daysOfEvaluation}"/>
        <div th:classappend="${#fields.hasErrors('daysOfEvaluation')} ? 'has-error'">
          <span th:if="${#fields.hasErrors('daysOfEvaluation')}" th:errors="*{daysOfEvaluation}"
                class="help-block">error!</span>
        </div>
      </td>
    </tr>
..중략
  <p> <!-- BUTTONS -->
    <a class="btn btn-primary" id="editBtn">edit</a>
    <input type="submit" class="btn btn-primary" id="storeBtn" value="save" />
    <a th:href="@{/app/chat/ranking/constant}" class="btn btn-secondary" id="cancelBtn">cancel</a>
  </p>
</form>

개발의 편의상 spring-boot-devtools라는 걸 사용하는게 좋다. REF

아래와 같은 5가지 기능이 지원된다.

Automatic Restart

LiveReload 

  - 특히 이부분은 개발을 할 때는 편하나, cache(@Cacheable)가 바뀌어도 자동 reload해주는 등 편하지만

    개발환경에서 ClassCastException이 발생할 수 있다.

    즉, cache에서 복원된 Object가 Class로 변환이 잘 안되는 문제가 있다.

   그래서 Cache를 테스트할 때는, 이부분을 pom.xml등에서  코멘트아웃을 하고 하는게 좋다.

Remote Debug Tunneling

Remote update and restart

Video Privew

브라우저에서 쿠키를 이러저러 여러가지 값으로 설정할 수 있는데 REF

 
Tomcat의 경우는 

JSESSIONID 변수를 쿠키로 주고받으면서 세션을 유지한다.  REF

웹서버마다 방식이나 변수명이 다르므로 확인이 필요하다. 

nginx웹서버의 경우 cc변수로 보인다. 

현재쿠키는 javascirpt:document.cookie  를 주소창에 치면 쉽게 확인할 수 있다.

쿠키를 조작해서 테스트하고 싶을때는 postman , 그 중에서도 postman intercepter를 크롬에 설치하면 가능하다. 

옆동료에게 나의 db를 그대로 복사해주고 싶은 경우,

일단 원격 접속을 해야하기 때문에

1.  mysql> grant all privileges on *.* to 'root'@'10.33.%';   동료pc에서 이런식으로 접속 허용을 해준다.

2. $ mysqldump -u root databaseName > temp.sql

3. 동료 mysql에 접속한 후 ( $mysql -h 동료pc_IP  -u root ) 아래명령 실행.

   mysql> create database databaseName

   mysql> use dataBaseName

   mysql> source temp.sql

Builder는 간단히 말하면 setter가 다 끝나고 생성자를 호출해 주는 패턴이다. 

개념은 간단한데 왜 필요한가에 대한 답은 :  복잡한 생성자와 복잡한 setter가 섞여있는 경우 유용하다. REF 

예) PersonInfo personInfo = new Builder("Mommoo").setAge(12).setPhonNumber(119).build( );

Factory는 여러개의 subClass가 있을경우 생성자가 각각 생기는 복잡한 문제가 있는데..

이를 하나의 생성자로 통일해 주는 큰 장접이 있다.   REF

@Autowired 를 사용할 경우에는 classpath내에 존재해야 하는데,

그게 여의치 않거나 새로운 생성자가 필요한 경우에는

생성자를 직접 정의하면서 @Bean을 사용할 수 있다. 

1.정의시:

@Bean(name = CHAT_BILLING_HTTP_CLIENT)

OkHttpClient chatBillingHttpClient() {

OkHttpClient client = new OkHttpClient();

client.setTimeOut(blabla)

return client;

}

2.사용시:

@Qualifier(OkHttpClientConfig.CHAT_BILLING_HTTP_CLIENT)

@Autowired

OkHttpClient chatBillingHttpClient;

REF

mySql에 dateTime을 지정해서 입력하는 경우,

STR_TO_DATE('12-01-2014 00:00:00','%m-%d-%Y %H:%i:%s') 을 사용해서 insert할 수도 있지만

아래와 같이 간단히 숫자로도 가능하다. 

insert into campaign(campaign_code,version,memo,start_at,end_at,created_at,updated_at) values('bogo',1,'test',20170509150000,20170511110000,now(),now());

REF

제한된 thread개수를 이용하여 여러개의 작업을 하고 싶을때 Worker Thread와 Pool을 이용하면 된다.

REF:myBlog

여러가지 DB 관련된 에러를 포함하는 java exception은  DataAccessException으로 보인다.

http://helols.tistory.com/12