jjeong

Raspberry PI 설정

• Raspbian Image Download : https://downloads.raspberrypi.org/raspbian_lite_latest
• 압축 해제 후 인스톨 가이드에 따라 SD카드 이미지에 복원
• Raspberry PI에 SD카드 삽입 후 모니터 연결 후 전원 연결 (키보드도 미리 연결)
  • SD카드에 맞게 자동으로 리사이즈 과정 진행 됨.
  • 리부팅 후 login 프롬프트가 뜨면 로그인 ( pi / raspberry )
  • sudo raspi-config 실행
  • TUI 에서 필요한 항목 셋팅 (언어, 타임존 등등)
• 필요한 소프트웨어 설치
  • docker 설치 - sudo apt install docker.io
  • python3 pip 설치 - sudo apt install python3-pip
  • docker-compose 설치 - sudo pip3 install docker-compose (4.7일 기준 1.25.4버전이 설치됨)
  • open jdk8 설치 - sudo apt install openjdk-8-jdk
• GPIO 커맨드툴 설치
  • wget https://project-downloads.drogon.net/wiringpi-latest.deb
  • sudo dpkg -i wiringpi-latest.deb
  • http://wiringpi.com/wiringpi-updated-to-2-52-for-the-raspberry-pi-4b/

 $ gpio readall
 +-----+-----+---------+------+---+---Pi 4B--+---+------+---------+-----+-----+
 | BCM | wPi |   Name  | Mode | V | Physical | V | Mode | Name    | wPi | BCM |
 +-----+-----+---------+------+---+----++----+---+------+---------+-----+-----+
 |     |     |    3.3v |      |   |  1 || 2  |   |      | 5v      |     |     |
 |   2 |   8 |   SDA.1 |   IN | 1 |  3 || 4  |   |      | 5v      |     |     |
 |   3 |   9 |   SCL.1 |   IN | 1 |  5 || 6  |   |      | 0v      |     |     |
 |   4 |   7 | GPIO. 7 |   IN | 1 |  7 || 8  | 1 | IN   | TxD     | 15  | 14  |
 |     |     |      0v |      |   |  9 || 10 | 1 | IN   | RxD     | 16  | 15  |
 |  17 |   0 | GPIO. 0 |   IN | 0 | 11 || 12 | 0 | OUT  | GPIO. 1 | 1   | 18  |
 |  27 |   2 | GPIO. 2 |  OUT | 0 | 13 || 14 |   |      | 0v      |     |     |
 |  22 |   3 | GPIO. 3 |  OUT | 0 | 15 || 16 | 0 | IN   | GPIO. 4 | 4   | 23  |
 |     |     |    3.3v |      |   | 17 || 18 | 0 | IN   | GPIO. 5 | 5   | 24  |
 |  10 |  12 |    MOSI |   IN | 0 | 19 || 20 |   |      | 0v      |     |     |
 |   9 |  13 |    MISO |   IN | 0 | 21 || 22 | 0 | IN   | GPIO. 6 | 6   | 25  |
 |  11 |  14 |    SCLK |   IN | 0 | 23 || 24 | 1 | IN   | CE0     | 10  | 8   |
 |     |     |      0v |      |   | 25 || 26 | 1 | IN   | CE1     | 11  | 7   |
 |   0 |  30 |   SDA.0 |   IN | 1 | 27 || 28 | 1 | IN   | SCL.0   | 31  | 1   |
 |   5 |  21 | GPIO.21 |   IN | 1 | 29 || 30 |   |      | 0v      |     |     |
 |   6 |  22 | GPIO.22 |   IN | 1 | 31 || 32 | 0 | IN   | GPIO.26 | 26  | 12  |
 |  13 |  23 | GPIO.23 |   IN | 0 | 33 || 34 |   |      | 0v      |     |     |
 |  19 |  24 | GPIO.24 |   IN | 0 | 35 || 36 | 0 | IN   | GPIO.27 | 27  | 16  |
 |  26 |  25 | GPIO.25 |   IN | 0 | 37 || 38 | 0 | IN   | GPIO.28 | 28  | 20  |
 |     |     |      0v |      |   | 39 || 40 | 0 | IN   | GPIO.29 | 29  | 21  |
 +-----+-----+---------+------+---+----++----+---+------+---------+-----+-----+
 | BCM | wPi |   Name  | Mode | V | Physical | V | Mode | Name    | wPi | BCM |
 +-----+-----+---------+------+---+---Pi 4B--+---+------+---------+-----+-----+

