UI 변경 및 코드 리펙토링 내용을 소개한다.
- github: https://github.com/scribnote5/lab
- github commit - 1: https://github.com/scribnote5/lab/commit/2309c6c4f826de2031c35fc26c5a0143e3e82dd5
- github commit - 2: https://github.com/scribnote5/lab/commit/f06fd2c7d08ff671b5330c52ea2bbeb7cbf835c7
ip주소, port 번호 설정
- application.yml에 각 spring profile에 해당되는 ip 주소, port 번호를 지정하였고 thymeleaf javascript에서 해당 값을 읽어 오도록 변경하였다. 이를 통해서 서버의 ip 주소를 application.yml을 통해서 손쉽게 변경할 수 있다.
출처: https://attacomsian.com/blog/thymeleaf-get-current-environment
https://eblo.tistory.com/56
alert, confirm 창을 변경하고 toast 메시지 추가
- SweetAlert을 사용하여 기존 javascript alert 메시지를 변경하였다.
- sweealert 메시지 위치 변경 방법은 하단 출처를 참고한다.
출처: https://sweetalert2.github.io/recipe-gallery/toast-with-custom-target.html
Fabicon 적용
- 하단 출처를 참고하여 Fabicon을 적용하였다.
출처: https://moolgogiheart.tistory.com/84
Bootstrap 코드 수정
- bootstrap nav-tabs .nav-link 코드를 수정하여 About Us 하단 nav-tabs 색상을 기존 파란색에서 빨간색으로 변경하였다.
Learn More Read, Learn More Video 페이지 변경
- About Us 사용자 페이지에서 보여주는 Learn More 데이터(pdf 파일, video 파일)는 tab을 사용하여 출력되도록 변경하였다.
- pdf.js 라이브러리를 사용하여 pdf 파일이 출력된다.
출처: https://code.tutsplus.com/tutorials/how-to-create-a-pdf-viewer-in-javascript--cms-32505
https://mozilla.github.io/pdf.js/examples/
Spring boot에서 iframe을 사용하기 위한 Spring Security 변경 방법
- Learn More Read(pdf 출력) 즉, pdf.js 예제를 수행하기 위해서는 iframe을 사용해야 하며, Spring Security 설정을 변경하여 iframe이 출력되도록 해야 한다.
- iframe을 사용하는 것은 보안상 매우 위험하기에, 추후 수정할 예정이다.
출처: https://gigas-blog.tistory.com/124
Setting 테이블 생성
- 연구실 주소, 연구실 연락처, About Us에서 출력되는 데이터를 저장 및 수정하는 페이지를 생성하였다.
Connection Pool
- Spring boot2에서는 default JDBC connection pool로 지정된 DBCP(Database Connection Pool)를 사용한다.
- 현재 mariaDB를 사용하므로, Hikari Pool에서 권장하는 mysql 최적화 옵션을 적용하였다.
출처: https://goddaehee.tistory.com/205?category=367461
https://blog.miyam.net/100
https://github.com/brettwooldridge/HikariCP/wiki/MySQL-Configuration
코드 리펙토링
- login 페이지 변경
- 불필요한 출력(System.out.println, console.log) 삭제
- Back-end validation: 모든 멤버 필드에 대해서 validation 수행
- 사용하지 않는 변수 및 메소드 삭제
- 기타 알고리즘 로직 재설계 및 변경
- 페이지 설계에 따른 DB Table 재설계
요구사항과 이에 따른 개발한 것을 정리한 스프레드시트
-이외에도 연구실 인원들로부터 현재 웹페이지에 대한 요구사항을 받았으며 지속적으로 소통하였다.
- 필요한 기능은 검토 후 개발하였으며, 기타 버그 및 오류는 수정하였다.
Link: https://docs.google.com/spreadsheets/d/1FR1x1HDYq67m7YIMOM-yGH06QBDohw0gaWAJTnIYj-g/edit?usp=sharing
Comments powered by Disqus.