UI 변경 및 코드 리펙토링 과정을 소개한다.
- github: https://github.com/scribnote5/lab
- github commit - 9(최종): https://github.com/scribnote5/lab/commit/87cbdbd0f34afaebcd05170e95087fbb7551a83b
버그 수정: Front-end input 태그 validation 변경
- Front-end 모든 input 태그에 validation 적용
- User Form 에서 validation 검증
- validation 함수에 input 태그 name을 전달하는 매개변수를 제거하고 대신 카멜 케이스 표기법을 일반 출력 표기법으로 변환하는 함수를 사용
ex) ActiveStatus -> active status
버그 수정: 로그인 된 상태에서 잘못된 redirect 변경
- localhost:8082/user/login, localhost:8082/ 접속시 localhost:8082/main/home 페이지로 redirect 되도록 수정
버그 수정: 접근 제어 권한 수정
- 다른 id의 manager 권한 사용자를 접근하는 버그 수정
버그 수정: 사용자 publication 무한 스크롤 수정
- 스크롤 할 때 데이터 잘못 가져오는 경우 수정
버그 수정: 관리자 User 페이지 접근 제어 권한 수정
- root가 등록한 user를 manager가 접근할 수 없는 버그 수정
에러 수정 : Alumni Association 검색 오류 수정
- 검색 에러 수정
기능 개발 - 프론트엔드: 사용자 Member 게시판 링크
- member 사진을 클릭할 때 상세 페이지로 이동
기능 개발 - 프론트엔드: 로딩 속도 빠르게 하기(lazy load, thymeleaf cache enable)
- img를 lazy load 방식으로 불러
- 서버 배포시 thymeleaf cahce enable 적용
출처: https://helloinyong.tistory.com/297#title-3
기능 개발 - 프론트엔드: 게시판 파일 업로드 크기
- 파일 업로드 크기 20MB -> 50MB
기능 개발 - 프론트엔드: 사용자 Member Skype 링크
- Skype 링크를 skype 애플리케이션으로 호출하도록 변경
출처: https://docs.microsoft.com/en-us/skype-sdk/skypeuris/skypeuris
기능 개발 - 프론트엔드: 사용자 Publication 출력 방식
- Domestic conference 표기시 오류 발생 하이픈(-)이 언더바(_)로 표시되는 것 변경
- 모든 SCI 표기는 SCIE로 변경
- SCI IF 표시할때 현재는 International Journal - SCIIF: 0.814 와 같이 표기되는데 SCIE (IF: 0.814)와 같이 변경
- Domestic Conference 텍스트 색상 흰색으로 변경
- ISSN 표시 방식이 현재는 1225-6463과 같은데, ISSN: 1225-6463로 변경
- 사용자 페이지 scroll시 잘못된 URL 변경
- DOI랑 URL 이 모두 있는 경우 DOI 주소를 우선으로 사용
기능 개발 - 프론트엔드: List 페이지 글자 간격 조정 및 글자 수 자르기
- 제한된 글자 수가 넘어가면 그 이후로는 …으로 출력하도록 변경
출처: https://uxgjs.tistory.com/41
- No.: 5%(고정)
- Title: 45%(가변)
- ID: 10%(고정)
- Created Date: 12.5%(고정)
- Last Modified Date: 12.5%(고정)
- Status: 7.5%(고정)
- Views: 7.5%(고정)
기능 개발 - 프론트엔드: 파일 업로드 소스 코드를 파일로 분리
- javascript 파일 분리시 예기치 않은 오류가 발생하는지 확인
기능 개발 - 프론트엔드: 중복 submit 방지
출처: https://cofs.tistory.com/270
기능 개발 - 프론트엔드: 구글 map 적용
- 구글 Embedded map을 사용하여 연구실 주소를 표시(javascript api는 유료로 사용하지 못함)
기능 개발 - 프론트엔드: 로딩바 생성
- 관리자 및 사용자 대부분의 페이지(home 제외)에 새로 구현한 로딩바 생성
- 모든 페이지 요소들이 로드가 완료되면 수행되는 자바스크립트 $(window).load(function 함수에서 로딩바를 hide 하도록 변경함.
- 수행 시간이 오래 걸리는 관리자 페이지 유지보수에서 메일 전송 할 때 로딩바가 show 됨.
출처: https://docu94.tistory.com/37
기능 개발 - 프론트엔드: 에러 페이지 변경
- 새로운 에러 페이지 적용
기능 개발 - 프론트엔드: thymeleaf에서 개행 문자를 br tag로 변경
1
<span th:utext="${#strings.replace(text, T(System).getProperty('line.separator'), '<br />')}"></span>
출처: https://www.popit.kr/thymeleaf-replace-newline-br-tag/
기능 개발 - 프론트엔드: ‘Admin Page’ 이동 메뉴 추가
- 사용자 User 페이지 관리자 권한인 경우만 메뉴에 ‘Admin Page’ 이동 메뉴 출력하기
디자인 구현 - 사용자 Home 페이지 이미지 슬라이더 margin 조정
- 이미지 슬라이더 margin-top에 음수 값을 사용하여 이미지가 위로 이동되도록 변경
기능 개발 - 벡엔드: 사용자 NotcieBoard 게시판 등록, 수정, 삭제 기능
- root, manager 계정만 접근 가능
기능 개발 - 벡엔드: 공지글 기능
- Notice Board, Alumni Association 게시판 적용
기능 개발 - 백엔드: 사용자 Member 출력 방식
- Faculty -> 재학중 박사 -> 재학중 석사 -> 졸업생
기능 개발 - 벡엔드: Project Previous Current 분류 추가
- 현재 사용하지 않는 Research Field에 대한 프로젝트를 구분하도록 Current Research Field, Previous Research Field를 체크할 수 있는 기능 추가
- 사용자 Home에서는 Current Research Filed로 되어 있는 프로젝트만 출력됨
기능 개발 - 벡엔드: ckeditor 적용
- WYSIWYG로 summernote 대신 CKEditor로 적용 업로드 방식 변경
- 이미지 업로드를 DB에 바이너리 코드를 저장하는 base64 방식에서 이미지 파일을 서버에 업로드하는 방식인 Image upload plugin 방식으로 변경
출처: https://jjong-factory.tistory.com/55
https://simsimjae.tistory.com/340
https://ckeditor.com/docs/ckeditor5/latest/features/image.html
ckeditor online build 제외 플러그인
- MathType: 빌드할 때 에러 발생
- Media embed toolbar: javascript에서 플러그인을 인식하지 못함
- image caption: 캡션 크기가 이상하게 변경됨
출처: https://ckeditor.com/ckeditor-5/online-builder/
ckeditor content style
- ckeditor에서 사용하는 css class가 선언되어 있음
출처: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
기능 개발 - 백엔드: Event 페이지 개발
- Event 페이지를 개발함
출처: https://bootsnipp.com/snippets/VgzeR
기능 개발 - 백엔드:Cross Side Script 보안 취약점 보완
- API 서버 Cross Side Script 공격을 방어할 수 있는 필터 적용
출처: https://handcoding.tistory.com/200
디자인 구현: search 변경
- input type을 search로 변경하고, 이외 search 디자인을 전체적으로 변경함
출처: https://stackoverflow.com/questions/20804016/editing-input-type-search-pseudo-element-button-x
디자인 구현: 공통 변경 사항
- breadcumbs: > 이미지 대신 /로 변경
- breadcumbs: 색상 변경
- class btn-main과 btn-main-sm 분리
- 게시판 페이지의 각 줄의 padding을 10px로 수정
- 게시판 table th 텍스트들 중앙 정렬로 변경
- 각 페이지별 글 개수를 15개로 수정
- 이미지 파일 호출 URI를 /api/attachedFile/view-image로 변경
기능 개발 - 프론트엔드: venobox 편의성 향상
- title 크기 증가
- img가 한 페이지에서 확인할 수 있도록 변경
기능 개발 - 프론트엔드: Album 페이지 hashTag 드래그 앤 드랍
- 해시 태그 드래그 앤 드랍으로 위치가 변경되는 기능 개발
출처: https://www.w3schools.com/Jsref/event_ondrop.asp
디자인 구현: 사용자 페이지 반응형 및 모바일 지원
- 반응형 및 모바일 지원
- 로그인 페이지
서버 작업: API 서버 CORS 설정
- 특정 ip, port에서만 api 서버에 접근 가능하도록 설정
서버 작업: google analytics 적용
- eslab 페이지에 google analytics를 적용
기타 작업: log 설정
- logging level 설정
- exception handling과 같은 부분에 log가 출력 되도록 변경
기타 작업: 사용하지 않는 img 파일 삭제
- 사용하지 않는 img 파일 삭제하기
기타 작업: local to cdn
- css 및 javascript 라이브러리를 cdn에서 가져오는 것으로 변경
출처: https://hi098123.tistory.com/16
기타 작업: local to fontawesome
- 아이콘 라이브러리를 fontawesome cdn에서 사용하는 것으로 변경
Comments powered by Disqus.