Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
공개 API를 이용한 공개 API를 이용한 공개 API 검색 사이트 만들기
#side_projects
3년 전
3,495
8

노하!👋

2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했습니다.

회사에서는 백/프론트 가리지 않고 하지만 그래도 프론트엔드를 더 잘 알고 좋아합니다. 그러나 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있습니다. 바로 "보여줄 데이터가 없다는것" 😂 그래서 이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용하거나 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 했습니다.

그런데 Open Api를 찾는 것도 쉽지가 않습니다. public-apis 라는 Github 프로젝트도 있지만 영어로 되어있었습니다. 그런데 한글로 정리된 곳도 없고... 그래서 만들었습니다. open-apis-korea 라는 프로젝트로 기존 프로젝트를 클론하여 하나 하나 번역했습니다. 

undefined

초반 몇 달 고생하여 현재는 모든 API들이 번역되어있는 상태입니다.(혹시 번역상 이상한 부분이 있다면 이슈부탁드립니다 🙇) 그래서 한글로 다 정리하니 행복해졌나? 그것도 아니였습니다. README에 정보를 때려 넣다보니 찾기도 힘들고 무엇보다 못생겼습니다.

그래서 또 만들었습니다. 사이트로 기존에 존재하는 Public APIs를 위한 Public API인 Public API for Public APIs 라는 Open Api를 이용하여 open-apis.dev 웹사이트를 만들었습니다.

undefined

API상에 구현된 기능이 필터링 검색, 랜덤 API 요청밖에 없어서 정말 간단하게 만들었고, 처음으로 개발자의 필수 기능 다크모드도 시행착오 끝에 적용해보았습니다.

사용된 스택 및 라이브러리는 다음과 같습니다.

  • Next.js
  • TypeScript
  • Ant Design
  • styled-components

TO DO

아쉽게도 해당 Public API 역시 영어로 된 데이터라 설명이 영어로 나오는데 간단한 서버를 구축해서 한글로도 데이터를 서빙할 수 있도록 추가 구현하려합니다.

8 comments