💦 페어 활동 기록_Day8 - boostcampwm-2022/web33-Mildo GitHub Wiki

1. A팀(한빈, 상준)

1.1. 이슈 분배

네이버 지도 API 연결
지도 초기 화면을 서울 중심으로 출력

1.2. 구현 목표

사용자가 모바일 환경에서 네이버 지도 화면을 확인할 수 있어야 함
기존 이슈를 적절하게 나눠서 세부 목표 작성
branch name : feature/map

1.3 세부 목표

1.3.1. Mildo에 네이버 지도 API 가져와서 보여주기

네이버 지도 API 사용법 익히기
nCloud에서 API 이용 신청하고 프로젝트 url 추가
- 한빈이 이전에 사용한 서비스를 적용하였고, 현재 url은 localhost
- Web Dynamic Map 사용
Application Key에서 Client ID 가져오기
url과 Client ID를 사용하여 프로젝트에 API 연결하기
- public/index.html의 head에 script 태그의 src 속성에 해당 내용 추가
typescript 타입 설정을 위한 @types/navermaps 설치
맵 관련 컴포넌트 생성
- 맵을 그릴 DOM 요소 생성
- map 옵션 설정하기(위치, 줌 등)
- DOM에 네이버 지도 그려주기
컴포넌트 렌더링 확인
참고 자료

1.4. 의사결정

1.4.1. 모바일 환경에서 지도 메인 화면 구성

Map 컴포넌트를 생성하고 MainPage는 별도로 생성?
- Map 관련 로직이 따로 있는지?
메인 화면 구성이 지도 작업에 포함되는가?
- 메인 화면 : 지도를 띄어주고, 그 크기를 모바일 UI에 맞게 설정 (O)
- 메인 화면의 구성 요소 : 검색바, 필터 등등 (X)

1.4.2. 의논 사항

mainPage를 별도로 만들어야 할까?
- 어차피 spa 구현이니까 Map 컴포넌트를 mainPage처럼 사용?
- 확장성 고려해서 Map, 검색바, 필터 등을 컴포넌트로 제작하고 mainPage를 별도로 구성?
- 우선 A팀에서 2번째 안으로 잠정 결정
모달이 컴포넌트인가? → 모달의 레이아웃(Wrapper)과 모달의 내용물을 서로 분리하자!
- 모달의 내부의 컴포넌트가 또 들어가는 상황이면, 모달 자체를 컴포넌트라고 볼 수 있나?
  - components, pages, modals가 다 별도로 존재?
Geocoding(중요도 : 하)
- 주소의 텍스트를 기반으로 좌표 정보를 가져올 수 있음
- 검색 기능에서 사용할 수 있지 않을까?

2. B팀(현정, 윤우)

2.1. 이슈 분배

express 서버 연결
서울 실시간 도시 데이터 API 연결
주요 장소 50곳에 대한 인구밀도/위도/경도 정보 가져오기

2.2. 구현 목표

백엔드에서 서울 실시간 도시데이터를 가져올 수 있다.
branch name : feature/connect-seoul-api

2.3. 할 일

express 서버 연결
서울 실시간 도시 데이터 API 연결
주요 장소 50곳에 대한 인구밀도, 장소 정보 가져오기
- 서울 실시간 도시 데이터 장소, 인구밀도, 위도/경도X
- 네이버 geocoding api 위도/경도
github secrets에다 배포에 필요한 환경변수 정의

2.4. 의사결정

2.4.1. xml2js

서울 실시간 도시 데이터 API에서는 xml 형식으로만 응답을 받아올 수 있음
- 공식 사이트에 json 형식으로 받아올 수 있다고 나와있어 시도해봤지만 xml 형식만 지원한다고 응답
파싱이 주된 목표가 아니었고, 빠르게 파싱하기 위해 xml2js 라이브러리를 이용해서 xml파일을 json 형식으로 파싱

2.5. 구현 내용