[build.gradle]

// pi4j
compile group: 'com.pi4j', name: 'pi4j-core', version: '1.2'
compile group: 'com.pi4j', name: 'pi4j-device', version: '1.2'
compile group: 'com.pi4j', name: 'pi4j-gpio-extension', version: '1.2'
compile group: 'com.pi4j', name: 'pi4j-service', version: '1.1'
compile group: 'com.pi4j', name: 'pi4j-native', version: '1.2', ext: 'pom'
compile group: 'com.pi4j', name: 'pi4j-parent', version: '1.2', ext: 'pom'
compile group: 'com.pi4j', name: 'pi4j-distribution', version: '1.2'
compile group: 'com.pi4j', name: 'pi4j-example', version: '1.2'

[참고문서]

https://wiki.keyestudio.com/KS0221_keyestudio_Ultimate_Starter_Kit_for_Raspberry_Pi

https://projects.drogon.net/raspberry-pi/wiringpi/download-and-install/

https://pi4j.com/1.2/pins/model-3b-plus-rev1.html

https://mvnrepository.com/artifact/com.pi4j

https://github.com/Pi4J

$ sudo vi /etc/ssh/sshd_config

Port 22

$ sudo /etc/init.d/ssh restart

[ ok ] Restarting ssh (via systemctl): ssh.service.

$('#@id').removeClass('new').addClass('old');

여기서 @ 때문에 jquery 내부에서 오류가 발생을 합니다.

이럴 경우 DOM 을 직접 컨트롤 해주셔서 해결 하시면 됩니다.

var policyId = 'result' + policyName;

var el = document.getElementById(policyId);

el.classList.remove('new');

el.classList.add('old');

참고문서)

https://ace.c9.io/#nav=howto

필요한 JS 파일) 필요한 resource 모두 받아 두었습니다.

<script src="/statics/js/ace/ace.js"></script>
<script src="/statics/js/ace/ext-beautify.js"></script>

Editor DIV)

<div id="shadowStateEditor" style="width:100%; height:300px;">
{
  "state": {
    "reported": {
      "welcome": "Ace World"
    }
  }
}
</div>

Javascript) 설정 및 적용

// res.data 는 ajax 처리 후 success 에서 넘겨 받은 json 데이터 입니다.

ace.edit("shadowStateEditor").setValue(
  JSON.stringify(
    JSON.parse(res.data), null, 2
  )
);

drawShadowStateEditor();

function drawShadowStateEditor(){
  var beautify = ace.require("ace/ext/beautify");
  var editor = ace.edit("shadowStateEditor");

  editor.setTheme("ace/theme/nord_dark");
  editor.session.setMode("ace/mode/json");
  editor.setShowInvisibles(false);
  editor.setReadOnly(true);
  editor.setShowPrintMargin(false);
  editor.session.setTabSize(2);
  editor.session.setUseSoftTabs(true);
  editor.session.setUseWrapMode(true);

  beautify.beautify(editor.session);

  editor.resize();
}

spring security 를 사용하면서 테스트를 위해 인증을 off 하고 싶을 때 사용 하면 됩니다.

Application main)
@SpringBootApplication(exclude = SecurityAutoConfiguration.class)

application.yml)
security:
  enable:
    csrf: false
  basic:
    enabled: false
  ignored: /**
management:
  security:
    enabled: false

위에서 처럼 두 군데에 적용해 주면 됩니다.

[로컬 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 창을 띄울 수 있어야 합니다.

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