공공데이터를 활용하여 웹사이트를 개발할 때 도움되는 4가지 지식 정보.

IT/웹서비스|2020. 10. 4. 08:57

"공공데이터를 활용하여 웹사이트 개발 - 워드프레스 사용"


공공데이터 내역을 먼저 확인할 필요가 있습니다.

 

한장으로 정리한 빅데이터 제공 기관 리스트 및 제공 유형(6개 기관)

기업이 보유한 데이터를 구매해서 서비스를 개발하고 활용하는 방안을 권장하기 위한 데이터 거래소 출범에 대한 기사인데, 데이터의 구매 뿐만 아니라 무료로 사용할 수 있는 다양한 데이터의

funfundata.tistory.com

 

공공데이터 포털은 정부에서 운영하는 공공데이트 제공 사이트 입니다. 파일 데이터, 오픈 API 등 다양한 방식으로 사용자의 편의에 따라 사용가능하도록 많은 데이터를 제공하고 있습니다.

국가에서 보다 중점적으로 데이터를 오픈하고 사용을 권장하며 보다 더 많은 질좋은 데이터 관련 사업이 활성화 되기를 바라고 있습니다. 아래 기사를 참조하시면 알 수 있습니다.

 

 

 

 

 

 

--> 서울경제 데이터 거래소 관련 뉴스 내용 중 발췌(2020년 5월 12일)

" 기업이 갖고 있는 방대한 고객 행동 및 금융정보를 암호화해 사고팔 수 있는 '데이터 거래소'가 11일 출범했다. 정보를 구입한 기업은 이를 토대로 맞춤형 상품을 개발할 수 있을 것으로 기대된다. 다만 데이터 활용을 못하는 기업은 경쟁사에 뒤처질 수밖에 없어 산업계에 '데이터 전쟁' 총성이 울리기 시작했다는 분석이다......"

 

 

   

기업이 보유한 데이터를 구매해서 서비스를 개발하고 활용하는 방안을 권장하기 위한 데이터 거래소 출범에 대한 기사인데, 데이터의 구매 뿐만 아니라 무료로 사용할 수 있는 다양한 데이터의 오픈도 정부에서 이미 진행하고 있죠.

 

 

 

 

 

많은 분들이 이런 데이터를 오픈하고 제공하는 기관에 대하여 알 수 있도록 제가 아는 선에서 제공 기관과 목록을 한장으로 정리해 보았습니다.

 

 

그 다음으로 워드프레스에서 자바스크립트 소스를 사용하는 방법에 대한 학습이 필요합니다.

 

워드프레스에서 자바스크립트 소스를 별도로 사용하는 방법

