Project 1
주제 : 유기농 식품 쇼핑몰
진행 기간 : 2023.02~2023.03 (약 1달간 진행)
역할 : 관리자 페이지 - 배송관리 / 주문관리 개발
오류관리
버전관리
업무 환경 구성 (협업툴 구성)
발표 ppt제작
목차
1. 개발환경
2. 모델링
3. 협업툴
4. 기능 구현 목표
5. 핵심 기능
6. 후기
1. 개발환경
| 개발환경 | Windows 10, MacOS, Spring Tool Suite, Visual Studio Code |
| 개발언어 | JAVA, jQuery, JavaScript, HTML 5, MyBatis, JSP, Node.js, Bootstrap5, Vue.js 3, CSS3 |
| 서버 | Apache Tomcat 9.0 |
| 형상관리 | GitHub |
| DB관리 | AWS, MySQL |
| API | Google Charts, Cart.js, Highcharts, 카카오 지도, fontawesome |
2. 모델링
- 쇼핑몰을 관리하는 관리자 페이지 / 쇼핑몰을 이용하는 소비자 페이지로 나누어 개발
- 관리자 페이지 front : JSP사용
- 소비자 페이지 front : Vue.js사용
2-1. 유스케이스
3. 협업툴
3-1. Git : https://github.com/DaEunPark/Greener.git
GitHub - DaEunPark/Greener
Contribute to DaEunPark/Greener development by creating an account on GitHub.
github.com
3-2. Google sheet
- 개발 목표, 진행 상황 공유
- 버전 관리 진행
3-3. Trello
- 공통 과제 공유
- 회의록, 작업물 공유
4. 기능 구현 목표
1) 조건별 주문 조회 : 전체 조회, 주문 번호, 주문자 이름, 상품 번호, 정렬 순서(가격 높은 순, 가격 낮은 순, 최신 주문 순, 오래된 주문 순)
-> 조건 지정 없이 조회 버튼 클릭 시 전체 조회
-> 주문 번호 : 동일 조건으로 검색
-> 주문자 이름 : 포함 조건으로 검색
-> 상품 번호 : 동일 조건으로 검색
2) 1페이지당 10개 목록씩 페이징
3) 주문 번호 클릭 시 상세 주문 내역 조회
4) 상세 주문 내역 조회 페이지에서 주문 취소 (관리자 기능)
5. 핵심 기능
1) 조건별 주문 조회 & 2) 1페이지당 10개 목록씩 페이징
- ajax를 통해서 front단에서 지정된 조건을 받아 controller로 넘겨주었다.
- controller는 넘겨받은 조건을 지정된 쿼리문으로 보내 data를 받아온다.
- data를 받아올 때는 1페이지당 10개 목록씩 불러올 수 있도록 페이징 해서 불러온다.
- 화면에 출력해준다.
- 처음에는 주문자명 조건을 동일 조건으로 설정했었는데 팀원들과 리뷰 시간을 가지면서 포함 조건으로 수정하게 됐다.
- 정렬기준에 따른 목록 순서 변경을 ajax로 비동기처리되는 영역에서 설정하려고 했는데
이럴 경우 이미 페이징 되어 불러온 페이지 내에서만 정렬되는 논리적 오류가 발생해
아예 쿼리문으로 조정할 수 있도록 변경해서 진행했다.
3) 주문 번호 클릭 시 상세 주문 내역 조회
- 주문 번호 클릭 시 해당 주문 번호를 controller로 보내서 DB로 보낸 뒤 데이터를 받아와 화면에 출력해 준다.
- 상세 주문 조회 페이지에서 목록 버튼을 누르면 주문관리 초기 화면으로 돌아간다.
6. 후기 및 배운 점
- 처음으로 진행하는 프로젝트라 조건별 조회 기능을 구현하는 데에 애를 많이 먹었다.
=> 처음에는 코드로 모든 조건을 짝지어서 구현하느라 총 30개가 넘는 조건을 전부 지정해 코딩했는데,
나중에 query문으로 공백처리를 이용해 더 쉽게 조건을 지정할 수 있다는 것을 하다 보니 알았다.
=> 쿼리문을 좀 더 공부해야겠다는 생각이 들었고, 이를 계기로 sqld개발자 자격증을 취득했다.
- 페이징을 통해 화면을 구현할 때 div태그를 통해 화면 영역에 비동기식으로 처리될 부분을 잡아주고
해당 영역에 로딩될 페이지를 따로 제작하는 식으로 처리했는데,
수업을 들을 때는 이런 방식으로 진행하지 않아서 애를 많이 먹었다.
- Map방식을 실전에서 사용하는 법을 배웠다.
key를 통해 값을 설정하고 가져오는 것
- front페이지도 제작하면서 진짜 풀스택 방식으로 진행을 했는데,
해보니까 재밌었고 bootstrap버전에 따라 같은 값을 지정해 줘도 다르게 먹어서 마지막 통합 과정이 좀 힘들었다.
- Git에 소스코드를 올릴 때는 aws연동되는 비밀번호를 꼭 unchaned로 가려준 뒤 업로드하자!!!!!
=> 중간에 한 번 aws데이터를 완전히 날린 적이 있었는데 다행히도 로컬로 백업해 둔 파일들이 있어서 빠르게 복구할 수 있었다.
=> 비밀번호도 너무 쉬운 걸로 지정해두지 않기.
- 마지막에 쿼리문을 통해 쉽게 코딩할 수 있다는 방법을 스스로 깨닫고 나니까 훨씬 더 스스로가 성장을 할 수 있는 계기가 되었다.
역시 나는 실전형 사람이라는 생각이 들었고 이걸 과연 내가 할 수 있을까 진짜?라고 생각했는데,
아 어떻게든 할 수 있지!!라는 자신감을 가지게 되었다.
수업 시간에 배웠던 것들을 직접 활용할 수 있게 됐다는 것만으로도 뿌듯한 프로젝트였다.
댓글