국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(6-프런트앤드 화면 만들고 콘솔에 결과 띄우기 시도)

 

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기는 완성할 때까지 연재됩니다.

 

(지난 이야기)

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(1-기본세팅)

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(2-샘플코드 파이썬3로 변환하기)

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(3-API 호출 성공)

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(4-API호출을 함수로 선언하고 서버에서 실행해보기)

국토교통부 전월세 실거래가 공공 API 호출해서 웹페이지에 띄워보기(5-프런트앤드와 백앤드 통신 시도 준비)

 

Photo by Joshua Reddekopp on Unsplash

 

이번에는 프런트앤드를 구성해보겠습니다

 

우리가 필요한 것은 법정동코드와 거래연월을 입력할 입력창과 조회하기 버튼입니다

 

대충 아래 그림같은 화면인데요

부트스트랩으로 금방 만들어볼게요

 

우리 html 기본 코드에는 부트스트랩 4.0.0 버전이 로드되어 있습니다

따라서 4.0.0버전의 문서를 보고 만들도록 하겠습니다

 

그럼 일단 부트스트랩 홈페이지로 들어가주세요!

 

https://getbootstrap.com 

Bootstrap

 

상단 메뉴에서 Docs를 눌러주세요

 

 

문서 페이지로 들어가셨다면 우리가 사용할 4.0.0 버전을 찾아야하는데요

우측 상단에 'Bootstrap v5.0'을 누르고 'All versions'를 눌러주세요

 

 

 

그리고 4.0을 선택해주세요

 

 

이제 좌측메뉴에서 'Components'의 'Forms'로 들어가겠습니다

 

 

Documentation을 읽어보면 다양한 예시들이 쭉 나오는데요

 

그 중에서 저는 Horizontal Form이 가장 비슷하게 생겼다 싶어서

이것을 써서 조회창을 만들어보려고 합니다

 

 

위 이미지에서 다른 것은 필요없고 Email부분이랑 버튼만 있으면 되서

이 폼의 코드를 복사해서 넣고 필요없는 부분은 없애주겠습니다

 

위 이미지에서 부트스트랩 코드를 수정한 내용에 빨간 박스로 표시해뒀으니 한 번 확인해보세요~

 

이렇게까지 하면 화면은 아래처럼 완성이 됩니다

일단 화면을 한 번 보는 게 좋겠죠?

 

app.py를 실행하고 http://localhost:5000 으로 접속해보겠습니다

 

대충 이런 모습입니다

예쁘게 정돈하는 건 마지막에 하겠습니다

일단 이번에는 이렇게 넘어가죠

 

이제 조회하기 버튼을 누르면 조회가 되어야하는데 지금은 버튼을 눌러도 아무 동작을 하지 않네요

이것은 우리가 지난 포스팅에서 작성한 search() 자바스크립트 함수를 아직 버튼에 연결하지 않았기 때문인데요

 

연결하는 방법은 button 코드에 onclick="search()" 라고 입력해주면 끝입니다

 

이제 다시 새로고침을 하고 조회하기를 눌러서 콘솔에 우리가 조회했던 내용이 뜨는지 확인해보겠습니다

 

콘솔창을 보기 위해서 F12 또는 Ctrl+Shift+I (맥은 Option+Command+I)를 눌러서 크롬 개발자도구를 열어주세요

(타 브라우저도 개발자도구가 있으니 크롬외에 브라우저를 쓰시는 분들은 해당 브라우저의 개발자도구를 이용해주세요)

 

자 한 번 해보겠습니다

 

조회하기 클릭!

 

....클릭!

경고창으로 성공이 떠야하는데....

안되네요;;;

뭔가 잘못됐습니다

 

다시 한 번 작성한 코드들을 쭉 둘러보고 해결해보겠습니다

 

 

 

(5분 뒤)

 

해결했습니다..

 

결국 코드를 리뷰해보니 자바스크립트 함수 이름을 search()로 지은 것이 잘못이었습니다

search()는 원래 뭔가 명령어로 고정되어 있나봅니다

 

search()를 searching()으로 바꾸니 되는군요

 

휴.. 다행입니다

 

다음번 포스팅은 이것을 콘솔창이 아닌 화면에 띄워보겠습니다 후후

 

그럼 기대해주시길!

 

(휴.. 정말 다행....)