import key from '../dataAccessKey.json'
export async function getEvents({start, end}) {
const response = await fetch(
`http://openapi.seoul.go.kr:8088/${key['authentication-key']}/json/[데이터이름]/${start.toString()}/${end.toString()}/`
);
return await response.json();
}api.js를 작성했다. codeit의 실습과 서울공공데이터 이용 방법을 참고하여 만들었다. start와 end는 인덱싱을 위한 필수 요소이다. 이 데이터를 메인 페이지의 콘솔에 찍어 데이터가 들어오는 지를 확인한다.
오류가 하나 발생했다.
Module not found: Error: You attempted to import ../dataAccessKey.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.key를 루트 폴더에 저장했는데, 그게 문제가 된 모양이다. src 폴더에 옮겨서 써야한다는 말이다. 옮기자마다 오류가 사라졌다.
BrowserRouter, Routes, Route 적용을 하고 Main 페이지를 열어볼 수 있었다. 위와 같이 제대로 불러올 수 있었다. 여기에 추가적인 테스트가 필요한데, 바로 order이 가능하냐는 것이다. 강의에서는 json api를 url에 쿼리를 추가하면서 순서도 바꿀 수 있었는데, 그게 가능한지 보는 것이 필요했다.
-> 불가능했다... 뒤에 '?order='를 추가했음에도 쉽지 않다...
서울 공공데이터를 어떻게 사용했는지 서치해봐도 url에 인자를 넣어서 정렬, 설정했다는 글은 찾아볼 수 없었다.
메인페이지에는 행사의 날짜와 예약 날짜에 따라 제일 최근 걸 3개씩 보여주는 연산을 해야한다. 원하는 항목 순으로 정렬을 하고 해당 날짜가 지났는지 안지났는지를 확인하는 연산을 해야하는데, 한번에 불러올 수 있는 데이터는 1000개, 전체 데이터수는 3000개가 넘는다.
시간이 없는 지금으로서는 데이터를 데이터의 개수만큼 불러오고 특정 항목에 따라 정렬, 필터링하는 함수를 별도로 구현해야할 것 같다.
글 수정
데이터 개수를 불러오는 코드, 데이터를 불러오는 코드를 작성하여 사용했다. 이를 첫 페이지를 불러오면서 실행해 Home에서 현재 날짜 기준 제일 최근 행사를 찾도록 하며, 불러온 데이터를 Map과 Book 페이지에 전달하도록 만들었다.
