카카오 지도 API를 사용한 아파트 실거래가 매물 정보 웹 사이트 구현

프로젝트 주제

서울 아파트 실거래가 매물정보(매매가, 전용면적, 층수)를 보여주는 웹 사이트 구현

(xml 파일을 파싱해와서 출력해주는 형식이기 때문에 역삼과 고덕 부근 한정해서 개발하였음)

 

 

개발 기간

9/3 하루

 

 

팀원 수

본인 포함 2명

 

 

사용 언어

HTML, css, JavaScript, Bootstrap, Jquery

 

 

---

 

1. Main.html

• Bootstrap을 사용한 프론트 화면을 구성
• Kakao map API를 사용하여 지도 정보 출력
• 지도 위의 Marker 구현
• 상단 우측 Login 기능 구현

 

 

• 지도에서 지역을 검색하게 되면 그 지도 범위에 포함하는 매물 정보들이 마커로 표시된다.
• 마커를 클릭하면 우측에 아파트 단지 정보와 함께 매물 정보들이 출력된다.
• 한 아파트에 여러 개의 매물 정보가 있다면 여러 개의 매물 정보가 모두 출력된다.

 

 

2. login.html

• db를 아직 배우지 않았기 때문에 로그인 버튼 클릭 시, 로컬저장소에 들어있는 정보와 비교해 유효성검사를 실시한다.

 

3. signup.html

• 이름, 이메일, 비밀번호, 비밀번호2 넷 중 하나라도 입력을 하지 않고 회원가입 버튼을 누르게되면 입력하라는 경고창이 뜬다.
• 회원가입이 완료되면 완료되었다는 창이 뜸과 동시에 로컬스토리지에 저장된다.
• 확인 버튼을 누르면 회원 정보 확인 화면이 뜬다.
• 로컬스토리지에서 정보를 받아와 출력한다.