---
tags: project08, 스크럼
---
Week2 Day5
===
## 스크럼
- 위정훈
- [데모 세션 시나리오](https://hackmd.io/@D8VMnxj_RsSHkYvEyBMF2Q/HyTVQaa9w) 대강 짜봤습니다
- readme 일부 수정 및 자동 배포 한번 더 확인

- 이연정
- deep copy를 JSON이 아닌 recursive function으로 짜려고 시도, 무수한 타입관련 에러... 더 공부하고 시도할 것임..!

- 이준희
- react-redux를 보면서 useSelector에 대한 고민
- stale props & zombie child
- 퍼포먼스 문제도 있대요

- 이은솔
- 어제는 사이드바 스타일 컴포넌트와 스토어 연결하기 위해서 Hook 살짝 구현해봄
- 타입스크립트 마스터하려면 멀었나? 싶어서 인프런 완강을 했지만.. 여전히....😶

- 박은식
- 기존 layer생성과 분할에 대해서 학습하고 몇가지를 실험해봄
- 검색기능을 기존 mapbox에서 api로 제공 가능할 것이라고 생각함
- 만약 안된다면 네이버 geocoder를 이용하면 될 듯

## 오늘 멘토링 전 할일!
- readme 작성 마치기
- 멘토님께 전달할 질문 및 체크 리스트 작성

## 질문사항 & 답변

- 수정한 목표가... 적합한지? 렌더링 최적화는 프레임 속도 외에 나타낼 수 있는 지표가 더 있는지?
- 크롬에서 60 fps -> 성능테스트에 대한 공부 및 시도를 해보아라
- 2배로 기능을 늘리기. 달성 자체보다는 어떻게 협업해가는지 배우는 것이 더 중요하다!
- 객관적으로 보셨을 때 현재 저희의 상태
- 서로 예의를 차린다... 회사를 배우는....
- 협업? 버그가 없는 것..!
- 코드리뷰가 감정으로 이어지지 않고
- 좋은 PR을 받을 수 있는 방식
- 내가 생각한 바를 드러낼 수 있는 용기. 보여줄 수 있는 코드
- 주장을 요약하니 ...이라고 이해했습니다 하지만 ...에 근거하여 저는 ...라고 생각합니다
- 코드에 대한 확신, 근거를 가지고 멘토의 말해 답할 수 있는가
- 실수한 부분에 대해서도 설명할 수 있어야
- 지금 저희가 다섯명인데 주요 기능들은 같이 하는게 맞는 것 같아서 대부분의 코딩을 하는 부분에 있어서는 3명이 하는 퍼포먼스랑 비슷한 것 같습니다. 이렇게 가는 방향이 맞는 방향인 것일까요?
- 코드를 보여줄 수 있는 사람이 있다면 인원은 상관 x
- 함수 단위의 인터페이스를 서로 정규화하는 것(중요)
- 일을 나눠서 하지만 독립적으로 일하지 마라
- 히스토리 기능을 이전 미팅 때 빼도 된다고 하셨는데, 난이도가 높아서 그런건지? 중요도가 낮아서 그런건지? 궁금합니다.
- 1+2번 기능 합쳐서 일주일이면 여유롭게(1d 6h 기준)(코어타임 몇시간 안댐)
- 긍정적 반응? => 차이를 저장, 상태자체를 저장. 모두 사용하는 것도 고려. 멘토님은 히스토리 상태 관리를 어떤식으로 하셨는지? 라이브러리? Redux Store???
- 요거는 재경님이 말씀하실 때 Local Storage, 서버를 사용할 수 있겠죠? 이렇게 말씀하셨어요..!
- 이현수 멘토님이 redux-thunk 리덕스 + 비동기 처리 시 유용한 미들웨어로 소개해주셨는데, 저희 서비스에서 비동기 처리가 필요한 부분이 어디에 있을지 궁금합니다!?
- 액션을 함수로 다뤄서
- 원하는 시점에 호출가능

## 주말 계획

- 스타일 탭 store의 useSelector로 보여줘야 함.
- dispatch 이용해서 reducer의 값 바꿔야함. (isChanged true / false)
- 한 시

## 다음 주 계획

- Readme 수정
- 핵심기능 또한 추가
- 여섯 개 모든 지도 편집? + 리셋 + (테마)
- Style Type
- 스타일 가시성 조절
- 색상 가시성 조절
- 굵기 가시성 조절
- 채도 가시성 조절
- 명도 가시성 조절
- Fewer Options
- 표기 단계 조절(도로)
- 표기 단계 조절(랜드마크)
- 표기 단계 조절(라벨)
- 지도 테마 선택
- Reset
- Import, Export (JSON으로만)

### 월

- 스타일 조정 위한 준비 ( hook구현 등 )
- 전체적인 조정 위한 세팅 ? ( 번역이나 poi분리? )
- 도로

### 화

- 교통 / 경관

### 수

- 행정구역 / 물

### 목

- poi
- reset
- import export

### 금

- 멘토링
- 데모 발표

### 토(?)

- 표기 단계 조절(도로)
- 표기 단계 조절(랜드마크)
- 표기 단계 조절(라벨)
- 지도 테마 선택
- 인당 하나?

추가가능
현재 상태 이미지로 캡쳐??
지역 검색 링크 붙이기?!?

---

## 회고

- 위정훈
- 좋았던 점😁
- 다른 팀들과는 다르게 7시 칼퇴 후 충분한 휴식을 즐기고 잠을 잤다. 이번주까지만 좀 여유롭게 하는 걸로..

- 아쉬웠던 점😂
- 금욜 데모 세션 말고는 팀에 딱히 기여한 것이 없다는 생각이 많이 들어서 아쉽다. 수요일 쯤에는 시간이 엄청 안간다고 생각했는데, 갑자기 주말이 되고 벌써 팀프로젝트도 절반 고지를 향해 간다는 생각이 들면서 급 쫄렸다.
- 하루에 아메리카노 벤티 하나씩 먹는데 왜케 피곤하지..

- 도전해보고 싶은 점🙄
- 주말 특근(?) 이후에 리덕스를 좀더 공부해야겠다. 아직 개념이 명확하지 않은 느낌이라 코딩으로 옮기는데 어려운 것 같다.
- 추가할 수 있는 부가기능을 연구해봐야겠다. mapbox api가 다양하게 정말 많은데 어떻게 활용할 수 있을지 연구해봐야겠다.

- 이연정
- 좋았던 점😁
- redux 본격적인 시작

- 아쉬웠던 점😂
- 아직 타입스크립트의 타입처리에 미숙한 것 같다(특히 오브젝트 안의 오브젝트)
- 협업방식 전환의 필요성

- 도전해보고 싶은 점🙄
- 렌더성능?을 적어도 어떻게 측정하는지, 렌더를 위한 흐름은 어떠한지 정도는 제대로 파악하고 싶다
- 리뷰다운 리뷰를 남기고 싶다

- 박은식
- 좋았던 점
- mapbox의 사용 방법을 어느 정도는 숙달한 것 같다.
- 아쉬웠던 점
- 협업의 잘못된 방향성
- 다른 팀들이 열심히 하는 것에 비해서 너무 시간을 딱딱 정해서 마친 것은 아닐까?
- 도전해보고 싶은 점
- 타입스크립트의 타입이 너무 곳곳에 흩어져 있는 것 같다. 모아서 관리해야 할 파일은 모아서 관리하고 싶다.
- 옛날에 리덕스와 리덕스사가를 만들어서 쓴 적이 있었는데 진짜 리덕스에다가 리덕스 미들웨어를 만들어보고 싶다.(만약 사용할 일이 있다면)

- 이준희
- 좋았던 점
- 타입스크립트 에러가 발생했을 때 사라지게 하는 방법은 살짝? 안 것 같다
- 멘토님들 대단한 거 같다
- 아쉬웠던 점
- 내가 이번 주 너무 못했다... 다음주에는 안 이러기만 바라고 싶다.. 난 바보야...
- 이번 주 점수 주려면 0점 주고 싶다
- 도전해보고 싶은 점
- 리덕스를 이용한 각 탭의 상태 조절
- 본격적인 mapbox 설정

- 이은솔
- 좋았던 점
- 멘토님들의 확실한 피드백!
- Mapbox가 이제 조금 이해가 되었다.
- 타입스크립트 에러 계속 보다보니 적응이 되었다.
- 아쉬웠던 점
- 체력적으로 피곤함이 크다... 왜징?🤯
- 생각보다 개발의 가속도가 붙지 못했던 것 같다. Mapbox 러닝커브.. 였던 걸까아!?
- 도전해보고 싶은 점
- 진짜 협업...!? 코드 리뷰 활성화하기
- 다음주 마일스톤 목표 달성하기

<p align="center">
<img src="https://user-images.githubusercontent.com/26402298/99673762-8a71e080-2ab8-11eb-84ca-909703fae826.png"
width="549" />
</p>

<p align="center">
<img src="https://github.com/qkrdmstlr3/svg-icon-animation/blob/master/map-icon/map-icon.svg" height="300" />
</p>


## 프로젝트 소개

사용자가 직접 지도의 다양한 요소에 대한 스타일을 조정하고 URL 또는 JSON 형식으로 내보낼 수 있는 툴입니다.

<p align="center">
<img src=https://user-images.githubusercontent.com/57997672/100355732-9cfa9580-3035-11eb-91e6-60c56466933a.png />
<br />
<br />
<img src=https://i.imgur.com/KNk0TvT.jpg />
</p>

## 개발 목표

- 컴포넌트 렌더링 최적화
1. 프레임 속도 : 크롬 기준 60fps

- [Google Styling Wizard](https://mapstyle.withgoogle.com/) 클론
- mapbox API 사용
- 자세한 feature list는 아래의 링크를 참고

- 단순한 클론에서 나아가 사용자가 커스텀 가능한 부가 기능을 아래와 같이 추가

1. 마커 + 텍스트 생성 가능
- 특정 장소에 대한 표기 기능
- 지도에서 우클릭하면 마커 생성 가능 모달 뜨고 누르면 마커 생성됨
- 마커 우클릭하면 마커 제거 모달 뜨고 누르면 마커 제거됨
- 마커 hover시 텍스트 표기. 텍스트는 마커 상단에 표기
- 단 입력가능한 텍스트 길이는 10자 제한
- 사이드바에 마커 스타일링 메뉴 추가 : 기본 마커 스타일을 사용자가 조정할 수 있음
2. 히스토리를 이용한 비교하기 구현
- 사용자가 스타일 적용 전후를 비교하는 기능.
- 히스토리 리스트 중 비교하고 싶은 스타일을 선택할 수 있음
- 선택된 스타일과 현재 스타일이 분할된 화면으로 비교됨
3. 라벨위에 hover시 url이 뜨고 누르면 포털의 해당 장소에 대한 검색 결과 화면으로 이동
4. 추가 예정(후보.. 애니메이션으로 길 그리기?)

- 클론 및 부가 서비스 구현을 위한 [feature list](https://docs.google.com/spreadsheets/d/11tz41NW_KiwJqWJrQRA_aTWBqdjliKSvJFtq_idEmXY/edit#gid=1215517442)

### 팀원

- [J082 박은식](https://github.com/qkrdmstlr3)
- [J123 위정훈](https://github.com/gitgitWi)
- [J151 이연정](https://github.com/yyjjjj)
- [J159 이준희](https://github.com/GodDrinkTeJAVA)
- [J154 이은솔](https://github.com/Eunsol0410)

### 폴더 구조

.
├── public
└── src
    ├── components
    │   ├── Icon
    │   ├── Map
    │   │   ├── ButtonGroup
    │   │   └── SearchInput
    │   └── Sidebar
    │       ├── SidebarContentFewer
    │       ├── SidebarContentMore
    │       ├── SidebarFooter
    │       ├── SidebarHeader
    │       └── SidebarModal
    ├── hooks
    │   ├── common
    │   ├── map
    │   └── sidebar
    ├── pages
    ├── store
    │   ├── common
    │   ├── map
    │   └── style
    └── utils
        ├── rendering-data
        └── styles