다사다난한 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에 출력을 해야합니다. 겨우 한 발짝 나아간 것 같지만 시작하긴 했으니 계속 해봐야겠습니다.