jjeong

[로컬 Master 브랜치를 Remote Master 로 돌리기]

$ git fetch origin

$ git reset --hard origin/master

$ git clean -f -d

가끔 개발 브랜치 인줄 알고 merge 했는데, 헐... master 브랜치...

그럼 돌리세요. :)

ModelAndView 를 이용해서 Controller 에서 HTML 로 값을 넘길 때 템플릿 엔진으로 Thymeleaf 를 사용하고 있다면 꼭 Model, VO, DTO 등의 객체를 만들어서 넘기도록 합니다.

그냥 Object 로 넘기게 되면 type casting 에 대한 문제가 발생 하거나 삽질을 경험 할 수 있습니다.

제가 경험한 내용은 LocalDateTime 값을 잘 못 넘겨서 String to DateTime 을 할 수 없다고 계속 에러를 내거 삽질 했네요.

#conversions, #strings, #dates, #temporals 다 그냥 시도해도 Thymeleaf 엔진에서 오류 떨어집니다.

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

<form onsubmit="return false;">

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

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

이건 주의 사항이라기 보다 신경쓰지 않는 것이 더 문제 같습니다.

ㅡ.ㅡ;

웹 페이지에서 form post 로 데이터를 넘길 때 삽질을 해서 기록 합니다.

- 기본적으로 boolean 변수에 대해서는 is+변수명() 으로 method 를 만들어 줍니다.
- 웹에서 넘기는 변수명에 is 가 붙어 있을 경우 이를 제거 하고 변수명을 만드셔야 합니다.
- 잘못된 예)
  isCreateThing
- 올바른 예)
  bCreateThing or createThing

- 이런 오류를 처음 부터 경험 하고 싶지 않다면, 전통적으로 setter, getter 를 다 만들어서 사용 하시면 됩니다.

제가 변수명을 isCreateThingType 이렇게 작성 했다가 시간 낭비를 많이 했습니다.
(그러고 보니 아주 예전에도 같은 경험을 했던 것 같네요. 역시 몸이 기억 해야 합니다.)

알면 쉽고 모르면 고생하는...

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

<a class="dropdown-item"

  data-toggle="modal"

  href="#deleteThingCertificateModal"

  th:data-certid="${thingCertificate.certificateId}"

  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">

인증서 삭제

</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
var certId = $(e.relatedTarget).data('certid');
var certName = $(e.relatedTarget).data('certname'); console.log(certId);
console.log(certName);
}
);
</script>
</th:block>

<a class="dropdown-item" 
  data-toggle="modal" 
  href="#deleteThingCertificateModal" 
  th:data-certid="${thingCertificate.certificateId}" 
  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">
인증서 삭제
</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
    var certId = $(e.relatedTarget).data('certid');
    var certName = $(e.relatedTarget).data('certname');
    console.log(certId);
    console.log(certName);
  }
);
</script>
</th:block>

기본 전체는 Modal 창을 띄울 수 있어야 합니다.

그럼 위 내용이 쉽게 이해가 됩니다.

보통 <a>, <button>으로  collapse 기능 구현을 합니다.

[참고문서]

https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 
  role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse"
  data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit......
  </div>
</div>

이 예제 코드는 어떤 걸 클릭 하던 toggle 형태로 동작 하게 됩니다.

하지만 저는

• 버튼 1은 "hide"
• 버튼 2는 "show"

로 동작 하게 하고 싶었습니다.

이와 같이 동작 하게 하려면 아래와 같이 코드를 수정 하면 됩니다.

1. data-toggle="collpase" 코드를 삭제 합니다.
2. hide 기능만 동작 하도록 아래 코드 추가
   onchange="$('#thingRegisterInfoDiv').collapse('hide')"
3. show 기능만 동작 하도록 아래 코드 추가
   onchange="$('#thingRegisterInfoDiv').collapse('show')"
   
   이렇게 작성 하시면, radio button 에 특정 기능으로만 동작 하도록 해줄 수 있습니다.

