2022-11-29(화)

날짜 : 2022. 11. 29 (화) 시간 : 오후 7시 ~ 오후 10시 (3시간) 참여자 : 박경서, 김지홍

회의 안건

github 를 활용하여 어떻게 협업 할 것인지, 서비스 개발에 어떤 자료가 필요한지 논의한다.

주의사항: READ 만 생각하고, Create와 Update 는 나중에 생각한다.

개발 방법
mr 템플릿 추가
밴치마킹
UI 기획
Open API 조사 (4~5개)
Frontend 컴포넌트, UI 라이브러리 선정
- 라이브러리 (bootstrap5 primary, secondary 교체)
- 카카오맵, 구글맵, 네이버맵 등 맵 api로 화면 영역 표시하기
Map에 표시할 사안에 대한 논의

회의 내용

개발 방법 깃허브 레포지토리에서 Fork 를 하지 않는다. contributors 로 참여되어 있기 때문에 Branch 를 따로 만듦으로서 기여한다.
mr 템플릿 추가
밴치마킹
- 다이닝 코드 [커뮤니티] - https://www.diningcode.com/
- 진짜서울 [맵] - https://jinjja-seoul.com/
UI 기획 Figma 를 이용해 진행한다. 서비스의 요구사항을 먼저 파악한 후 UI 기획은 가장 마지막에 진행한다.
Open API 조사 (4~5개)
- http://data.ex.co.kr
  
  휴게소 브랜드 매장현황 조회 서비스
  휴게소 푸드메뉴현황 조회 서비스
  휴게소 편의시설 현황 조회 서비스
  테마휴게소 현황 조회 서비스
  휴게소 청년창업매장 현황
- 다섯개 api로 매장 정보 필터링하고
- 휴게소 정보로 그룹 짓고,
- 그룹 내에 있는 식당으로 post 관리를 하고
- 식당 정보로 커뮤니티 공간을 제공함
Frontend 컴포넌트, UI 라이브러리 선정

라이브러리 (bootstrap5 primary, secondary 교체)

https://getuikit.com/ 을 사용한다.

카카오맵, 구글맵, 네이버맵 등 맵 api로 화면 영역 표시하기

// https://apis.map.kakao.com/web/sample/addr2coord/
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {

       // result[0].y, result[0].x) 좌표
        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    }

});

브라우저에서 제공하는 GPS 사용하기 (지도의 중심값) / GPS 를 사용하지 않을 경우에는 클라이언트의 IP 를 중심값으로)

Geo좌표 침고자료

Map에 표시할 사안에 대한 논의
- 키워드를 가지고 geo 좌표 구하기 -> 지도 검색 api 써야함
- Geo 좌표로 mongo 에서 좌표만큼 데이터 가져오기
- 장소별 pk로 식당 정보 가져와야 함
- 참고 자료
  - https://www.creare.co.uk/blog/js/loading-google-map-markers-via-xml
  - https://stackoverflow.com/questions/7701077/add-marker-function-with-google-maps-api

다음 안건

GEO 좌표로 데이터를 어떻게 가져올지에 대해 백엔드 개발자와 미팅 후 결정.
레포지토리 분기하기

특이사항

최대 2022/12/16(금) 전까지 서비스 기획, 요구사항 분석, 설계, API 인터페이스 정의, 화면 설계까지 마무리를 한다.

첨부 자료

여기 코드를 확인해보면 반복문을 이용해서 marker 을 생성하고 있는데, 데이터를 맵에 담아 Promise.all 을 사용해서 병렬로 처리하면 퍼포먼스가 더 좋을 것 같네요