1. Open DART 웹사이트(https://opendart.fss.or.kr/)의 개발가이드 > 상장기업 재무정보 탭을 클릭한다.

    Screenshot 2024-02-27 at 9.31.45 AM.png

  2. 단일회사 주요계정 API를 호출해보도록 하겠다. 개발가이드 바로가기를 클릭한다.

    Screenshot 2024-02-27 at 9.34.50 AM.png

  3. API 호출에 필요한 URL 주소 및 요청 인자, 리턴값 등의 설명을 확인할 수 있다. 화면을 내려 OpenAPI 테스트 탭에서 요청 예시와 샘플 결과값을 확인할 수 있다.

    Screenshot 2024-02-27 at 9.37.34 AM.png

  4. 위 예시 결과값은 JSON 형식이기 때문에 가독성이 떨어진다. 가독성이 좋게 형식을 바꿔서 보려면 다음 사이트를 활용하면 된다. (URL: https://codebeautify.org/jsonviewer)

    Screenshot 2024-02-27 at 9.38.15 AM.png

  5. 요청 형식 및 예시 리턴값 등을 확인했으니 해당 API를 자바스크립트 코드를 통해 호출해보도록 하자.

  6. But 호출하면… CORS에러가 떨어짐 → 서버가 아닌 곳에서 호출하는것을 막아놓은듯…

  7. 임시 해결 방안: 우회 서버 활용(참고: https://velog.io/@dejeong/공시정보-dart-OpenAPI-사용을-위한-CORS-에러-해결기) → 개인개발자가 개발한 리버스 프록시 앱을 Heroku 서버에 띄워놓은 것

    1. API 호출 URL앞에 Heroku 서버 URL(https://cors-anywhere.herokuapp.com/corsdemo)을 붙인다. (코드 예시 아래 굵은 글씨로 표시된 내용 참조)

      const API_KEY = "본인 API키 입력"
const COMPANY_CODE = "00126380" // 삼성전자 코드
const YEAR = "2022"
const REPORT_CODE = "11011" // 11011: 사업보고서 (나머지는 반기 / 분기 보고서)
let url = new URL(`**<https://cors-anywhere.herokuapp.com>**/<https://opendart.fss.or.kr/api/fnlttSinglAcnt.json?corp_code=${COMPANY_CODE}&bsns_year=${YEAR}&reprt_code=${REPORT_CODE}&crtfc_key=${API_KEY}`>)
let data = ''

const getCompanyInfo = async () => {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data)
}

getCompanyInfo()

    2. Heroku 임시 서버 URL(https://cors-anywhere.herokuapp.com/corsdemo)에 접속하여 임시서버에 대한 사용 request버튼을 클릭한다.

      Screenshot 2024-02-27 at 10.31.01 AM.png

    3. 이제 브라우저 콘솔에서 데이터를 잘 받아오는 것을 확인할 수 있다.

      Screenshot 2024-02-27 at 10.35.23 AM.png