글 작성자: 택시 운전사
반응형

내가 데이터 고자라니! 😣

2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했다. 회사에서는 백/프론트 가리지 않고 하고는 있지만 그래도 나는 프론트엔드를 더 잘 알고 좋아하는 프론트엔드 가이이다. 그러나 모든 프론트엔드 개발자들이 알고 있듯, 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있다! 그것은 바로 "보여줄 데이터가 없다는것" 😂

내가 데이터 고자라니!

Open API를 찾아나서는 여정 🛣

이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용해서더 많이 더 적게같은 프로젝트도 진행했다. 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 해왔다.그런데 Open API를 찾는 것도 쉽지가 않았다. 계속 서칭을 해보다가 public-apis 라는 Open API를 문서화해서 잘 정리한 Github 프로젝트를 찾아서 잘 사용하고 있었다.

없으면 만들자 한글로 된 공개 API 저장소 🔧

public-apis 는 좋았지만 한가지 문제가 있었다. 바로 내용이 모두 영어로 되어있었다는 것... 누군가 한글로 정리했겠지 싶었는데 그마저도 없었다. 그래서 만들었다. 그 뒤로open-apis-korea 라는 프로젝트로 기존 프로젝트를 클론하여 하나 하나 번역했다.

open-apis-korea

 

dl0312/open-apis-korea

🇰🇷 한국어 사용자를 위한 서비스에 사용하기 위한 오픈 API 모음. Contribute to dl0312/open-apis-korea development by creating an account on GitHub.

github.com

초반 몇 달동안 매일매일 번역하는 고생을 해서 현재는 모든 API들이 번역되어있는 상태이다. 혹시 번역상 이상한 부분이 있다면 이슈를 보내도록하자!

인간의 욕심은 끝이 없고, 같은 사이드 프로젝트를 반복한다. 😈

그래서 위 저장소로 한글로 다 정리하니 행복해졌나? 인간의 욕심은 끝이 없고 같은 사이드 프로젝트를 반복한다했는가?(이런 말은 없다) 다 번역하고 보니 README.md에 정보를 모두 때려 넣어서 찾기도 힘들고 무엇보다 깃헙 저장소라 그런지 정말 못생겼다는 것이다.

지금 봐도 너무 안 이쁘다

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

open-apis.dev

 

Open APIs

Find some open APIs for your next projects

open-apis.dev

API상에 구현된 기능이 필터링 검색, 랜덤 API 요청밖에 없어서 데이터 관련된 부분은 정말 간단하게 만들었다. 대신 다른 부분에 좀 더 노력을 투자했다.

다크모드

그 첫번째가 다크모드이다. 처음으로 개발자의 필수 기능 다크모드도 시행착오 끝에 적용해보았는데, styled-components + next.js 조합으로 생각보다 하드 난이도로 구현이 되었다.

디자인

엄청 화려한 디자인은 아니지만, 최대한 정보를 가시적으로 볼 수 있도록 만드는 데에 초점을 두었다. 기본 컴포넌트들은 Ant Design을 통해서 만들었고, 필요한 CSS를 styled-components로 구현했다. 가장 마음에 드는 부분은 사이트 왼쪽에 favicon이 보여지는 부분이다. 해당 사이트의 정보를 미리 확인 할 수 있어서 정말 마음에 든다.

배포

회사에서 Next.js를 사용하고 있고, 보일러 플레이트도 만들어 놨지만 이번에 처음으로 Next.js로 배포와 서비스 작업까지 하게 되었다. 청므이라 우여곡절이 있지 않을까 싶었는데 의외로 스무스하게 진행되었다. Next.js를 만든 회사와 같은 기존에 써왔던 vercel을 통해 배포 및 도메인 구매까지 진행했는데 Github과도 통합성이 좋아서 배포 쪽으로 머리 아프게 고민할 부분이 없어서 정말 좋았다. 사용된 스택 및 라이브러리는 다음과 같다.

  • Next.js - SSR이 가능한 React 프레임워크 규격화의 힘은 대단했다.

  • TypeScript - 이제 이거 없으면 코딩 못한다.

  • Ant Design - 1시간 걸려서 만들 컴포넌트 1분안에 만들어 낼 수 있는 마법의 UI 프레임워크

  • styled-components - 컴포넌트형으로 스타일링을 하게해주는 라이브러리

  • vercel - 배포가 이렇게 쉬워도 되나 싶을 정도로 쉽게 배포 가능한 서비스

TO DO ✍️

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

반응형