[React]공공데이터 포털 API 신청(+적용 2022.11.11)

1. 우선 공공데이터 포털에 들어가서, 로그인을 진행한다.(당연)

2. 마이페이지 -> OPEN API -> 인증키 발급 현황 

   인증키가 있다면 3 / 없다면 "일반 인증키 재발급" 

 

3. 이전 과정이 되었다면,  원하는 api 검색.

 

 

4. 오픈 API 선택 후,  "활용 신청" 선택.

5. 대충 활용 목적 작성. -> 활용신청. (신청 후, 길어야 3일. 대부분 2분만에 될거임.)

그동안 활용신청 페이지에 있는 가이드북을 확인해보자.

6. json으로 할것이기에 뒤에 resultType=json 으로 붙혀주고, Call Back url이 http://apis.data.go.kr/6260000/FoodService/getFoodKr 이니 endpoint를 지정한다.

 

client/src/Config.jsx

//SERVER ROUTES
export const API_URL = 'http://apis.data.go.kr/6260000/FoodService/getFoodKr';
export const API_KEY = '본인이 받은 인증키 값(인코딩 되어있는걸로!!! 디코딩은 응답 안옴)';

client/src/compontent/LandingPage/LandingPage.jsx

useEffect(()=>{
    
        const endpoint = `${API_URL}?serviceKey=${API_KEY}&pageNo=1&numOfRows=10&resultType=json `;

        fetch(endpoint)
        .then(response => response.json())
        .then(response=>{
            console.log(response)
            
        })
    },[])

 

진행하면, 아래와 같이 API를 잘 불러오는 것을 알 수 있다.

주의사항.

대부분 컴퓨터는 사이트설정으로 유해한 사이트 차단으로 인해 http로 오는 API의 경우, cors로 API 응답이 안올때가 있다.

-> 해결 방법. 상단 url 옆에 i 모양 혹은 자물쇠 모양을 누르고, 사이트 설정 -> 안전하지 않은 콘텐츠 -> 허용

 

restful하게 작성된 api이므로, 가이드북에 따른 가이드라인에 따라 형식/ 인자를 정확히 맞춰줘야 응답이 정상적으로 온다.

 

p.s.

대부분 API들은 프론트에 직접 연결되있는 경우는 드물지만, 연습이니 직접 연결을 진행하였고,

원래는 API 형태가 본인이 원하는 형태랑 다르기에 백에서 전처리과정을 거친 후, 원하는 정보를 본인의 입맛대로 변환해서 사용하는 편이다.