<div class="form-check">
  <input class="form-check-input" type="radio" name="thingCertInfos" id="thingCertInfoNone" value="none" 
  data-target="#thingRegisterInfoDiv" onchange="$('#thingRegisterInfoDiv').collapse('hide')" checked>
  <label class="form-check-label" for="thingCertInfos">
    <span class="font-weight-bold">기기 정보 없음</span>
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="thingCertInfos" id="thingCertInfoRegister" value="register" 
  data-target="#thingRegisterInfoDiv" onchange="$('#thingRegisterInfoDiv').collapse('show')">
  <label class="form-check-label" for="thingCertInfos">
    <span class="font-weight-bold">기기 정보 입력</span></label>(생성할 인증서에 기기 정보 등록)
</div>

<div class="collapse" id="thingRegisterInfoDiv">
  <div class="card card-body">
  ...중략...
  </div>
</div>

이 정도로 마무리 합니다.

[bootstrap collapse]
https://getbootstrap.com/docs/4.0/components/collapse/

- 처음에 <div class="collpase show" id="exCollapseDiv"> 를 열어 놓고 싶을 때

<a class="btn btn-primary" data-toggle="collapse" href="#exCollapseDiv" 
role="button" aria-expanded="true" aria-controls="exCollapseDiv">클릭</a>

오픈 된 상태로 화면에 출력 됩니다.

- 처음에 <div class="collpase" id="exCollapseDiv"> 를 닫아 놓고 싶을 때

<a class="btn btn-primary" data-toggle="collapse" href="#exCollapseDiv" 
role="button" aria-expanded="false" aria-controls="exCollapseDiv">클릭</a>​

이전 글 참고)

https://jjeong.tistory.com/1386

controller 단에서 viewName 작성 시 "/" 를 제거 하고 작성을 하셔야 합니다.

Spring framework 의 UrlBasedViewResolver.java 내 코드를 보면,

protected AbstractUrlBasedView buildView(String viewName) throws Exception {
   Class<?> viewClass = getViewClass();
   Assert.state(viewClass != null, "No view class");
   AbstractUrlBasedView view = (AbstractUrlBasedView) BeanUtils.instantiateClass(viewClass);
   view.setUrl(getPrefix() + viewName + getSuffix());
   
   ...중략...
}

Thymeleaf 기본 설정을 보면,

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

...중략...

로컬에서는 되는 viewName 그러나 서버에서 안되는 ...)

    @GetMapping("/list")
    public String list(Model model) {
        return "/list";
    }

서버에서 되는 viewName)

    @GetMapping("/list")
    public String list(Model model) {
        return "list";
    }

둘 다 resources/templates/list.html 을 찾습니다.

만약, templates/thing/list.html 로 설정을 해야 한다면,

return "thing/list"; 

로 작성을 하시면 됩니다.

로컬에서만 테스트 하다 보면 이런 내용도 왜 안되지 하고 있을 때가 있어서 기록 합니다.

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

• https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
• https://getbootstrap.com/docs/4.0/components/modal/

<!-- 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>

[공식문서]

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

bootstrap 4.x 사용 하면서 inline css 나 별의 별 짓을 다 해봤으나 적용이 안되다가 위 문서 보고 처리 했습니다.

<div class="container-fluid">
  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">장치 인증서 ID</th>
            <th scope="col">장치 인증서 ARN</th>
            <th scope="col">상태</th>
            <th scope="col">생성일</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th scope="row">1</th>
            <td>
              <span class="d-inline-block text-truncate" style="max-width: 150px;">
              262a1ac8a7d8aa72f6e96e365480f7313aa9db74b8339ec65d34dc3074e1c31e
              </span>
            </td>
            <td>
              <span class="d-inline-block text-truncate" style="max-width: 150px;">
                arn:aws:iot:us-west-2:123456789012:cert/262a1ac8a7d8aa72f6e96e365480f7313aa9db74b8339ec65d34dc3074e1c31e
              </span>
            </td>
            <td>ACTIVE</td>
            <td>1546447050.885</td>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

예제)

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>