jjeong

1. bootstrap UI 에서 "dropdown require Popper" 관련 오류가 발생을 하면 아래 내용을 추가 합니다.

[webjars + bootstrap 4 사용 시]

build.gradle)
implementation "org.webjars:popper.js:1.6.1-lts"

fragments_jsimport.html)
<!-- jQuery 먼저 선언 합니다. -->
<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<!-- Bootstrap 을 나중에 선언 합니다. -->

여기서는 선언 순서를 지켜 주셔야 합니다.

2. spring mvc 에서 thymeleaf 로 값 전달

Controller)
mav.addObject("key", 1);

Thymeleaf)
<a th:href="@{/goto/{id}(id=${key})}">KEY</a>
To
<a href="/goto/1">KEY</a>

보통 <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://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>

주의점 이라기 보다 그냥 설정을 잘 못 하는 경우가 있어서 기록 합니다.

Client 쪽 Dependency 등록)

implementation 'org.springframework.cloud:spring-cloud-starter-config'
implementation 'org.springframework.boot:spring-boot-starter-actuator'

Client 쪽 bootstrap.yml 등록)

spring:
  cloud:
    config:
      uri: http://${CONFIG_SERVER_HOST}:${PORT}

management:
  endpoints:
    web:
      exposure:
        include: refresh

Refresh 호출)

- HTTP Method : POST

- http://${CONFIG_CLIENT_HOST}:${PORT}/actuator/refresh

bootstrap.yml 에 등록 하지 않게 되면 client 가 config server 를 localhost:8888 로 찾는 오류가 발생 할 수 있습니다.

또한 refresh 등록을 해줘야 actuator/refresh 사용이 가능 합니다.

그냥 궁금해서 본건데.. 

[background]

ElasticSearch.java 가 Bootstrap.java 를 상속 받아서 Bootstrap.main() 실행

[foreground]

실행 시 -f 옵션을 주면 ElasticSearchF.java 에서 System.setProperty("es.foreground", "yes");하고 Bootstrap..main() 실행