공공데이터 API가져오기

☑️ 공공 DATA  API 가져오는 방법

API 주소를 가지고 온다. 날씨API, 지도API, 주소API등등..

API주소를 끌어다가 내가 코드를 작성하여 표현한다는게 어떻게 가능한 것인가?? 그것에 대해

오늘 적어본다

우선, 공공데이터 포탈에 들어가 회원가입을 진행 하였다

https://www.data.go.kr/

공공데이터 포털

로그인 한 후 데이터찾기>데이터 목록으로 들어가 원하는 데이터를 클릭한다

먼저 해당페이지에서 CSV파일을 다운로드 한다!

- CSV = 엑셀형식으로 이루어진 파일

- JSON = 자바스크립트 객체 문법으로 데이터를 구조화

: Javascript 자바스크립트언어  Object 객체 Notation 표기법  [ {    } ]

 

활용신청을 클릭하여 활용목적/이용허락범위 동의 후 [활용신청]버튼 을 클릭한다!

신청이 되면 아래 이미지처럼 마이페이지>활용신청현황에서 확인할 수 있다

 

신청이된 항목을 클릭하면 기본정보, 서비스정보, 활용신청 상세기능정보( Open API 명세 확인 가이드와 API목록)

확인이 가능하며 서비스 정보에서 Base URL , 일반인증키(Encoding) 확인할 수 있고 해당정보는

자바에서 코드를 작성할때 넣어줘야 한다

 

✔️위에서 확인한 내용을 토대로 자바 코드를 작성한다!

- 우선 환경설정을 해준다

: build.gradle, application.properties (API Base URl / API KEY 포함)

[APIController.java]

@RestController
public class APIController {
   @Autowired
   private ApiService apiService;
   @GetMapping("/api/dataService")
     public String dataApi() {
       String endpoint = "/끝나는주소";
       return apiService.getApidata(endpoint);
     }
  }

 

[ApiService.java]

@Service
public class ApiService {
  //value를 활용해서 api.base-url 과 api.key api-content-type을 가져온다
  @Value("${api.base-url}")
  private String baseUrl;
  
  @Value("${api.key}")
  private String apiKey;
  
  @Value("${api.content-type})
  private String contentType;
  
  @Autowired
  private RestTemplate restTemplate;
  
  //공공데이터를 가져오기 위한 환경설정 서비스
  public String getApiData(String endpoint)
      //     url = 시작주소 + 상세주소
      String url = baseUrl + endpoint; //시작 주소와 api가 끝나는 지점 = endpoint
      
      HttpHeaders header = new HttpHeaders(); 
      //HttpHeaders객체를 생성
      header.set("Content-Type",contentType); 
      //헤더에 "Content-Type"속성을 설정,어떤형태의 데이터를 보내고 있는지 알려줌
      header.set("Authorization","Bearer " + apiKey); 
      //헤더에 "Authorization" 속성을 설정 인증정보를 인증정보를 헤더에 추가
      //"Bearer"는 API에서 인증을 할때 사용하는 토큰타입중 하나 
      
      HttpEntity<String> entity = new HttpEntity<>(header);
      //"HttpEntity"객체를 생성 요청본문(body)와 헤더를 담을 수 있는데 지금은 헤더만 담고 있음
      ResponseEntity<String> response = restTemplate.exchange(url,HttpMethod.GET,entity,String.class);
      //실제로 HTTP요청을 보내는 부분, restTemplate.exchange메서드를 사용해서 url에 GET요청을 보냄
      //요청을 할때는 헤더정보를 담고 있는 'entity'를 사용하고 서버로부터 응답을 'ResponseEntity<String>'객체로 받고 응답데이터는 문자열로 받는다
      return response.getBody();
      //서버로부터 받은 응답의 본문(body) 부분을 반환, 이 본문에는 서버에서 보내준 실제데이터가 들어있다
     }
   }
   [코드 해석]
   - 특정URL로 부터 'GET'요청을 보내면서, 인증정보와 콘텐츠 타입을 헤더에 포함시키고, 서버로부터 받은 응답 데이터를 반환하는 역할
  

}

 

[리액트 코드 작성]

우선, yarn create react-app api-front 명령어로 api-front 앱을 설치 해 준다

[다음에서 지도 가져오기 API코드]

import {useEffect,useState} from 'react';
import axios from 'axios';

const AddressSearch = ()=> {
  const [address,setAddress] = useState('');
  const [추가주소,set추가주소] = useState('');
  const [최종주소,set최종추가주소] = useState('');
  
  const saveAxios = () => {
    axios.post("http://localhost:8080/api/addUser",{
       address : 최종주소
    })
    .then(response => alert("데이터넣기 성공!"))
   }

  //주소검색을 완료하고 사용자가 검색한 데이터를 가져와서 기능 실행하기
  const handleComplete = (data) => {
   //사용자가 선택한 기본 주소를 fullAddress 주소에 저장
   let fullAddress = data.address; // 서울 강남구 강남대로 298
   let extraAddrss = ''; //남도빌딩을 선택했을 때 층 몇호
   
   // R = Road 도로명주소  J Jibeon =지번주소
   if (data.addressType === 'R') {
     
     //bname = 특정 동이 존재하면 추가  역삼동
     if(data.bname !== '') {
        extraAddress += data.bname;
      //특정 빌딩이름이 존재하면 추가  남도빌딩
      if(data.buildingName !== '') {
        extraAddress +=
          extraAddress !== '' ? `,${data.buildingName}` : data.buildingName;
      }
      //fullAddress 모든 주소 합쳐서 정리하기
      fullAddress += extraAddress !== '' ? `(${extraAddress})` : '';
     }
     //완성된 주소
     setAddress(fullAddress);
   };
   //주소검색 버튼을 누를경우 openPostcode 기능실행
   const openPostcode = () => {
     new window.daum.Postcode({
     //oncomplete : 사용자가 주소 검색을 완료했을 때 호출하는 함수 지정
     //호출하는함수 = 주소 검색을 완료하고 나서 실행할 기능선택
     //oncomplete = 다음에서 제공  handleComplete = 개발자가 만든 기능
     oncomplete : handleComplete,
     }),open(); //실행하기
     };
     [use이펙트 활용해서 최종주소 추가]
     useEffect(() => {
      set최종주소(`${address}&{추가주소}`);
    },[address,추가주소]) //address = 선택한 주소  추가주소 = 소비자가 입력한 주소
    
    return(
       <div>
       <button onClick={openPostcode}>주소 검색</button>
       {address && (
       <div>
       <input type="text" placeholder="추가주소입력(예:아파트동/호수)"
        value={추가주소} onChange{(e) => set추가주소(e.target.value)}/>
        
        <div>선택한 주소: {address}</div>
       </div>
     )};
     
     {address && 추가주소 && (
        <>
       <p>최종 추가주소</p>
       <h5>{최종주소}</h5>
      //나중에 value값으로 최종주소를 DB에 넣어야할 때 사용 주로 최종input은 hidden으로 해서
      //소비자눈에 보이지 않게 해놓고 db에 넣어줌
      <input type="text" value={최종주소} />
        </>
      )}
     </div>
   );
  };
  export default AddressSerch;