[HappyHouse] 공공데이터를 활용한 주택 정보 검색 홈페이지(1) - Spring, Vue, Vuex

HappyHouse는 XML로 제공되는 아파트/다세대주택 별, 매매/전,월세 별 거래 내역 정보와 주택 정보 파일을 이용하여 고객에게 원하는 주택 정보를 검색(동 별, 아파트 이름 별 / 아파트 매매, 아파트 전월세, 다세대주택 매매, 다세대주택 전월세 등)할 수 있도록 하고, 그 결과를 분석해서 화면에 표시하고, 관심지역의 상가 검색과 환경 정보 등을 추가적으로 제공할 수 있다.

 

기본적으로 회원가입, 로그인 기능을 포함하고, QnA게시판 등 추가적인 기능은 Pair와 함께 의논해서 구현할 것이다.

---

11/17일 할 일
User 
- 회원가입, 로그인, 회원정보수정, 회원탈퇴

게시판
- QnA 등록, 수정, 삭제, 게시글 하나당 답변 1개

아파트정보
- 공공데이터를 받아와서 시, 구군, 동 정보를 통해 아파트 배포

 

FrontEnd

Component 구성	회원관리	게시글 관리	아파트 정보 관리
	- user	- QnA	- house

 

 

router	store
	- Vuex를 이용하여 로그인정보, 아파트정보 관리

 

---

BackEnd

RestApi를 이용하여 Controller를 구현하였다.

유저, 아파트, 게시판 

각 목록별로 DB와 연동하였고 프론트에서 요청이 들어오면

Controller -> Service -> Dao 순으로 처리되며 반환된 데이터 값은 프론트엔드로 전송되어 값을 변경한 후 화면에 뿌려준다.

---

내가 구현한 기능

나는 user부분을 맡아서 구현을 하였다.

하지만 로그인을 어떻게 처리할 지에 대해 많은 어려움이 있었다.

Vuex를 이용하여 회원 정보를 관리하는 것과, JWT를 이용하여 회원정보를 관리하는 방법이 있었다.

 

JWT 방식을 구현해보려고 했지만 처음이라 일단 Vuex를 이용하여 회원정보를 관리하고, server와 연동하였다.

 

어려웠던 점

vue 로그인 문제점

기존에는 map으로 받아왔는데 vue에서 post형식으로 데이터를넘겨줄때에는 @RequestBody 로 받아오거나 따로 받아와야 한다. map은 @RequestParams여서 받아오지를 못했다. 그래서 HttpServletRequest request로 받아와서

vue에서 로그인 데이터를 보낼 때 new FormData()에 저장을 해서 login form을 보내주었다.

 

그렇게 하니 일단 데이터는 잘 넘어갔는데 서버에서 로그인 처리를 하기위한 map에서 막혔다.

전에 로그인 구현했던 map의 구조를 보니 action, userId, userPwd 3개가 들어있었다.

나는 userId와 userPwd만 넣어서 map을 보내다보니 자꾸 nullpointer exception이 났다.

action을 같이 login으로 넣어서 보내니 로그인 처리가 되었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

*참고자료

https://github.com/HomoEfficio/demo-mall/issues/10

https://jhhan009.tistory.com/39

https://doozi316.github.io/spring%20security/2021/02/17/Spring5/ (로그인 시 보안)

 

---

결과화면(QnA)

1. QnA 목록

'

2. QnA 작성

 

3. QnA 수정

- 수정, 삭제 기능은 작성자만 사용할 수 있도록 구현하였다.

 

4. QnA 삭제

삭제기능도 마찬가지로 작성자만 삭제할 수 있도록 구현하였다.

5. QnA 답변

답변기능은 작성자를 제외한 다른 작성자만 답변을 할 수 있도록 구현하였고

현재 답변은 하나만 작성되지만 추후에 댓글기능으로 답변을 작성할 수 있도록 구현할 예정이다.

---

 

결과화면 (User)

1. 로그인 전 navbar 

로그인 하기 전에는 다른 정보들을 이용할 수 없음

2. 회원가입 화면

3. 로그인 화면

3-1. 로그인 실패

4. 로그인 후 navbar 변경

5. 회원정보 조회

Vuex에 있는 userInfo 정보를 받아와 화면에 출력해준다.

6. 회원정보 수정

아이디는 변경할 수 없도록 readonly 처리를 해주었다.

6-2. 회원정보 수정 완료 후 회원정보 조회

회원정보 수정 요청이 들어오면, Vuex의 userInfo를 바로 업데이트 해주었다.

7. 로그아웃, 회원탈퇴

로그아웃 및 회원탈퇴를 누르면 다시 Home화면으로 돌아온다.

---

 

- 추가기능 
회원관리
1. 회원가입 시 이메일 인증기능
- 아이디 중복체크 버튼
2. 비밀번호 작성 시 이메일 인증기능
- 비밀번호 수정하기(이메일 인증기능)
3. admin계정으로 들어갔을 시 공지사항 글 작성하게

게시판
1. 댓글기능
2. 공지사항 페이지 만들기
3. 아파트 관련 뉴스 크롤링

아파트 정보
1. 지도 연동
2. 아파트 이미지 변경
3. 주변 상권 받아와서 정보 알려주기(교통, 편의시설 등등)
4. 찜하기 기능을 이용하여 원하는 아파트 찜하기 기능

추가기능
1. 일대일 채팅상담 기능