2.5.1. 서울 실시간 도시 데이터 주요 50곳 응답 확인

서울 주요 50곳의 데이터를 한번에 가져오는 api 요청이 없기 때문에 50곳 각각에 대해 요청을 해야됨
서울 주요 50곳에 대해 상수로 모두 작성
서울 주요 50곳에 대해 api가 응답을 모두 하는지 확인

2.5.2. 서울 실시간 도시 데이터 API 응답 가공

서울 도시 데이터의 요청으로 json이 아닌 xml밖에 응답받을 수 없어 xml2js 모듈을 설치하여 파싱
서울 실시간 도시 데이터 API 응답에서 필요한 데이터만 가공하여 res.send 함

결과

{
  "ok": true,
  "data": [
    {
      "areaName": [
        "경복궁·서촌마을"
      ],
      "populationMin": [
        "6000"
      ],
      "populationMax": [
        "6500"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "광화문·덕수궁"
      ],
      "populationMin": [
        "7500"
      ],
      "populationMax": [
        "8000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "창덕궁·종묘"
      ],
      "populationMin": [
        "5000"
      ],
      "populationMax": [
        "5500"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "강남 MICE 관광특구"
      ],
      "populationMin": [
        "2500"
      ],
      "populationMax": [
        "3000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "동대문 관광특구"
      ],
      "populationMin": [
        "18000"
      ],
      "populationMax": [
        "20000"
      ],
      "populationLevel": [
        "보통"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "명동 관광특구"
      ],
      "populationMin": [
        "14000"
      ],
      "populationMax": [
        "16000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "이태원 관광특구"
      ],
      "populationMin": [
        "4500"
      ],
      "populationMax": [
        "5000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "잠실 관광특구"
      ],
      "populationMin": [
        "22000"
      ],
      "populationMax": [
        "24000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "종로·청계 관광특구"
      ],
      "populationMin": [
        "12000"
      ],
      "populationMax": [
        "14000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "홍대 관광특구"
      ],
      "populationMin": [
        "38000"
      ],
      "populationMax": [
        "40000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "국립중앙박물관·용산가족공원"
      ],
      "populationMin": [
        "400"
      ],
      "populationMax": [
        "500"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "남산공원"
      ],
      "populationMin": [
        "7500"
      ],
      "populationMax": [
        "8000"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    {
      "areaName": [
        "뚝섬한강공원"
      ],
      "populationMin": [
        "2000"
      ],
      "populationMax": [
        "2500"
      ],
      "populationLevel": [
        "여유"
      ],
      "updatedAt": [
        "2022-11-16 22:35"
      ]
    },
    ...
    ...
    ...
    ...
  ]
}

2.6. Trouble Shooting

2.6.1. 객체 순회, 배열 순회


for (const index in Array) {
	console.log(index); // index 출력
}

for (const value of Array) {
	console.log(value); // value 출력
}

for (const key in Object) {
	console.log(key); // key값 출력
}

문제점 : 배열에 지역 이름(string)이 들어가야 하는데 숫자(number)가 push되는 오류 발생
원인 : 객체 순회, 배열 순회를 잘못된 방법으로 하고 있었음
해결 : 1번 방법 → 3번 방법으로 변경
21, 33, 36, 39, 42를 제외한 나머지 숫자들은 우연히 각각 담당하는 지역 아이디를 담당하고 있어서 정상적으로 응답함
21, 33, 36, 39, 42를 담당하는 지역은 없었기 때문에 서울 실시간 도시 데이터 API에서 INFO-200 코드로 응답함
- INFO-200 : 해당하는 데이터가 없습니다.

2.7. 내일 할 일

res.send → res.json 으로 변경
서버 오류 상태 코드 논의
네이버 geocoding api를 사용할지 논의(한 번만 가져오면 되기 때문에 상수로 처리해도 될 것 같음)
50곳에 대해 동기적으로 말고 비동기적으로 처리해야 될 것 같음, promise.all