다사다난한 Open API와 CORS - 1

새로운 프로젝트를 시작했습니다. 지난 날씨 API를 이용한 프로젝트에 이어서 공공데이터인 코로나 API를 불러와서 한국 코로나 현황을 알려주는 프로젝트를 만들어보려고 합니다. 이번엔 약간의 목적을 갖고 프로젝트를 시작했고, 그 목적은 다음과 같습니다.

• HTML/CSS/JavaScript를 통한 프론트 엔드 개발 능숙도

• 처음보는 API의 공식 문서를 읽어보고, 구조 파악 및 사용해보기

• 만드는 과정에서의 공학적 사고 역량

• 제한된 시간 안에서 완성하기 (일주일)

처음 시작은 무난했습니다. 첫 날은 프로젝트 자체에 고민을 굉장히 많이 했습니다. 일주일이란 시간 안에 완성해야하기 때문에 'Open API를 사용해서 어떻게 재밌고 심플한 웹 사이트를 만들 수 있을까'에 중점을 두고 고민을 했습니다. 그 와중에 국내에 다시 코로나 확진자 수가 급증했고(11월 27일 기준), 구상한 디자인과 퍼즐이 조금씩 맞춰지면서 국내 코로나 현황을 알려주는 '한국 코로나 바이러스 | 한코바'를 기획하게 됐습니다.

처음엔 무난하게 시작했습니다. 공공데이터 포털에서 코로나 API 활용신청을 한 후 kakao developers 사이트 디자인을 참고하여 몇시간도 안돼서 디자인과 레이아웃을 만들었습니다. 그럼 이제 불러오기만 하면 됩니다.

CORS(Cross Origin Resource Sharing)의 발생

그러나..여기서 CORS 에러가 발생하게 됩니다.

꼬박 하루동안 구글링 또 구글링, 유튜브 강의, 공식 문서 보고 또 보기..등을 하다 결국 저와 상황이 비슷한 perlpark님의 깃허브 글을 통해 결론이 나게 됐습니다. 정말 감사합니다. 😭

• 프론트 단에선 이 문제를 다루기가 쉽지 않다.

• 백엔드 단에서 응답 헤더에 올바른 Acccess-Control-Allow-Origin이 내려올 수 있도록 세팅해줘야 한다.

• 결국 이 공공데이터 API를 사용하기 위해선 서버 사이드 언어를 알아야 한다.

• 밤새자?

결론

처음엔 봐도봐도 모르겠어서 정말 바보가 된 느낌이었습니다. 지금은 조금 감은 잡은 것 같지만 아직도 이 문제에 대해 완벽히 이해하지 못했고, 해결하기 위한 그림이 그려지지 않았습니다. 그래도 조금 진전이 있는건 Node.js로 데이터를 불러오는데엔 성공했다는 것입니다.

이제 이 데이터를 HTML에 출력을 해야합니다. 겨우 한 발짝 나아간 것 같지만 시작하긴 했으니 계속 해봐야겠습니다.