**Kakao Maps API를 React에 맞게 포팅한 오픈소스 프로젝트 입니다.**
👀 현재(2022/09/27) Github Star 128개를 받았고, 545개의 오프소스 프로젝트에서 해당 라이브러리를 사용하고 있으며, NPM trends 를 통해 대표적인 react kakao map 라이브러리를 비교 하였을 때 현재 가장 많은 사용자를 보유하고 있습니다.
🗓 2021.08.04 - 2021.09.15 - 1.0 릴리즈 이후 이슈 사항에 대한 개선 및 리팩토링 작업 진행중
📦 2022/09/27 기준 version 1.1.4 - npm 4.4k/month
⚙️ TypeScript, React, ReactDOM, NPM, Docusaurus, TYPEDOC, GitHub Actions
→ 프로젝트 진행 이유 React에서 kakao-map 사용을 위해 리서치를 진행 하였는데, 기능 및 문서화 부분에 있어 완성도가 낮아 이를 개선 시키는 라이브러리를 제작하기로 결정하였습니다.
→ 개발 중간에 발생한 문제점과 해결 방안
이를 위해 문서화 했는데, 수작업 으로 진행하여 개발 7 : 문서화 3 의 리소스가 소모되었습니다. 이 때 문서화 리소스를 줄이기 위해 TYPEDOC, Docusaurus, Github Actions 등을 통해 자동화를 적용하여 현재는 문서화에 대한 리소스를 1 미만으로 사용하도록 하는 개선시킨 경험이 있습니다.
배포된 npm 패키지 모습, 문서 사이트 모습
42Network의 Intra API를 활용하여 내부 활동을 간략하게 SVG Badge 형태로 제공해주는 프로젝트
👀 현재(2022/09/27) Github Star 348개를 받았고, 42Intra Certified App으로 등록되어 서비스 중 입니다.
🗓 2020.10.15 ~ 2021.01.04 - 유지 보수 진행중
⚙️ TypeScript, React, Jest, heroku → vercel 전환
GDPR 이슈를 해결을 위한 인증 시스템 구현, 정보공개를 동의한 사용자에 대해서만 조희가능하도록 개선
현재 1800+@명의 사용자 보유중
JavaScript + plain text를 활용하여 SVG 렌더링을 하였지만 이후 TypeScript + React로 개선
API의 호출 제한 및 느린 응답을 개선하기 위해 Memory Cache(node-cache), Cache-Control Header를 활용
아래의 링크를 통해 해당 프로젝트를 어떻게 발전 시켰는지에 대한 기록 확인 가능
→ 프로젝트 진행 이유
github-readme-stats 오픈소스 프로젝트에 영감을 받아서 42Network에서의 활동을 외부에서 확인 할 수 있도록 하는 것을 목표로 시작하게 되었습니다.
→ 서비스를 운영하면서 느낀 경험
각국의 42Network 동료들이 오류 및 개선 사항 에 대해 이슈 및 PR 을 남겨주셨는데, 그 중 GDPR 이슈에 대해 슬랙을 통해 토론을 하게 되었으며, 이를 해결 하기 위해 각국의 42Network 동료들과 피드백을 주고 받으며, 서비스를 개선한 경험이 있습니다. 이를 통해 나라별 개인보호 정책에 신경을 써야 한다는 것과 사용자의 피드백을 통해 성장하는 것에 대한 즐거움을 알게되었습니다.
42Network 동료들이 실제 사용하는 모습
CRA 의존성이 없이 SWC(JavaScript Compiler) 와 webpack을 사용한 React 보일러플레이트
🗓 2021.11.19 ~ 진행중
⚙️ TypeScript, React, Webpack, SWC, GitHub Actions
→ 해결하고자 했던 문제
평소에 React 프로젝트는 CRA를 사용하고, webpack을 추가 설정하기 위해 craco, rewired 와 같은 도구를 사용 하였지만, 커스텀 부분에 대해서 많은 어려움을 느끼고 webpack과 bundler에 대해 제대로 모르고 있다는 부분을 해결 하고자 하였습니다.
프로젝트 구조 모습
Notion Public API를 이용한 CMS 형태의 블로그 개발
🗓 2021.10.20 ~ 2021.12.1
🙄 개발 현황 : https://jaeseokim-dev.vercel.app/f8277e124fc64866b6a576c93bd57304 (Project Page 렌더링된 모습)
⚙️ TypeScript, React, Next.js, Sass, TailwindCSS, NotionAPI, Vercel
→ 해결하고자 했던 문제
기존 운영중인 Gatsby 블로그의 낮은 버전 및 초기 구조 설계와 정적블로그의 한계 점을 해결하기 위해 Notion API를 이용한 CMS 블로그 개발 진행 중입니다.
→ 프로젝트를 진행하면서
Notion에서 제공하는 복잡한 Block의 Type을 활용하는 방법, S3 Expire Token 이슈, 증분 빌드를 활용한 SEO 최적화 방법 및 초기 로딩 시간 단축 등 다양한 이슈를 만나면서 그에 따른 경험을 쌓고 있습니다.
GitHub readme 페이지, 개발중인 서비스를 통해 렌더링한 기본적인 Notion 블록 모습
템플릿을 이용하지 않고 Gatsby.js 를 이용하여 처음부터 직접 정적 블로그 개발
👀 평균 일 60~70명의 방문자가 발생하고, 커뮤니티를 통해 글을 공유시 300명 이상의 방문이 발생합니다.
🗓 2020.08.20 ~ 2020.08.29 - (기본 베이스 완성) 이후 유지보수 진행중
🌐 https://jaeseokim.github.io/
⚙️ JavaScript, React, Gatsby, GraphQL, TailwindCSS, GitHub Actions
→ 프로젝트 진행 이유
React에 대해서 공부를 하면서 직접 블로그를 만들어 보고 싶다라는 욕구가 생겼고, 새로운 것에 대한 도전을 생각하며 프로젝트를 시작하여 정적 블로그를 개발하였습니다.
이번 프로젝트에 대해 더 자세한 내용은 아래의 글을 통해 확인 가능합니다.
Google 애널리틱스 통계, 실제 작성한 글 모습
포트폴리오 간편 제작, 공유 서비스
🗓 2020.06.12 ~ 2020.07.31
🌐 https://your-portfolio.vercel.app/
⚙️ JavaScript, React, Next.js, GraphQL, Apollo, MongoDB(mongoose), GitHub Oauth 2.0
→ 프로젝트 진행 이유
평소 프론트 공부를 진행 하면서 Next.js와 GraphQL에 대한 키워드를 접하면서 관심을 가지게 되었고, 해당 기술을 이용하여 부딪히면서 서비스 직접 만들어 보자고 도전한 프로젝트 입니다.
→ 프로젝트를 진행하면서 느낀 경험
BackEnd 부터 FrontEnd 까지 직접 개발을 진행하면서 데이터가 어떤식으로 지나오는지에 대해 확실 하게 알 수 있었던 프로젝트 입니다.
또한 배포를 진행 후 커뮤니티를 통해 서비스 공개 이후 여러 사람들이 관심을 가져 주셨고, 저 이외의 사용자를 가지게 된 첫 프로젝트 입니다.
커뮤니티를 통해 서비스 공개한 모습, 실제 동작하는 서비스 모습
Covid-19 초기에 마스크 부족으로 공적 마스크에 대한 제고 상황을 보여주는 지도 서비스 입니다
🗓 2020.03.16 ~ 2020.03.18
⚙️ JavaScript, React, Redux, AntDesign, KakaoMap
[React JS] - 공적 마스크맵 개발 후기(feat. Kakaomap)
→ 프로젝트 진행 이유
React에 대해서 처음 접한 이후 클론 코딩 말고 이제는 직접 나만의 프로젝트를 진행하자고 다짐을 하며, 최든 마스크 부족 논란과 함께 공적 마스크에 대한 API를 공개한다고 하여 해당 부분을 활용한 서비스를 만들게 되었습니다.
→ 프로젝트를 진행하면서 느낀 경험
처음으로 진행한 React 프로젝트로, API 호출 및 데이터 관리, 외부 라이브러리 사용, SDK를 이용하여 하나의 서비스를 만드는 흐름을 경험할 수 있었던 프로젝트 입니다.
해당 프로젝트에서 Kakao Map를 처음으로 React에서 사용하였고, 이 경험을 통해 위에서 기술된 **react-kakao-maps-sdk**를 프로젝트를 시작하게된 계기가 된 프로젝트 입니다.
재난 문자, 마스크맵 서비스 동작 모습 (현재 API 서비스 종료)