프로젝트
-
[개인] DLD Project - 중간 점검프로젝트 2023. 3. 28. 13:19
아직 미완성이지만 일단 지금까지 개발한 것을 시뮬레이터를 통해 확인해 보았다. (경로 표시하는 건 프로비저닝 테스트 완료 후 추가할 예정) 아직 기능 개발이 안된 부분도 있고, 자잘한 버그도 있고, UI도 손봐야한다. 인프라 측면에서는 EC2 인스턴스를 2개 사용하던걸 1개로 줄일 예정이며, 그 하나의 인스턴스에 각각의 도커 컨테이너로 node.js, mongodb를 관리할 예정이다. (이미 mongodb는 container에 있음) 일단 인프라 부분을 마무리하고 프로비저닝 모드로 내 핸드폰에서 테스트를 해봐야겠다. React Native를 깊게 알지는 못하지만 사용하면서 기본적인 부분들은 파악을 했고 Redux toolkit으로 상태 관리를 하며 다시 한번 리덕스의 소중함을 체감했다. (간단한 앱인데 ..
-
[개인] DLD Project (6) - Docker를 이용한 MongoDB 설치 & 서버 연결 🐋프로젝트 2023. 2. 24. 11:47
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 읽어보면 좋을 내용 왜 굳이 도커를 사용해야할까? 왜 굳이 도커(컨테이너)를 써야 하나요? - 컨테이너를 사용해야 하는 이유 컨테이너는 서버 애플리케이션을 배포하고 서버를 운영하는 표준적인 기술이 되어가고 있습니다. 하지만 처음 사용해본다면 그 장점이 잘 와닿지 않을 수도 있습니다. 왜 굳이 도커 컨테이너를 www.44bits.io Docker compose로 컨테이너 생성하기 [MongoDB] DB 털림 (랜섬웨어) 발견 아침에 테스트 앱에서 데이터가 보이지 않았다. docker 컨테이너 문제인가 싶었으나, 확인해 보니 mongodb 컬렉션이 사라졌다. mongo db log를 확인해 보았다. dropDatabase..? $ sudo d..
-
[개인] DLD Project (5) - 지도상 두 좌표 사이 거리 구하기 (feat. Haversine 🤔)프로젝트 2023. 2. 23. 11:47
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 현재 내 위치에서 목적지까지의 거리를 구하여 사용자에게 보여주는 기능을 구현해 보자. Google Maps Distance Matrix API를 통해 지점 간의 거리 데이터를 가져올 수 있다고 하며, 검색해 보면 해당 API를 통해 기능을 구현한 블로그 글들도 나온다. 하지만 난 해당 API를 사용하지 않기로 했다. 왜냐하면 우리나라에서는 대중교통을 이용했을 때의 거리만 조회할 수 있도록 한정되어 있기 때문이다. 이는 이번 프로젝트의 주제와는 거리가 있기에 계산식을 통해 두 지점 간의 거리를 구하기로 했다. (사실 걷는 사람 입장에서는 대중교통을 통한 거리나 직선거리나 도긴개긴이다🥲) 처음에는 단순히 두 지점의 좌표를 알고 있기에 어릴 적..
-
[개인] DLD Project (4) - Google map Polyline프로젝트 2023. 2. 14. 22:49
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 Google map polyline을 통해 구글맵 위에 도형을 그릴 수 있다. 나는 불필요하게 Google polyline 객체 생성하는 걸 지양하고자 사용자가 특정 버튼을 클릭해야 지도상에 도형이 그려지도록 했다. const handleDisplayPolylineButton = () => { // localstorage에 저장한 좌표배열 추출 let pathList = localStorage.getItem('pathList'); if (pathList === null) { alert('No path data.'); } pathList = JSON.parse(pathList); // 도형 객체 생성 const flightPath = new..
-
[개인] DLD Project (3) - Google map Autocomplete 외프로젝트 2023. 2. 12. 18:19
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 Google Map API 연동 작업 1. React 환경에서 Google palce API 사용 googlemaps/react-wrapper 설치 후, Wrapper 컴포넌트를 사용한다. 해당 컴포넌트를 가장 바깥쪽에 두어야 하위 컴포넌트에서 google map API를 정상적으로 사용할 수 있다. Wrapper의 apiKey 프로퍼티에는 구글 프로젝트 생성 시 발급된 API Key를 입력하면 되고, libraries 프로퍼티에는 추가적으로 사용하는 라이브러리를 입력하면 된다. import { Wrapper } from '@googlemaps/react-wrapper'; ... const App = () => { return ( ); }..
-
[개인] DLD Project (2)프로젝트 2023. 1. 11. 13:15
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 이 프로젝트에서는 지도를 표시해야 하며, 이를 위해 구글 API를 사용하기로 결정했다. 구글 API를 사용하기로 한 이유는 해외에서도 사용할 수 있어야 하기 때문이다. 비용에 대한 고민은 안 했는데, 왜냐하면 앱스토어에 어플 배포하는 것이 목적이긴 하나, 이걸 사용할 사람은 나밖에 없을 것이기 때문에 비용이 많이 나와봤자 얼마나 나오겠나 싶은 생각을 했기 때문이다. (+ 지도 API에 한정된 건지는 모르겠지만 현재 기준 매달 200$ 바우처가 지급된다) 구글 맵 API 테스트 구글에서 제공하는 지도 관련 API는 다양하다. 그 중 Directions API를 테스트해보기로 했다. Directions API는 지도상에서 출발지-도착지까지의 ..
-
[개인] DLD Project (1)프로젝트 2023. 1. 9. 23:38
틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 나는 낯선 곳에 가면 꼭 지도 어플을 연다. 어플에서 잠시 시선을 떼고 '이쯤으로 가면 되겠지' 싶어 걷다 보면 잘못된 길로 새곤 한다. 그렇기에 더더욱 지도에 시선을 고정하고 다닌다. 이러다 보니 주변 건물이나 풍경을 못 보고 지나친 적이 많다. 만약 내가 엉뚱한 길로 가기 시작할 때 누군가 알려준다면, 지도 대신 주변을 구경하며 걸을 수 있겠지? 이게 이 프로젝트를 시작한 이유다. DLD는 Don't Look Down을 줄인 말로, 고개 숙여 지도를 보는 것에서 벗어나 주변 풍경을 구경했으면 하는 나의 소소한 바람을 나타낸 것이다.😎 기술 스택 Javascript, Typescript, React.js, Nest.js, Mongo DB..