[개인] DLD Project (2)

틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

---

이 프로젝트에서는 지도를 표시해야 하며, 이를 위해 구글 API를 사용하기로 결정했다. 구글 API를 사용하기로 한 이유는 해외에서도 사용할 수 있어야 하기 때문이다. 비용에 대한 고민은 안 했는데, 왜냐하면 앱스토어에 어플 배포하는 것이 목적이긴 하나, 이걸 사용할 사람은 나밖에 없을 것이기 때문에 비용이 많이 나와봤자 얼마나 나오겠나 싶은 생각을 했기 때문이다. (+ 지도 API에 한정된 건지는 모르겠지만 현재 기준 매달 200$ 바우처가 지급된다)

구글 맵 API 테스트

구글에서 제공하는 지도 관련 API는 다양하다. 그 중 Directions API를 테스트해보기로 했다. Directions API는 지도상에서 출발지-도착지까지의 경로를 얻을 수 있는 API이다. 자세한 내용은 공식문서 참고.
https://developers.google.com/maps/documentation/directions/get-directions#destination

Directions API를 통해 경로 찾기     |  Google Developers

과거에 구글 클라우드에 프로젝트는 생성해놨다. Directions API 사용설정을 진행하고 API key를 생성했다. 보안상의 이유로 해당 API key는 Directions API 호출 시에만 유효하도록 제한했다. API 호출 테스트를 하기 위해 가장 간단한 방법인 Postman을 사용하기로 했다. 요청 URL은 아래와 같고, 요청 응답이 잘 나오는 것을 확인했다.

https://maps.googleapis.com/maps/api/directions/json?destination=Montreal&origin=Toronto&key=YOUR_API_KEY

인터페이스 정의

백엔드와 프론트엔드 사이 인터페이스에 대해 정의하기로 했다. 필요한 백엔드 기능을 나열하고, 엔드포인트를 정한다. 그리고 API를 호출할 때 필요한 바디 값을 정한다. 세세한 내용은 빠졌으나 이전에 백엔드 API 명세할 때와 별반 다르지 않은 테이블이 그려졌다.

기능	엔드포인트	바디값 예	응답값
목적지 지정 정보 저장	POST /destination/save	{ “name”: “”, // 목적지 이름 “info”: {}, // 목적지 정보 (좌표 등) “regTime”: “” // 현재 시간 }
목적지 알림	POST /destination/alert	{ “destinationId”: “”, // 목적지 고유키 “result”: “” // 멀어짐: 0, 가까움: 1 }
목적지 도착시 체크	POST /destination/arrive	{ “destinationId”: “” // 목적지 고유키 }
진행 방향 저장	POST /path/save	{ “destinationId”: "", // 목적지 고유키 “currLocation”: {}, // 현재 위치 좌표정보 }
목적지 지정이력 조회	GET /destination/info	{ “destinationId” : "" // 목적지 고유키 }

프론트엔드/백엔드 파일 구조

프론트엔드는 React 사용하여 작업할 것이며 백엔드는 Nest.js를 사용할 것이다. 그에 따라 각각의 파일 구조를 구성했다. 프론트엔드의 파일 구조를 어떻게 짜는 게 좋을지 몰라 리액트 공식 문서를 봤다. 공식문서에는 기능별로 구성하거나, 종류별로 구성하라는 말과 함께 파일 구조에 대해 너무 오래 고민하지 말라고 써져 있었다. 오히려 마음이 가벼워져 Components, Pages, Publics, Utils 등으로 구분하여 종류별로 파일을 구성하기로 했다. Nest.js는 파일 구조가 거의 정해져 있다시피 되어있어 큰 고민은 없었다. 위에서 정의한 인터페이스대로 Controllers와 Services를 생성하고 각 폴더(destination, path)에 모듈 파일을 생성하여 해당 모듈을 root모듈(app.module.ts)에서 참조하게끔 했다. 그리고 하나의 프로젝트에서 프론트코드와 백엔드 코드를 같이 관리하고자 했기에 front, server 폴더를 생성하여 각각에 프론트엔드 코드와 백엔드 코드를 넣었다.

# tree -L 5 -I 'node_modules|package*|dist|*css'

.
├── front
│   ├── README.md
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src
│       ├── App.js
│       ├── components
│       ├── index.js
│       ├── pages
│       └── utils
└── server
    ├── README.md
    ├── nest-cli.json
    ├── src
    │   ├── app.module.ts
    │   ├── destination
    │   │   ├── destination.controller.spec.ts
    │   │   ├── destination.controller.ts
    │   │   ├── destination.module.ts
    │   │   ├── destination.service.spec.ts
    │   │   ├── destination.service.ts
    │   │   ├── dto
    │   │   │   ├── alert-destination.dto.ts
    │   │   │   └── save-destination.dto.ts
    │   │   └── interfaces
    │   │       ├── alert-destination.interface.ts
    │   │       └── save-destination.interface.ts
    │   ├── main.ts
    │   └── path
    │       ├── dto
    │       │   └── save-path.dto.ts
    │       ├── interfaces
    │       │   └── save-path.interface.ts
    │       ├── path.controller.spec.ts
    │       ├── path.controller.ts
    │       ├── path.module.ts
    │       ├── path.service.spec.ts
    │       └── path.service.ts
    ├── tsconfig.build.json
    └── tsconfig.json