[JS] #13-1 오픈소스 활용하기 : 카카오 우편번호 서비스

1. 오픈소스 활용하기!

 

 참조 : 카카오 우편번호 서비스 https://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

 여러 오픈 소스 중에서는 인증키를 가지고 있어야만 사용할 수 있는 오픈 소스가 있다.

 하지만 이 우편번호 서비스는 key를 따로 발급받을 필요가 없는 오픈 소스이다.

 

 위 사이트를 확인해보면 사이트에 적용하는 방법과 예제까지 모두 확인해볼 수 있다.

 그러나 코드를 그저 복붙하면 무조건 적용이 되는 것이 아니므로 오픈 소스를 나의 페이지에 적용하는 방법을 함께 알아봐보자!

 

 여기서는 iframe을 이용하여 페이지에 끼워 넣기, 항목의 예제를 그대로 적용해보려한다.

 

 

 

2. 오픈소스 적용하기!

 

1) 코드 때려넣기

 우선 비주얼 스튜디오에서 새로운 문서를 만들고 코드를 모두 붙여넣기를 하였다.

 제대로 동작할까?

 

 안타깝게도 동작하지 않는다.

 왜냐하면 우리가 이렇게 코드를 만들고 열어도 프로토콜이 없는 상태, 즉 나만 볼 수 있는 HTML문서 상태로 열리기 때문이다.

 이 문서를 제대로 동작시키기 위해선 우리가 이 페이지를 웹서버 안에서 구동시켜야지만 온전하게 기능을 작동시킬 수 있는 것이다.

 (예: https// 로 시작하는)

 

 그래서 임시로 라이브 서버를 만들어주는 곳을 이용하여 이 페이지를 임시로 구동시키려 한다.

 

2) 라이브 서버에서 문서 열기

 비주얼 스튜디오의 확장 프로그램을 활용하여 라이브 서버를 구동시키려 한다.

 아래의 그림처럼 확장 프로그램 중 Live Server 프로그램을 추가해보자.

Live Server

 이 확장 프로그램을 깔면 프로그램 하단 바에 Go Live 탭이 생긴다.

꼬 라이브~

 

 이후에 파일 형태가 아니라 폴더 형태로 파일을 열어준다(폴더 형태로 열어야 라이브 서버에서 안정적으로 적용된다).

 

 그 때 경고창이 나온다.

 지금까지 작업했던 작업 목록과 공간을 따로 저장해둘 것인지 묻는 것이다.

 필자는 저장을 해두었다.

 

 그 후 폴더가 따로 열린 뒤 오픈 소스 코드를 적어둔 문서를 연 뒤 하단의 Go Live를 클릭하면 인터넷 방화벽 관련 보안창이 뜬다.

 당연히 허용을 해준 뒤 파일을 열고 우편번호 찾기 버튼을 눌러보자.

 

잘 적용되는 모습 ^_^

 

 

 

* URL 주소 확인해보기

 url 주소에서 127.0.0.1이 떠있다.

 이것은 나의 라이브 서버라는 뜻이다.

 그리고 5500번은 서버의 전용 번호(포트번호)이기에 이 번호가 겹치면 다른 페이지는 사용이 안된다.

 

 이제 이 것을 활용하여 나의 입맛대로 코드를 수정해가며 활용하면 된다 ^_^