2주차 회의록

2021-11-01

• 참여자
  • J077_문혜현, J107_송명회, J218_홍승용, J219_홍종우
• 시간
  • 오전 10:00 ~ 오전 12:00 / 오후 02:30 ~ 오후 07:00
• 프로젝트, 마일스톤 관리
  • 프로젝트: 주차별 스프린트 관리, 전체 프로젝트 관리
  • 마일스톤: 기능별 관리
• 주석 관리
  웬만하면 함수 이름, 변수 이름으로 설명되도록 네이밍

    /*
        2021-11-1
        [작성자]
        [설명]
    */

• API 명세 작성

  • 회원가입(프론트엔드에서 access token 다 받은 후)

    • request: GET /api/auth/sign-up
    • response: 로그인 페이지로 redirect

  • 로그인

    • request: GET /api/auth/sign-in
    • response: true/false

  • MAP

    • request: GET /api/map?현재 한단계위 시/군/구
    • response: 그 시/군/구에 있는 한단계 아래 모든 동네 총 별점, 카테고리별 별점, 상위 3개 태그
      • 축적이 구 단위이면 가져오는 정보는 현재 구가 포함된시에 있는 모든 구 폴리곤 정보를 가져온다
      • 축적 레벨에 따라서 가져오는 정보를 한 단계 위(지도 꽉 채우기)로 또는 한 단계 낮게(지도 여백 남기기) 둘 중 하나 정하기

  • 사이드바(Map 클릭 시)

    1. 후기
       • request: GET /api/postscripts?선택된 동네
       • response: 현재 동네의 후기 정보 상위 5개
    2. 게시글
       • request: GET /api/articles?선택된 동네
       • response: 현재 동네의 게시글 정보 상위 5개

  • 후기 작성 Modal

    • request: POST /api/postscripts
      • Body : 선택 동네, 평점
    • response: 후기 정보 DB 저장 결과

  • 랭킹 modal

    • request: GET /api/ranking?시&구
    • response: 해당 단위의 동네들의 이름,총평점과 세부평점
      • 1. 현재 있는 지도 위치를 기준으로 동네 별 랭킹 처음 보여주기
      • 2. 프로필 거주지 위치를 기준으로 동네 별 랭킹 처음 보여주기
      • 나중에 1번과 2번 중 로직을 살펴서 선택하기
      • 시, 구로 나누어서 '전체'를 둠

  • 게시글 작성

    • request: POST /api/articles
      • Body: 선택 동네, Title, Content, Images, categories
    • response: 게시글 작성 DB 저장 결과

  • 게시글 업데이트

    • request: PATCH /api/articles/:id
      • Body: Title, Content, Images, categories
    • response: 게시글 업데이트 DB 저장 결과

  • 게시글 삭제

    • request: DELETE /api/articles/:id
    • response: 게시글 삭제 DB 저장 결과

  • 게시글 상세정보

    • request: GET /api/articles/:id
    • response: 선택 동네, 제목, 내용, 이미지, 작성자, 시간

  • 게시글 페이지

    • request: GET /api/articles
    • response: 선택 동네, Title, Category, Image, 시간

  • 프로필 거주지 변경

    • request: PATCH /api/profile
      • 거주지 String Text, 위/경도
    • response: 프로필 거주지 변경 결과

  • 프로필 이미지 업로드

    • request: POST /api/profile
      • body: 이미지 url(object storage)
    • response: True/False
• FE 디렉토리 구조 설정

├── public //정적 파일들을 모아놓는 곳
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assests // image 파일
│   ├── components // component들을 모아놓은 폴더
│   ├── pages      // component를 조합해 하나의 페이지를 구성
│   ├── stores     // 전역상태관리
│   ├── styledComponents     // 전역 스타일, scss 파일
│   ├── utils      // 자주 쓰는 함수
│   ├── App.ts     
│   └── index.ts

2021-11-02

• 참여자
  • J077_문혜현, J107_송명회, J218_홍승용, J219_홍종우
• 시간
  • 오전 10:00 ~ 오전 12:00 / 오후 02:30 ~ 오후 07:00
• 백엔드 환경 설정 오류 해결 및 완료
  • 폴더 구조
    • Server도 src로 나누어서 관리하도록 결정
  • 개발 nodemon 사용 여부
    • 개발 시에는 nodemon, 배포 판은 pm2로 사용하도록 결정
    • 배포시에는 ts-node가 아니라 컴파일 후 pm2로 실행
  • Server 로깅 설정
    • morgan을 사용해서 console로만 확인 -> winston을 사용하여 파일로 저장하도록(하루 단위로 refresh)되도록 설정
  • tsconfig 설정
    • 주석 때문에 오류 캐치가 어려움. 주석을 지우고 각자 자체적으로 내용을 공부하는게 더 효율적
  • 코드 변경 사항
    • TypeScript에 맞는 import 방식으로 전체 코드 변환
