1. API 도입 계기
졸업가능 서비스를 배포하고 있는 데, 졸업요건조회와 인기교양추천 서비스는 한번 확인하면 다음 접속까지 텀이 오래 걸릴 거라고 생각했습니다.
따라서 사용자가 꾸준히 확인할 수 있는 어떤 것이 있을 지 고민을 했는데, 채용정보 API를 연동하여 보여주면 사용할 수 있는 컨텐츠가 늘어날 뿐만 아니라 사이트에도 꾸준히 방문할 수 있을 것이라는 기대감으로 도입하게 되었습니다.
1-2. 어떤 API를 사용할 것 인지
도입할만한 채용 API는 3개가 있었습니다.
3개의 API 모두 설명이 잘 적혀있어 적용하기에 크게 어렵지않아 보였습니다.
하지만 저는 3개의 API중에서 공공데이터 API를 선택하기로 했습니다.
- 트래픽 허용량이 제일 높았습니다.
사람인과 잡코리아는 일 최대 500건 이었는데, 공공데이터는 1000건으로 트래픽을 2배 높게 사용할 수 있었습니다. - 개발 인증절차가 간단했습니다.
사람인과 잡코리아는 해당 회사에 따로 신청서를 제출해서 인증을 받아야하지만 공공데이터의 경우 자동 승인을 해주기 때문에 더 빠르게 개발을 진행할 수 있었습니다.
하지만 제가 선택한 공공데이터 API의 경우 공공기관 채용정보만을 보여주고 있습니다.
사기업 데이터도 함께 보여줄 필요가 있는 경우에는 다른 공공데이터와 함께 연동하거나 사람인&잡코리아 API를 붙여야하는 한계가 있습니다.
2. API 적용
tanstack/query를 사용하여 API 데이터를 핸들링했습니다.
const { data } = useQuery({
queryKey: ["recruitList", currnetPage],
queryFn: () => fetchRecruitListQuery(currnetPage),
staleTime: 600000,
placeholderData: keepPreviousData,
});해당 API에 데이터가 업데이트 되는 시기가 10분이 걸리기 때문에 구현 코드에서도 staleTime을 10분으로 맞춰 한번 fetch된 데이터를 캐싱하여 불필요한 요청을 줄이고자 했습니다.
또한 페이지네이션에도 대응하기 위해 placeholderData옵션을 사용하여 새 데이터가 요청되는 동안 마지막으로 성공한 fetch 데이터를 사용하고자 구현했습니다.
2-1. 적용 화면
적용한 화면 UI는 사진과 같습니다.
인기교양추천에서 사용한 UI를 재사용하여 빠르게 구현하였습니다.
3. 적용 후
공고 건수가 많고 고용형태/지역 등 필터링해야하는 경우가 많아 검색 및 필터링 기능이 필요합니다.
현재는 공공기관 공고만 올라와있는데, 추후에 사기업 공고도 함께 연동하여 볼 수 있게 구현하면 좋겠다는 생각을 했습니다.
채용 공고 페이지를 만들었는데, 현재 모바일 UI에서 어떻게 접속 경로를 설정할 것인지를 생각해볼 예정입니다.
현재로서는 가장 메인 기능인 졸업요건조회 및 인기교양추천은 바로 접속할 수 있도록 푸터바에 남기고 공고는 마이페이지와 더불어 더보기 탭으로 변경하여 접속할 수 있게 만들 예정입니다.
또한 공고 이외에도 유용한 API 혹은 기능을 추가하여 사용자가 꾸준하게 접속할 수 있도록 개발해야겠다는 생각을 가졌습니다.
