코딩 요정 버터링

[Respets] 프로젝트 규모 및 직접 사용한 기술 정리 본문

All about the projects

[Respets] 프로젝트 규모 및 직접 사용한 기술 정리

butter-ring 2019. 1. 22. 00:05

사용 기술

언어 : Java 8 / JSP

프레임워크 : Spring Framework 3.9.6  /  MyBatis  / Bootstrap

형상관리 : git(Sourcetree)

DB : Oracle Database 11g

Server : tomcat 9


프로젝트 규모

DB 

사용 DB 테이블 34개 (총 Column 173개)

사용된 Query 204개

사용된 View 4개


Class

Controller : 6개(주요기능 및 회원으로 분류) - 총 URL 121개

DTO : 10개

Service : 6개

DAO : 5개

mapper : 5개

기타 : 2개


View(JSP file) : 73개




사용된 기술 소개


개인회원가입


Ajax를 이용하여 DB에 회원의 email 중복 여부를 확인한다.

사용 가능한 email이면 파란색 글씨로 사용 가능한 이메일입니다. 라는 메세지를 띄운다.

중복된 email이라면 이미 사용 중인 이메일입니다. 라는 메세지를 띄워 중복 여부를 확인시킨다.


JavaScript


Contoller


Service


DAO


mapper



비밀번호와 비밀번호 확인의 일치 여부를 검사한다. 

비밀번호가 일치 한다면 파란색 글씨로 '비밀번호가 일치합니다' 라는 메세지를 띄운다.

일치하지 않는 다면 빨간색 '비밀번호가 일치하지 않습니다.' 라는 메세지를 띄운다.


View


비밀번호가 일치하지 않을 시 javaScript(jQuery) 를 이용해 submit의 속성을 disabled로 비밀번호가 일치하면 disabled 속성을 풀어 준다.


JavaScript



필수 정보들을 입력 후 가입하기 버튼을 클릭시 DB의 개인회원테이블에 insert가 된다.


Controller


프로필 사진이 포함이 되었을 경우 personalJoinPhoto DAO를 사용 한다.

프로필 사진이 없을 시엔 기본 사진이 설정되어 DB 테이블에 삽입 된다.


Service


DAO

회원가입시 사진이 포함 되지 않았다면 personalJoin을 사진이 포함 되었다면 personalJoinPhoto를 사용한다.



mapper



이메일 인증을 통해 회원가입 프로세스를 완료 한다. 이메일 인증 링크 클릭시 회원테이블의 email 확인 컬럼이 update된다.


개인회원가입 구현 화면


     













로그인

로그인 창에서 email과 password를 입력 후 버튼 클릭 시 DB table에 email 주소 여부를 확인 후 password 일치 여부를 검사 한다.

email과 password가 일치 할 경우 정지 여부 및 이메일 인증 여부 그리고 회원 탈퇴 여부를 검사 한다.

조건에 부합한다면 로그인이 되며 세션에 회원번호, 프로필 사진, 이름을 저장 한다.

조건에 부합하지 않을 경우 세션을 만료시킨다.


Controller


Service


DAO


mapper


구현 화면 












세션 인터셉터 처리

비회원에게 제공 되지 않은 서비스의 차단을 위한 자동 세션 검사 기능의 구현

세션 검사가 필요하지 않은 서비스의 경우 servlet-context.xml -> exclude-mapping 에 url을 추가 한다.

세션이 필요한 서비스에 로그인이 되지 않은 접근이 있다면 메인 화면으로 보낸다.


xml



Service



개인최근예약내역

개인 회원이 예약한 서비스 내역을 목록으로 보여 준다.


Controller


세션에 담긴 개인의 회원번호를 가지고 DB에 저장 되어 있는 예약 리스트를 최신 순으로 정렬하여 보여 준다.

예약 리스트가 10건이 넘을 경우 페이징 처리를 한다.


Service


DAO


mapper


구현 화면


예약 번호 클릭시 예약 상세 내역을 보여 준다.


Controller


예약 번호를 가지고 DB테이블에 있는 예약 상세 정보를 가져 온다.

가져 온 정보를 Gson을 이용해 Json형식으로 JSP로 보낸다.


Service


DAO


mapper


service 단에서 받아 온 json형식의 data를 for each 반복문을 이용해 key, value로 분류 하여 뽑아 낸다.

JSP의 span의 id 값과 json 의 key값을 같게 준 다음 span에 value값을 추가 하여 준다.

예) $('#' +  key).html(value)

json으로 데이터 형식을 받아 올 때 순서가 일정치 않기 때문에 원하는 방식으로 받아 온 데이터 값을 정렬 해 주기 위해 

id값과 key값을 동일 하게 주어서 추가 하였다.


JavaScript


JSP



구현 화면



예약 내역이 10개가 넘어갈 시 페이징 처리를 해준다.


Service


Paging Class


DAO


mapper



개인캘린더

개인이 예약한 내역을 Gson을 이용하여 Json으로 넘긴다.

예약 내역을 Full Calendar에 보여 준다.


Controller



Json 형식으로 값을 넘길 때 Json에는 date 형식이 없기 때문에 이상한 형태로 넘어 간다.

그 형식을 제대로 된 date 형식으로 고치기 위해 @DateTimeFormat이라는 어노테이션을 사용하였다.


Service


DAO


mapper


JavaScript



구현 화면



클릭시 모달 박스로 상세 내역을 띄운다.


JavaScrip


구현 화면




기업 상세 정보

개인 회원에게 보여 줄 기업의 상세 정보들을 불러 온다.


Controller


Service


DAO


mapper


JavaScript



구현 화면



기업의 갤러리를 불러 온다.


Controller


Service


DAO


mapper



구현 화면



기업의 공지사항을 불러 온다.


Controller


Service



DAO



mapper



구현 화면



각 불러온 정보들을 Ajax를 이용해 기업 상세 페이지의 각 버튼을 선택시 화면 전환 없이 불러오게 한다.


JSP


JavaScript



기업 공지사항 게시판

기업 공지사항 게시판 기능을 구현 한다. (리스트, 등록, 수정, 삭제, 검색, 디테일, 페이징)


Controller


Service


DAO


mapper

공지사항 디테일을 보기 위해 resultMap을 사용해 NCLOB 을 javaType 에서 java.lang.String 형식으로 변환 하여 준다. (DTO를 사용하면 변환 하지 않아도 String 형태로 바로 볼 수 있다.)




구현 화면





Comments