• 개발 진행
  • 이슈 등록 / 마일스톤 / Project 등록 개별 완료 후 진행할 것
  • 프로젝트 공통 진행 부분인 Router 설정, Global Style 설정을 별도로 진행되었으므로 Layout 부분은 추후 Merge

2021-11-03

• 참여자
  • J077_문혜현, J107_송명회, J218_홍승용, J219_홍종우
• 시간
  • 오전 10:00 ~ 오전 12:00 / 오후 02:30 ~ 오후 07:00
• 오프라인 오후2시 만남
• 열정적인 페어프로그래밍
• typescript가 오류가 많음. 공부 필요

2021-11-04

• 참여자

  • J077_문혜현, J107_송명회, J218_홍승용, J219_홍종우

• 시간

  • 오전 11:00 ~ 오전 12:00 / 오후 01:00 ~ 다음날 오전 06:30

• git 전략이 생각보다 번거로우므로 바꾸는 것에 대해 고려

• 지도 API는 네이버 VS 카카오

  • 네이버는 개발자들의 예시가 많지만, 공식문서가 꽝이다.
  • 카카오는 개발자들의 예시가 상대적으로 적지만, 공식문서가 잘 되어있다.
  • 결론: 공식문서가 잘 되어있는 카카오 API로 해보자!

• multipolygon vs polygon -> polygon -> 전라남도와 같은 섬이 많은 곳은 multipolygon이 필요하다

• 프론트(외 3명) 지도의 중심좌표 or 사용자가 처음 접속했을 때 나오는 지도의 중심좌표(위경도) 를 알아내기 -> API로 행정동(시/구/동) 알아내기 현재 지도의 축척 레벨 알아내기 -> 알아낸 행정동 주소와 축척 레벨을 백엔드로 보내기(Get 방식 : { scale: number, regionName: string}) -> 알아낸 행정동 주소와 축척 레벨을 사용해서 보여줄 동네(시/군/구/동/읍/면)를 보내주기 -> 백엔드는 받은 동네의 child만 보내주면됨 => regionName 행정동 이름 대신 regionCode 행정구역코드를 보내기로 결정.

• 백엔드(홍승용)

  • 프론트에서 축척 + 중심의 행정동명 전달 받기(/api/map/polygon)
  • 행정동의 이름을 기반으로 MongoDB 쿼리하여 경계 좌표 얻기(축척 기반)
  • 경계 좌표 프론트로 반환(return { Map 타입 })

• db 업데이트

  • 위도와 경도를 주면 해당 주소를 알려주는 gis api가 있음
  • 따라서 사용자의 주소에 해당하는 동 중심좌표를 저장하고 나서 이후 주소가 바뀌었을 때, 해당 중심좌표를 gis api를 이용해서 어느 동으로 바뀌었는지 업데이트해줌
  • 이럴 경우 사용자 document와 map document를 연결해줄 필요 없음

• 지도 내의 장소 정보를 가져오는 방법 : 사용자가 드래그를 해서 이동했거나, 축척을 움직였거나

  • 중심좌표의 행정동 주소+축척
    • kakao api로 현재 중심좌표에 해당하는 주소를 가져올 수 있음
    • 이 주소 "서울특별시 종로구 종로2동"와 축척레벨(1~13)을 이용해
    • 시 경계 정보를 가져올지, 구 경계 정보를 가져올지, 동 경계 정보를 가져올지 선택할 수 있음
  • 중심좌표의 행정동 주소+축척+영역 정보
    • 영역을 사용하면 한 단계 위의 모든 정보들을 가져오지 않고 해당 지도에 필요한 영역들만 가져올 수 있음
    • 성능이 좋지 않거나 업그레이드 시키고 싶을 때 하도록 함

• 행정구역 경계 데이터 저장 방식(maps 컬렉션)

  • nested vs flat
    • nested는 하위 행정구역의 데이터를 상위 행정구역에 embedding하는 방식
    • flat은 상/하위 관계를 신경쓰지 않고 하나의 컬렉션에 모두 document로 저장하는 방식 (1차원 배열)
    • 처음에 nested 방식을 선택해서 쿼리를 실험해보았으나 우리가 원하는 데이터만 추출하는 쿼리를 날리는 것이 불가능. 성능적인 문제도 존재
    • 이후 flat 방식으로 스키마를 변경하고 저장. 왜냐하면 부모-자식 관계는 이미 행정구역 코드에 반영되어있기 때문. code 필드에 인덱스를 걸어서 상당히 빠른 속도(~3초)로 원하는 경계 데이터를 추출할 수 있었음.

• 통계청 제공 행정구역코드 = 행정구역분류코드

  • 카카오 맵 API에서는 행정동코드와 법정동코드를 제공
  • DB에는 행정구역분류코드를 저장하고, 쿼리를 보낼 때는 행정동코드로 보내서 아무런 값도 반환되지 않았다.
  • 결국에 행정동 이름을 쿼리로 보내고 코드는 DB 쿼리 참고용으로 사용하였다.