cottonpup/seoul-public-library-app

서울특별시 각 자치구의 공공도서관의 현황정보를 볼 수 있는 웹 어플리케이션입니다.

서울특별시 공공도서관 현황 지도

서울특별시 각 자치구의 공공도서관의 현황정보를 볼 수 있는 웹 어플리케이션입니다.

주변 도서관 찾기 기능은 서울 중심을 기준으로 일부러 설정 해놨습니다. 해당 코드 부분을 제거하면 현재 GPS 위치로 정상 작동합니다.

개발환경 및 역할분담

• 참여인원: 프론트 1명 (개인 프로젝트)
• 개발언어: Javascript
• 기간: 2020-01-15
• 주소: https://github.com/cottonpup/seoul-public-library-app

프로젝트 개요

프로젝트의 목표는 서울에서 거주하는 학생으로서 일반 지도 어플보다 좀 더 자세히 공공 도서관의 현황 또는 최신 정보를 알 수 있는 프로젝트를 완성하고 싶었습니다. 이에 더불어 첫 프로젝트인 만큼 다양한 오픈소스 API를 경험해보고 활용해보고 싶었습니다. 개발을 배우기 시작할 때부터 항상 지도 API를 꼭 다뤄보고 싶었고, 이번 기회를 통해 정부에서 제공하는 공공 데이터 API를 활용하여 실생활에 쓸 수 있는 지도 앱을 기획하였습니다.

기술 선택 이유?

• 바닐라 자바스크립트
  • 바닐라 자바스크립트의 기본 동작과 문법을 이해하는 것은 매우 중요합니다. 특히 주니어 개발자로서 기반이 잘 다져져야 이후에 프레임워크 및 라이브러리를 활용 할 때 문제에 대해서 더 잘 이해할 수 있게 됩니다. 따라서 첫 프로젝인만큼 바닐라 자바스크립트만을 사용하여 기본이해를 다지고 개발 역량을 향상시키고 싶었습니다.
• UI 라이브러리가 없이 직접 구현한 HTML / CSS
  • UI 라이브러리를 처음부터 사용한다면 CSS에 대한 이해가 낮아질 것을 알기에, 조금 미적인 디자인이 아니여도 직접 CSS를 사용하여 스타일링하였습니다.
• 공공 데이터 포탈 / 서울 열린 데이터 광장
  • 오픈소스를 활용하여 더욱 깔끔하게 서울특별시 각 자치구의 공공 도서관의 현황 정보를 확인할 수 있습니다.
• Leaflet 지도 라이브러리
  • 본래 Goggle 지도보다 더 다양한 템플릿과 디자인을 선택할 수 있어서 Leaflet 지도 라이브러리를 선택하였습니다.

프로젝트를 통해 배운 점

• BEM methodology
  • 이번 프로젝트에서 BEM 방법론을 적용하여, CSS 클래스 네임을 작성하였습니다. Class 이름을 구분하는데 자주 어려움을 겪었으나, 이번 프로젝트에서는 Block, Element, Modifier로 분리하여 네이밍을 주었습니다. 이는 CSS 구조를 체계적으로 개선하여 빠르고 효율적으로 작업할 수 있었습니다.
• 오픈소스 활용법
  • 서울 열린데이터광장, Leaflet, geocode, Fuse 등 오픈소스를 활용할려고 노력했습니다. 이를 활용하면서 많은 다양한 오픈소스를 접하게 되었고, 프로젝트를 더욱 풍성하게 만들 수 있었습니다. 오픈소스의 도큐먼트를 읽는 법과 오픈소스의 이점, 중요성에 대해 배웠습니다.
• 지도 Clustering
  • 지도 상에 표시된 여러 개의 마커들을 군집화하여 보다 깔끔하고 유용한 지도를 표시하였습니다. 생각보다 서울에 많은 도서관이 존재하였기에 단순히 모든 마커를 나열하는 것보다, 지도 클러스터링 기능을 이용해서 밀집된 지역에서는 여러 마커를 하나의 클러스터로 표현하여 지도의 가독성을 향상시켰습니다.
• Babel과 Webpack 트랜스파일러를 이용한 ES6 환경 구축 (Safari에서 Static class 지원이 안되는 문제)
  • 저는 ES6에 도입된 static class를 사용하여 코드를 작성하였고, Safari에서 미지원되어 지도가 로드되지 않는 문제를 겪었습니다. Babel과 Webpack을 사용하여 Safari에서도 지원될 수 있게 코드를 폴리필하였습니다.
• Vercel Serverless Variable
  • 따로 서버를 구축한 백엔드가 없기 때문에 Vercel Serverless Variable을 활용하여 API key를 숨겼습니다.
• 모듈화
  • CBD(component based development)을 기반으로 모듈을 사용하여 파일들을 좀 더 깔끔하게 정리하였습니다.
• Font awesome display: none; 이 적용이 안되는 문제
  • CSS 링크 태그 이전에 fontawesome 링크 태그를 삽입하여 display: none이 적용이 안되었던 문제를 겪었습니다. 웹 브라우저 파싱과정에서 스크립트나 링크 태그의 순서가 중요하다는 것을 알게 되었습니다.

프로젝트 진행과정

https://bluberrie06.notion.site/d3e554d36a0743acaf4ee551664564c1?v=5791f6aea3554a0fab24f944e8df7320&p=a2f1d00c56d7484e8efe597315828c17&pm=s