워드프레스로 공공데이터를 활용한 사이트를 개발하다 보니 자바스크립트나 JQuery를 종종 사용하게 되는 경우가 있었습니다. 당시에는 두가지 방법(직접 페이지에 소스 삽입 또는 별도 파일 작�

funfundata.tistory.com

워드프레스로 공공데이터를 활용한 사이트를 개발하다 보니 자바스크립트나 JQuery를 종종 사용하게 되는 경우가 있었습니다. 당시에는 두가지 방법(직접 페이지에 소스 삽입 또는 별도 파일 작성 후 파일 호출)로 사용하였는데, 최근에 알게된 유용한 플러그인이 있어 이 방법을 주로 사용하고 있습니다.

 

먼저 전형적인 자바스크립트와 같은 추가 소스를 개발하여 사용하는 방법은 아래 두가지로 요약됩니다.

 

 

1. 원하는 포스트나 페이지에 직접 소스 코드를 입력


첫번쨰는 자바스크립트나 제이쿼리와 같은 소스코드를 직접 포스트나 페이지에 작성하는 방법입니다. 페이지나 포스트를 작성할 때 텍스트 입력 모드가 있는데 이 텍스트 입력모드에서 직접 소스코드를 사용하면 해당 포스트나 페이지에서 해당 자바스크립트 소스를 사용할 수 있습니다.

 

 

 

 

특히, 제이쿼리와 같은 경우 워드프레스에서는 제이쿼리의 #문구를 jQuery문구로 대체해서 사용해야 한다는 점만 이해하고 변환해서 사용하면 됩니다.

 

 

2. 별도 소스코드 파일로 작성하여 호스트에 업로드 후 호출 사용


두번째는 소스를 직접 작성 후 파일로 저장하여 페이지에서 호출하여 사용하는 방식입니다. 위의 소스코드를 별도 자바스크립트 소스파일로 저장하여 WP-Contents 폴더 밑에 Plugin 폴더에 저장하여 숏코드 'insertJS'를 호출하여 사용하면 됩니다.

 

 

3. 플러그인 사용


위 두가지 방법외 제가 추천하는 방법은 마지막 세번째 방법입니다. 이 방법은 파일로 저장하여 서버에 올린다음 숏코드로 호출하는 등 별도 서버에 접속해 파일 업로드를 할 필요도 없고, 포스트나 페이지에서 직접 소스를 작성하여 활용하다 에러발생하는 것보다 효율적인 것 같습니다.

 

 

 

 

제가 알게된 플러그인은  Insert PHP Code Shippet이라는 플러그인인데 이 플러그인으로는 바로 작성하여 숏코드 형식으로 자바스크립트나 JQuery를 사용할 수 있습니다. 

 

 

그리고 나서 공공데이터에서 제공하는 오픈 API를 자바스크립트로 활용하는 방법을 학습하면 됩니다.

 

워드프레스 https에서 공공데이터 오픈 API 사용 방법 - JavaScript기준

안녕하세요 직장인 블로거 입니다. 이번시간에는 워드프레스로 사이트를 개발하는 과정에서 사이트가 https이고 공공데이터를 오픈 api로 호출하여 자바스크립트에서 사용해야 할 경우 사용방��

funfundata.tistory.com

 

1. Insert PHP Snippet 플러그인 설치 및 활성화

먼저 위와 같이 PHP와 자바스크립트를 한 페이지에 작성하여 숏코드로 사용할수 있는 기능을 지원하는 플러그인을 설치하여야 합니다. 워드프레스 대쉬보드의 플러그인 메뉴에서 Insert PHP Snippet플러그인을 검색하여 설치 및 활성화 하시기 바랍니다.

 

 

2. 신규 PHP 소스 작성 및 저장

 

다음으로 원하는 PHP 소스를 작성합니다. Add New PHP Code Snippet을 눌러 신규 소스 코드 입력창을 열은 다음 처음 <?php ?>을 입력하여 PHP 파일임을 선언하고 공공데이터를 호출하도록 합니다.


그다음 해당 파일에서 자바스크립트 소스를 사용하기 위하여 <script></script> 태그를 입력하고 이 사이에 원하는 자바스크립트 소스를 입력하여 위의 PHP에서 받아들인 공공데이터 값을 자바스크립트에서 사용할 수 있도록 개발합니다. 

 

참고로 PHP변수 값을 자바스크립트로 이관하기 위해서 사용하는 명령어는 'var object= <?php echo $contentId; ?>;'입니다. object라는 자바스크립트 변수에 contentId라는 PHP변수 데이터를 치환하는 명령어 입니다. 

 

-> 관련한 모든 소스는 위 링크에 표스된 블로그에 포함되어 있습니다.

 

이렇게 작성된 파일의 명을 입력하여 최종적으로 저장하면 해당 파일의 숏코드가 생성됩니다. 이 숏코드를 사용하면 워드프레스 사이트에서 자바스크립트를 사용할 준비가 됩니다. 

 

 

 

 

 

3. PHP소스파일 숏코드 Copy

 

이제 만들어진 파일의 숏코드를 Copy합니다. 향 후 이 숏코드를 가지고 있는 페이지가 어디인지 관리를 하면 소스파일 수정이 용이하므로 이력관리를 잘 하기 바랍니다. 

 

 

4. 해당 소스코드를 표시하고자 하는 워드프레스 포스트나 페이지에 숏코드 삽입

 

숏코드를 원하는 포스트나 페이지에 입력하면 끝입니다. 이렇게 작업을 하면 https환경에서도 자바스크립트로 공공데이터를 호출하여 화면에 표시할 수 있는 워드프레스 웹사이트 개발을 할 수 있습니다

 

 

 

마지막으로 공공데이터를 자바스크립트와 PHP로 사용하는 방식에 대한 학습 하시면 됩니다.

 

공공데이터 오픈 API 사용 방법 - PHP버전(관광데이터 기준)

정부에서 제공하는 공공데이터를 활용하여 워드프레스에서 제공하는 사이트 개발에 관심이 많아 몇몇 사이트를 개발하고 있습니다. 이미 한개의 사이트는 오픈해 봤네요. 관광지도 www.kpopschools

funfundata.tistory.com

 

 

아래 PHP코드 참고하여 오픈 API로 부터 데이터를 호출하여 PHP 변수에 저장합니다.

아래 예시는 제가 신청하여 사용하고 있는 관광 데이터 소스 내역이며 본인이 발급받은 서비스 키를 입력하면 됩니다. 

 

$ch = curl_init();
$url = 'http://api.visitkorea.or.kr/openapi/service/rest/KoeService/areaBasedList?serviceKey='본인의 서비스 키 입력'&numOfRows=1000&pageSize=10&pageNo=1&startPage=1&MobileOS=ETC&MobileApp=AppTest&listYN=Y&arrange=A";

curl_setopt($ch, CURLOPT_URL, $url . $queryParams);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
$response = curl_exec($ch);
curl_close($ch);

var_dump($response);

$object = simplexml_load_string($response );

echo $object;

 

댓글()