[프로젝트-Stroll] Devlog-2

2번째 devlog에서는 저번에 못했던 DB Schema 와 API 에 관한 내용에 대해 적을 예정인데, 그전에 이번 프로젝트에 관해 좀 더 설명을 해야할 것 같다.

이번에 첫 프로젝트로 맡게 된 Stroll은 자신의 산책로를 지도에 마커를 5개 찍는 방식으로 표시한 후 간단한 사진과 후기를 남겨 등록을 하는 기능이다. 이렇게 추가된 산책로는 다른 유저들도 확인할 수 있으며 댓글과 사진을 남길 수 있다. 또한 산책로를 추가할 때 산책로의 태그를 설정하여 태그별로 분류가 가능하다.

그래서 어떤 스택들을 사용하기로 했는지 다시 한번 짧게 나열하자면 아래와 같은 스택들(모듈 포함)이 사용되었다.

• 프론트
  - React, React-router-dom, Ant Design, Axios, kakao-map api, 날씨 api, 미세먼지 api

• 백
  - Node.js, Express, cors, jwt, crypto, mysql, sequelize, sequelize-cli
  

내가 맡은 백엔드에서는 Express 를 이용하여 server frame 을 짜고 mysql, sequelize, sequelize-cli 를 이용하여 DB 관리를 하기로 하였다.

Database Schema

1. Users(유저 정보)

   • email(이메일), password(비밀번호), username(닉네임)

2. Trails(산책로 정보)

   • userId(Foreign key), locationId(Foreign key), categoryId(Foreign key), imageId(Foreign key), title, review, adminDistrict(행정구역 ex) Seoul)

3. Comments(댓글)

   • userId(Foreign key), trailId(Foreign key), imageId(Foreign key), text(리뷰 내용), rating(리뷰 점수)

4. Images(리뷰 사진)

   • fileName(사진이름), fileAddress(사진 저장위치)

5. Locations(산책로 위치)

   • location1(첫번째 마커), location2(두번째 마커), location3(세번째 마커), location4(네번째 마커), location5(다섯번째 마커)

6. Categories(산책로 테마)

   • tag(태그 - 산책로 분류)

위의 정보를 dbdiagram.io 를 이용하여 정리해보았다.

Trails, Comments 에서 "camelCase"로 적혀서 연결된 Id들은 Foreign key 로 존재한다. ex) userId, locationId, etc...

Schema flow

DB에 저장되는 데이터들이 어떤식으로 사용되는지 설명하자면,

1. 회원가입/로그인

먼저 유저가 회원가입 요청을 보내려면 자신의 email, password, 그리고 username을 설정하여 보내야 한다. 이 값들은 요청의 body 에 들어가며 Users 에 추가가 된다.

로그인 같은 경우는 이미 존재하는 값을 요청의 body 에 존재하는 email, password 와 비교하여 일치하면 토큰을 지급하는 방식이 된다.

2. 산책로(Trail) 추가

산책로를 추가를 한다고 할 때, 필요한 데이터는

* 1. 유저가 찍은 5개의 마커들의 정보(위도, 경도) -> Locations에 저장
* 2. 선택한 산책로의 태그(ex 야경, 바닷가, 조용함) -> Categories에 저장
* 3. 유저가 정한 제목(title), 후기(review) -> Trails에 저장
* 4. 추가적으로 사진 추가 선택 가능 -> Images에 저장

위처럼 필요한 정보들을 받아 DB에 추가한 후, 각 추가된 테이블의 PK(Primary Key)를 Trails에 Foreign Key로 받아와 추가할 예정이다.

3. 댓글(Comments) 추가

DB에 산책로들이 추가가 되었다면, main 페이지로 갔을 때 kakao map api 를 이용해 나타낸 지도에 산책로들을 표시하게 구현할 예정이다.이 main 페이지에는 태그별로 산책로들을 분류하고, 분류된 산책로들 중 하나를 선택하면 해당 산책로에 관한 정보창으로 넘어가게 된다.

이 정보창에는 산책로를 추가한 유저가 작성한 후기가 남아있으며, 유저들은 자신만의 댓글과 평점, 그리고 사진을 올릴 수 있게 구성하려 한다. 그렇기 때문에 Comments에는 댓글(text)와 평점(rating)을 포함해 DB에 보내게 된다.

API

Server API 문서입니다.

다음에는 조금 더 코드를 베이스로 log를 작성할까 합니다. 부족한 글이지만 읽어주셔서 감사합니다. 혹시 질문이 있으시거나 개선해야할 점이 있다면 댓글로 부탁드립니다.