개요
이 프로젝트는 개인으로 진행한다. 그래서 서울시 공유자전거 서비스인 따릉이를 이용하면서 불편했던 점을 개선해보려고 한다.
나는 지하철이나 버스로 두세 정거장 되는 거리는 웬만하면 따릉이로 이동하려고 한다. 그만큼 자주 이용하고 있는데...
따릉이 앱에서는 목적지를 검색해서 길찾기를 할 수 없다. 그래서 네이버 지도로 길찾기를 하는데, 동시에 따릉이 정류소를 검색할 수 없어서 찾은 길을 보면서 목적지 근처의 따릉이 정류소를 볼 수가 없다.
그래서 길찾기를 하면 출발지와 도착지 근처의 따릉이 정류소 현황을 보여주는 서비스를 만들기로 했다. 나만 겪고 있는듯한 불편함을 조금이라도 해소해보자.
사용 기술/라이브러리/API
사실 이번 프로젝트는 앞으로 진행할 팀프로젝트를 위해 여러 기술과 API를 연습한다는 생각으로 개발하려고 한다.
- HTML, CSS, Javascript
- ReactJS
- 서울 열린데이터 광장, 서울특별시 공공자전거 실시간 대여정보 Open API
- 네이버 지도 API
create-react-app
npx create-react-app [project name]이 한 줄로 최신 버전의 리액트 애플리케이션을 설치할 수 있다.
src 폴더 정리
아무것도 없는 상태에서 개발을 시작해보고 싶어서 src 폴더에서
- App.js
- index.css
- index.js
위 파일만 남겨두고 다 지웠다.
import 문제를 해결하고, App.js 내용도 깔끔하게 바꿔주었다.
npm start로 앱을 실행하면 localhost:3000에서 잘 실행된다.
깃허브 연동
jandy-ddareung으로 레포지토리를 만들고 첫번째 커밋을 올렸다.
git add *
git commit [-m "Commit Message]
git remote add origin <.git address>
git branch -M main
git push -u origin main