1. 프로젝트 소개
SSAFY 7기 1학기 마무리 프로젝트로 진행했다. 사용자가 원하는 지역의 부동산 거래내역을 보여주는 웹 사이트를 제작하는 것이 목적이다. 새로운 기술을 배워나가면서, 프로젝트 구현 기술이 달라졌다.
1. JAVA Swing
Java Swing 을 이용해 GUI 를 구축하고 XML 파일을 파싱해 아파트 거래내역을 테이블로 나타냈다. 거래내역을 보여주는 기능 외에도 API를 이용해서 선택한 아파트가 위치한 동의 오늘/내일 날씨와 주변 상권정보를 불러온다.
날씨 API의 경우 법정동 기준이지만, 제공 데이터는 행정동 이었기 때문에 행정동, 법정동 파싱 파일을 추가로 만들었다.
2. HTML + JavaScript
프레임워크를 사용하지 않고 바닐라 자바스크립트와 HTML을 사용해서 웹 사이트를 구현했다. 웹 사이트이기 때문에 많은 기능을 구현했다. 사용 라이브러리는 API 호출을 위한 Ajax와 Jquery를 사용했다. 부트스트랩을 이용해 CSS를 작성했다.
구현 기능은 로그인/회원가입, 마이페이지, 거래내여 검색, 관심지역 등록, 공지사항 게시판이 있다. 프레임워크 없이 코드를 작성했기 때문에 모듈화나 코드 정리가 잘 되지 못했다.
3. JSP + HTML + JavaScript + MySql
JSP를 사용한 서버렌더링으로 웹 사이트를 만들었다. 모든 기능과 디자인은 변경된 점이 없다. 단, localStorage로 진행된 로그인/회원가입 같은 기능들이 DB를 이용해 구현되었다.
서버는 MVC2 패턴을 이용해 구현되었다.프론트 컨트롤러 패턴을 추가했지만, 공통 코드가 없어서 추가 기능은 하지 못한다. 아이디 중복체크와 같은 몇몇 기능들은 REST API 형태로 작동한다.
데이터베이스 연결은 JDBC 드라이버를 이용해 연결했다. JSP파일은 기존에 작성된 HTML파일을 JSP에 맞게 수정했다. JSTL과 JSP 태그를 추가해 원래 로직대로 작동되도록 만들었다.
4. Spring + JSP
JSP를 이용해 구현된 사이트를 Spring 프레임워크를 이용했다. 프론트는 여전히 JSP를 이용한 SSR으로 작동된다. 이미 많은 부분이 MVC패턴을 이용해 구현되었기 때문에 DB연결, AOP 정도만 수정하거나 추가했다.DB는 MyBatis를 이용해 SQL과 코드를 분리했다.
5. Spring Boot + VueJS
최종적으로 진행한 프로젝트이다. 앞에서 프로젝트를 진행하면서 계속해서 불편함을 느꼈다. 아파트 거래내역은 법정동 단위로 나와야 하는데, API는 시/군/구 단위로 불러온다. 그래서 속도 측면에서 매우 불이익을 얻었다. 그리고, 이용자 입장에서는 아파트 거래내역 하나를 보고 싶어하지는 않을 것이다. 이용자가 원하는 것은 아파트 이다. 즉, 기준이 거래내역이 아니라 아파트여야 한다. 그러나 공공 데이터 API는 이를 제공하지 못한다. 그리고, 지역을 선택해서 지도를 이동시키는 방법도 마음에 들지 않았다. 기존 프로젝트는 하루만에 모든 걸 해야했기 때문에 수정을 하기 힘들었지만, 최종 프로젝트라서 시간이 많이 주어졌기 때문에 수정을 할 생각이다.
결국, 기존 프로젝트에서 필요한 부분만 몇개 가져오고 전부 다 새롭게 진행할 예정이다. RestAPI 기반의 CSR로 진행되기 때문에 새롭게 작성하는 것이 더 빠를 것으로 예상한다.
2. 구현 기능
- 회원 관리
- 로그인 / 로그아웃
- 회원정보 조회/수정 및 비밀번호 수정
- 회원 탈퇴 - 게시판
- 공지사항/자유 카테고리
- 작성/수정/삭제/조회
- TipTap 에디터 사용 - QnA 게시판
- 게시판 코드 재활용
- 질문 해결 상태 추가 - 지도
- 현재 지도에서 보이는 아파트 마커 표시
- 해당 아파트 클릭시 아파트이름/거래내역/가격 그래프/관련 뉴스 를 볼 수 있는 탭 띄운다.
- 아파트 즐겨찾기 추가 가능
- 현재 보고 있는 지도의 위치를 관심지역으로 추가 가능.
- 주소를 직접 검색해서 해당 주소로 지도 이동
- Kakao API를 이용해서 특정 장소 검색 후 이동 가능
- 아파트 마커와 동시에 상가정보도 불러오기 가능
- Geolocation 이용해 현재 자신의 위치로 지도 중심 이동 가능. - 통계
- 시/도 별 월별 평균 매매가와 매매횟수.
- 각 시/도에서는 구/군 별로 매매가와 매매횟수 등을 확인할 수 있다.
3. 사용 기술
백 엔드는 Spring Boot 기반으로 작성되었으며, Spring Security를 이용한 JWT 인증을 구현했다.
Vue JS로 진행했고, Vue-router, vuex 와 같은 기능도 추가했다. 부트스트랩은 이미 사용했기 때문에 Vuetify를 사용했다.
4. 일정
주말 포함 약 8일의 시간이 있었다. 회원관리와 같이 이미 구현되어있는 기능은 뒤로 미루고, 아직 구현안된 기능 위주로 먼저 진행했다.
JWT인증, 주소 검색, 지도 작업을 먼저하고 회원관리/게시판은 앞 기능이 어느정도 완성되고 추가했다.
5. 팀
백엔드/프론트엔드 2인 진행