일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- shaka
- react
- 개발세팅
- 버추어박스
- nextjs
- npm
- React.js
- 채널톡
- 프론트엔드
- DRM
- yarn berry
- 환경설정
- homebrew
- Yarn
- shaka player
- yarn classic
- 커스텀훅
- ReactJS
- Next.js
- node
- MAC
- brew
- 세팅
- 비디오플레이어
- Video
- VirtualBox
- mysql설정
- Today
- Total
코딩 요정 버터링
[Respets] 프로젝트 규모 및 직접 사용한 기술 정리 본문
사용 기술
언어 : 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 형태로 바로 볼 수 있다.)
구현 화면
'All about the projects' 카테고리의 다른 글
[Respets] 프로젝트 정리 메인 페이지 / 로그인 / 세션 인터셉트 (0) | 2019.01.07 |
---|