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

카카오 지도 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 넷 중 하나라도 입력을 하지 않고 회원가입 버튼을 누르게되면 입력하라는 경고창이 뜬다.

회원가입이 완료되면 완료되었다는 창이 뜸과 동시에 로컬스토리지에 저장된다.

확인 버튼을 누르면 회원 정보 확인 화면이 뜬다.

로컬스토리지에서 정보를 받아와 출력한다.

반응형

from http://jainn.tistory.com/270 by ccl(A) rewrite - 2021-09-17 20:01:56