Bootstrap을 사용하여 UI 변경(Front-end), 설계 변경에 따른 코드 리펙토링한 내용을 소개한다.
- github: https://github.com/scribnote5/lab
- github commit: https://github.com/scribnote5/lab/commit/b145d6864452592f86448ba92d54ddaaf0d0867a
UI 변경(Front-end)
- Bootstrap 4를 사용하여 프로젝트의 UI를 변경하였다.
Bootstrap 시작
- 처음 Bootstrap 사용할 때 참고한 사이트로서, Bootstrap의 구조와 제공하는 기능을 파악하는데 도움이 되었다.
출처: https://brunch.co.kr/@clay1987/131
Bootstrap 4 적용 및 디자인 변경
- 기존 프로젝트는 Bootstrap 3을 사용하였으며, 최신 버전인 Bootstrap 4.5.2로 마이그레이션을 진행하였다.
- 이에 따라 기존에 사용한 구성요소가 변경됨에 따라 전체적인 UI를 변경하게 되었다.
- container class margin 줄이기 -> container-lg 사용
- 등록되는 모든 글은 new icon 표시
글꼴 변경
- 프로젝트에서 사용하는 글꼴을 ‘Spoqa Han Sans’로 변경하였다.
- 스포카 한 산스 폰트는 많은 웹 사이트에서 사용하고 있는 오픈 폰트로서 가독성이 좋고 무료로 사용가능하다.
- 글꼴 변경 과정은 하단 출처를 참고하였다.
출처: https://spoqa.github.io/spoqa-han-sans//ko-KR/
https://webclub.tistory.com/261
https://wit.nts-corp.com/2017/02/13/4258
에러 페이지 추가
- module-app-web view를 담당하는 서버에서 에러가 발생하는 경우, 이동되는 에러 페이지를 추가하였다.
- 에러 페이지 추가 과정은 하단 출처를 참고하였다.
출처: https://goddaehee.tistory.com/214
관리자 페이지와 사용자 페이지 분리
- 사용자의 접근 가능 여부를 설정하는 isAccess 메소드를 관리자 페이지와 사용자 페이지에 다르게 적용하였다.
- application.yml에 module명을 추가하여, 관리자 페이지(module-app-admin)와 사용자 페이지(module-app-web)에 따라 호출되는 메소드를 세분화하였다. 관리자 페이지(module-app-admin)에서는 ActiveStatus에 관계 없이 데이터를 모두 출력 하지만, 사용자 페이지(module-app-web)에서는 ActiveStatus가 active인 경우만 데이터를 출력한다.
- root 권한 사용자의 권한은 변경할 수 없다.
- 새로 가입한 non_user 사용자는 관리자 페이지에서 관리자가 general 사용자로 변경해야 로그인 가능하도록 변경하였다. Spring security에서 제공하는 예외를 사용하여 예외처리 한다.
출처: https://codevang.tistory.com/268
권한에 따른 관리자 페이지 접근 가능 여부
- root: 모든 권한에 대한 접근 허용
- manager: general 권한에 대한 접근 허용, 본인이 create한 게시글에 update 및 delete 가능
- general, non_user, anonymous: 접근 불가
권한에 따른 사용자 페이지 접근 가능 여부
- root, manager general: 본인이 create한 게시글에 update 및 delete 가능
- non_user: 비회원으로서 회원 가입 인증 대기 중(추후 구현), 게시글 read만 가능
- anonymous: 게시글 read만 가능
Thymeleaf
- Publication(논문) 페이지에서 사용하는 날짜 관련 자료형은 LocalDate이며, 이중 년도, 영어 월(April)만 필요하다. 따라서 LocalDate 자료형에서 필요한 데이터 포맷만 사용하도록 변경하였다.
출처: https://frontbackend.com/thymeleaf/working-with-dates-in-thymeleaf
- select box에서 하드 코딩으로 구현된 java enum을 thymeleaf에서 제공하는 enum 표현 방법으로 변경하였다.
출처: https://frontbackend.com/thymeleaf/how-to-display-all-enum-values-in-thymeleaf
csrf 토근 오류 메시지 해결
- 기존 csrf 구현에 오류가 발생하여 다음과 같이 소스 코드를 변경하였다.
- ajax csrf: css.html에 csrf meta 태그 추가하였다.
- form csrf: Spring MVC에서 제공하는
출처: <ttps://bestcure.tistory.com/entry/Spring-boot-security-%EC%82%AC%EC%9A%A9%EC%8B%9C-ajax-%EC%B2%98%EB%A6%AC>
https://docs.spring.io/spring-security/site/docs/5.0.x/reference/html/csrf.html#csrf-include-csrf-token
https://reiphiel.tistory.com/entry/spring-security-csrf
spring-dev-tools 자동 재시작 설정 변경
- 소스 코드가 변경되어도 spring-dev-tools가 서버를 자동으로 재시작하지 않는 경우가 발생하여, application.yml에 해당 설정을 추가하였다.
1
2
3
4
spring:
devtools:
restart:
enabled: true
Comments powered by Disqus.