3. PROCESS
프로젝트 소개.
1
전체 기능
- 모임 개최 및 검색
- 장소 대관글 작성 및 검색
- 장소 예약
- 공지사항
- 쪽지함
- 마이페이지
맡은 기능
- 장소 대관글 작성
- 다음 지도 API를 활용한 주소 입력
- DatePicker로 이용 시작 및 마감일 설정
- 장소 이미지 파일 업로드
- 1차 지역명에 대한 2차 지역명 (Ajax)
- 체크박스 옵션 설정
- 장소 대관글 검색
- 옵션별 검색
- 지역별 검색
- 키워드별 검색
- 이용 희망 날짜별 검색
- 장소 형식별 검색
- 장소 대관글 수정
- 장소 대관글 삭제
4. PROCESS
개발 환경
2.1
⚫ Tool
- Eclipse
- SqlDeveloper
- VS Code
⚫ Language
- Java (JDK 1.8)
- JavaScript
- HTML5, CSS3
⚫ OS
- Windows 10
⚫ WAS
- Apache Tomcat 8.5
⚫ Framework
- BootStrap
⚫ Library
- jQuery 3.3.1
- Ajax
⚫ DBMS
- Oracle 11g
7. PROCESS
Front-End & Back-End (장소제공글 등록)
4.1
keyup() 메소드를 통해서
Textarea의 글자수를 확인하고,
100글자 이후의 글자는 작성되지
않도록 구현하였습니다.
주소검색 버튼 클릭 시,
다음 지도 API를 사용하여
주소를 검색할 수 있고, 주소를
선택하면 input 태그 밑에
주소에 일치하는 지도가
띄워지도록 구현하였습니다.
8. PROCESS
Front-End & Back-End (장소제공글 등록)
4.2
이용가능 시작날짜와 마감 날짜는
DateePicker를 이용하였고,
MinDate 속성을 1로 설정하여,
오늘 이전의 날짜는 선택하지 못하도록
구현하였습니다.
파일 선택 버튼 클릭 시,
원하는 장소 이미지가
선택 가능하며, 파일을
선택하면 input 태그 밑에
이미지가 보여지도록
구현하였습니다.
9. PROCESS
Front-End & Back-End (장소제공글 등록)
4.3
1차 지역명을 선택하면, 비동기 통신(Ajax)으로
1차 지역명의 Value값에 일치하는 2차 지역명을
구해와서 사용자에게 선택할 수 있도록 구현하였습니다.
* 작성 완료 화면 *
장소에 대한 옵션을 체크박스로 선택하고,
체크는 1로 미체크는 0으로 DB에 저장하도록
구현하였습니다.
10. PROCESS
Front-End & Back-End (장소 찾기)
4.4
대여할 장소를 검색할 수 있는 페이지입니다.
제목, 지역, 장소형식, 이용희망날짜, 옵션을
자유롭게 지정할 수 있습니다.
*다음 화면과 연계*
11. PROCESS
Front-End & Back-End (장소 찾기)
4.5
검색 조건 쿼리는 IF 조건문을 사용해 동적으로 쿼리의 문장을 생성했습니다. 지역명과 이용희말날짜는 선택한 경우에만
쿼리에 추가하였고, 키워드와 장소형식은 LIKE문으로 포함되는 값을 가져올 수 있도록 구현하였습니다.
12가지의 체크박스는 replaceAll() 메소드를 통해 0을 ‘_’로 대체하여 선택 조건을 포함하는 값을 가져오도록 구현하였습니다.
12. PROCESS
개발 후기 및 보완점
5
요구 사항 분석과 문서화의 중요성을 깨달았습니다. 사용자와 시스템 측면에서의 요구 사항을
정확히 분석하지 않는다면 프로젝트의 방향성이 흐트러질 수 있다는 것을 알게 되었고, 정확히 분석하였다고
하더라도, 문서화를 해놓지 않는다면 추후 팀원들과의 의견이 일치하지 않는 상황이 발생할 수 있다는 것을
알게 되었습니다.
<개발 후기>
<보완점>
탄탄한 분석 및 설계 단계를 통해 좀 더 완성도 높은 프로젝트를 진행하겠습니다.
또한, 디자인 영역에도 좀 더 신경을 써서 비개발자에게도 사이트의 첫 인상을 깊게 심어주는것이 목적입니다.
13. Don Give Up !
[ Donation Not Give Up! ]
배재현
기부 사이트
2020-06-08 ~ 2020-07-14 (약 5주)
팀원 : 5명
기여도 : 30%
15. PROCESS
프로젝트 소개.
1
전체 기능
- 일반 기부와 정기 기부 게시판
- 리워드를 이용한 펀딩 게시판
- 물품후원 게시판
- 함께해요를 통한 봉사활동 참여 게시판
- 관리자 마이페이지
- 사용자 마이페이지
- 후원단체 마이페이지
맡은 기능
- 관리자 마이페이지
- 게시글 검색, 승인 및 거부
- 후원단체 등록번호를 이용해 조회(공공 API 사용)
- 마감된 후원물품을 후원단체에게 배정
- 회원 및 후원단체 승인, 일반 및 정지 전환
- 정기 기부 해지요청 -> 해지완료 전환
- 사용자 마이페이지
- 돈토리 충전(결제 API 사용) 및 사용 내역 확인
- 회원 정보 수정
- 활동 내역 확인
- 내 저금통 기부하기 및 저금 참여 내역 확인
- 후원단체 마이페이지
- 게시글 신청 목록 및 신청 현황 확인
- 승인된 게시글 목록 및 각 게시글의 참여자 확인
- 정기 후원자 확인
Q&A
- 마이페이지만 3가지를 맡은 이유?
마이페이지 특성 상 프로젝트 전체 기능의
비즈니스 로직을 파악해야 하고, 팀원들과의
의사소통을 통한 협업활동이 필수적임.
이를 통해, 프로그램 전체 흐름을 파악하는 능력
및 협업 능력, 의사 소통 능력을 향상시킬 수
있을 거라 판단하여 맡음.
16. PROCESS
개발 환경
2.1
⚫ Tool
- STS 3.9.12
- SqlDeveloper
- VS Code
⚫ Language
- Java (JDK 1.8)
- JavaScript
- HTML5, CSS3
⚫ OS
- Windows 10
⚫ WAS
- Apache Tomcat 8.5
⚫ Framework
- Spring Framework 5.0.6
- Mybatis 3.4
- BootStrap
⚫ Library
- jQuery 3.3.1
- Ajax
⚫ DBMS
- Oracle 11g
19. PROCESS
3.2
설계 구조 및 환경 세팅 (Spring 설정)
Web.xml
<url-pattern>으로 지정된 값으로 웹 요청이
들어올 경우, <param-value>에 지정한
Bean 메타 설정 파일의 위치에 있는
DispatcherServlet(applicationContext.xml)을
호출합니다.
<url-pattern>으로 지정된 값으로 웹 요청이
들어올 경우, 요청으로 들어온 서버로 보내기 전
먼저 로딩되어, UTF-8로 인코딩 작업을 진행합니다.
20. PROCESS
3.3
설계 구조 및 환경 세팅 (Spring 설정)
Controller로 향하는 모든 웹 요청의 진입점인, applicationContext.xml에
DB 접속 정보를 제공하여 DB에 연결할 수 있도록 하고,
DB와 Mybatis를 연결하여 ‘SQL’로 끝나는 xml 파일을 읽어들일 경로를 설정합니다.
pom.xml & applicationContext.xml
pom.xml에 maven을 설정합니다.
maven 이란, 자바 프로젝트의 빌드를 자동화해주는 빌드 툴로
라이브러리를 등록하면 자동으로 다운받고 관리해 줍니다.
21. PROCESS
Front-End & Back-End
4.1
마이페이지 특성상 조회 기능이 많습니다.
총 14개 페이지 중 13개의 페이지에 페이징 처리가 되어 있습니다.
2번째 페이징 처리 중에 “페이징 처리를 할 때마다 같은 형식의 클래스를 생성해야 한다”
는 비효율성과 불편함을 느꼈고, 클래스의 자료형을 객체를 생성할 때 지정하는 “제네릭”
기술을 사용하여 해결할 수 있었습니다.
조회해 온 게시글 리스트를 저장할 변수
페이지의 번호에 대한 정보를 저장할 변수
22. PROCESS
Front-End & Back-End (관리자 마이페이지)
사용자가 후원한 물품을 후원단체에게 배정 시 총 3번의 UPDATE를 수행합니다.
DBCP를 이용하여 DB 접속 정보를 공유하지만, 애플리케이션에서 DB를 3번 갔다 오는 것보다
절차형 SQL인 프로시저를 사용하여 DB에서 한 번에 처리하는 것이 처리 효율이 높다고
판단되어 사용하였습니다.
신청사유
4.2
23. PROCESS
Front-End & Back-End (관리자 마이페이지)
*공공 API의 오픈 소스는 생략하였습니다.*
회원가입 시 입력한 ‘단체 등록번호’를 이용하여, 관리자가 조회 후 승인하는 페이지입니다.
XML 형식으로 리턴되는 소스를 파싱 하는 과정을 겪으며, 필요한 객체들과 태그(노드) 접근
방법을 알 수 있었고, 해당 태그 Name을 ‘Key’로 태그의 값을 ‘Value’로 지정하여 JSP에서도
편리하게 접근할 수 있었습니다. (https://www.data.go.kr/data/15000374/openapi.do)
단체 정보
4.3
24. PROCESS
Front-End & Back-End (관리자 마이페이지)
관리자 마이페이지는 조회 기능을 중점적으로 구현했습니다.
사용자의 편의성을 고려해, 각기 다른 5개의 테이블의 정보를 ‘전체’탭을
이용하여 출력하였습니다.
또한, 제목&라디오 버튼&정렬을 선택하여 원하는 게시글을 조회할 수
있도록 구현하였습니다.
Union all과 Outer Join을 사용하여, 5개의 테이블을 조회하고,
동적 쿼리를 사용하여, 조건에 맞는 게시글의 정보를 조회합니다.
라디오버튼
제목 검색
정렬
4.4
25. PROCESS
Front-End & Back-End (사용자 마이페이지)
4.5
사용자 마이페이지 Home에서는 보유 돈토리와 총 후원 돈토리를 볼 수 있고,
현재까지의 돈토리 입출금 내역을 확인할 수 있습니다.
또한, 버튼을 클릭하여 원하는 금액을 선택하고 충전하기 버튼을 누르면
결제 API를 사용하여 충전이 가능하도록 구현하였습니다.
26. PROCESS
Front-End & Back-End (사용자 마이페이지)
글 종류마다 출력되는 구조가 각각 달라 코드가 길어
동적 HTML 태그 생성 부분은 생략하였습니다.
4.6
사용자의 활동 내역을 확인할 수 있는 페이지입니다.
첫 Load가 된 후, 각 탭(기부,펀딩,물품후원,함께해요,정기후원)을
선택하는 경우, 라디오 버튼을 선택하는 경우, 페이지 버튼을
클릭하는 경우 모두 1개의 Ajax로 동작하고, 타입에 따라 다른
결과를 동적으로 출력하게 하여, Method의 재사용성과 Code의
유지 보수를 용이하게 하였습니다.
데이터 시각화
27. PROCESS
Front-End & Back-End (사용자 마이페이지)
4.7
사용자가 개설한 저금통 페이지입니다.
현재까지 모인 저금액과 저금 참여 내역을 확인할 수 있습니다.
저금통 개설 시 지정된 기관에게 저금액을 후원할 수 있으며,
후원 시 2번의 UPDATE와 1번의 INSERT 작업을
프로시저를 사용하여 구현하였습니다.
28. PROCESS
Front-End & Back-End (후원단체 마이페이지)
4.8
후원단체가 신청한 게시글 목록에서는 게시글의 상태를
확인할 수 있습니다.(승인대기, 거부, 승인완료)
거부 버튼을 누르면 관리자가 작성한 거부 사유를
Modal로 확인할 수 있습니다.
승인된 게시글 목록에서 참여자 확인 버튼을 누르면
해당 글의 참여자를 확인할 수 있고, 많은 인원이 참가할
경우를 생각하여, 참여자 목록에도 페이징 처리를
구현하였습니다.
29. PROCESS
개발 후기 및 보완점
5
프로그램을 어떻게 하면 조금 더 효율적으로 코딩할 수 있을지를 생각하며 진행하였습니다.
기본적으로 제공되는 다양한 기술(제네릭, 프로시저 등)을 사용함으로써 효율을 몸소 느낄 수 있었고,
공공 API를 사용하여 파싱 하는 과정에서 외부 정보를 나의 것으로 만드는듯한 느낌도 받을 수 있었습니다.
가장 중요한 점은 협업 능력과 의사소통 능력을 향상시킬 수 있는 아주 좋은 기회였습니다.
<개발 후기>
<보완점>
이번 프로젝트에서는 한두 번의 시행착오를 겪은 뒤에 효율적인 코딩을 할 수 있었지만,
프로그램의 구조와 흐름을 사전에 좀 더 명확히 파악해서 코딩을 진행하여
유지 보수 작업을 좀 더 원활히 할 수 있도록 하겠습니다.
![MOING
[ 모임 + ~ing ]
배재현
모임 개최 및 장소 대관 사이트
2020-05-01 ~ 2020-05-20 (약 3주)
팀원 : 6명
기여도 : 25%](https://image.slidesharecdn.com/project-200720124318/85/Web-Project-1-320.jpg)
