TSL : 2020-04-04

요약

1. 프로그래머스에서 마이리얼트립 프론트엔드 시험을 보았다.
2. 망했다ㅠㅠㅋㅋㅋㅋㅋㅋ
3. 하지만 많이 배웠다. 나 혼자 구상하고 만들면 생각하지 못할 요소가 필요했고, 그에 따른 배우지 못한 기술들도 많이 있었다. react-input-range모듈과 CORS문제에 대해서 정말 많이 배울 수 있는 기회였다.

CORS

아직도 정확하게 개념이 잡히진 않았다. 그냥 내 식으로 간단하게 말하자면 외부 api와 같은 것을 긁어 올 때, 내 프로그램의 도메인과 api의 도메인이 다르기 때문에 긁어올 수 없다는 것. CORS의 협소한 의미 정도 될 것 같다.

보통은 서버 단에서 response.setHeader("Access-Control-Allow-Origin", "*");와 비슷한 처리를 해주면 된다고 설명한다. 하지만 이번 시험은 프론트엔드 시험이여서 서버를 건드릴 수 가 없었다... https://cors-anywhere.herokuapp.com/와 같은 아주 좋은 방법을 찾았지만 왠지 문제 자료를 저 링크에 유출하는 느낌이 들어서 다른 방법을 찾다가 시간이 다 갔다.

끝나고 나서 또 다른 방법은 없을까, 연습해보려고 공공api를 만지작 거리다 xml로 된 api 자료를 받아오는 방법을 배웠다.

useEffect(() => {
    const xml = new XMLHttpRequest();
    xml.onreadystatechange= () => {
      if (xml.readyState === 4 && xml.status === 200) {
        console.log(xml.responseXML.getElementsByTagName("태그이름")[0]);
      }
    }
    xml.open("GET", "https://cors-anywhere.herokuapp.com/[api주소]", true);
    xml.send();
  }, []);

P.S. 나라에서 운영하는 공공데이터 오픈 api 중에 흥미로운 것들이 많이 있었다. 다음 toy project로 이걸 활용해서 만들어 봐야 겠다:)