---
tags: project08
---
# 예상질문 리스트

## 전반

- 프로젝트 재미있었는지?
- 프로젝트를 통해 개인적으로 느낀점?
- 이 프로젝트를 통해서 이전보다 나아진 점이 있다면?
- 비즈니스 관점에서, 잘 팔릴 것 같은 서비스인지?

## UI/UX

- UI/UX에 대한 고민해봤는지?
- 구글과 비교
- 적용할 수 없는 세부 유형 제거/ beforeMap 생성 시점 조정/ 초기화 기능 추가
- 어떤 부분이 개선이 되었는지?

## 테스트

- 테스트 코드 써봤는지? no..
- 저희 서비스의 메인인 지도 맵박스 객체로 생성되고, 렌더링이 된다. 이는 하나의 컨테이너로 감싸고 있어서, UI 테스트를 하기 까다로워...

## 퍼포먼스

- 렌더링 비용이 비싸다고 했는데 어떻게 아는지? 측정해봤는지?
- Performance를 이용해서 측정.
- 들어가는 용량이 꽤 큰데, IndexedDB말고 localStorage를 사용한 이유?
- indexedDB는 localstorage보다 최신기술이라 지원이 되지 않는 브라우저가 있음. 따라서 localstorage 선택.
- 새로고침 / 나갈 때만 로컬스토리지에 저장하는데, 그 과정에서 데이터가 유실될 경우는?
- 하드웨어 자체의 전원이 off 된 경우
- setInterval로 주기적으로 넣는 방법도 생각했으나, “상태직렬화” > “로컬 스토리지에 쓰기” 처럼 단방향의 동기적 처리라면 현재 스펙에선 커버가 가능하다고 생각
- web worker를 사용하지 않은 이유?
- mapbox api 를 이용하여 화면에 렌더링 하는 데 걸리는 시간을 단축할 수 있었지만 개발과정에서 너무 늦게 알게되었다. 아쉽다.

## 기타사항
- 채팅창에서 데모 url 드리기(은식님?!) => 프로젝트 개요 설명하면서 한번 언급할게요
- 눈치싸움 hackMD 필요함!
- 괜찮은 질문 slido에 등록해놓기

# 우리가 할 질문
- 왜 서버가 없나? (서버가 있으면 좋았을 부분) 준희
- 프로젝트 초기에 관련한 고민을 멘토님과 공유했을 때, 필요하다면 서버를 구축하라고 말씀하셨다. 저희끼리 상의한 결과 클라이언트 기반에서 내보내기 기능을 잘 이용하면 사용자의 편의성을 고려해서 목표한 기능을 충분히 구현 가능하다고 생각하였다.
- 서버가 있었다면 localstorage로 브라우저와 무관하게 사용자별로 데이터를 저장하고, url로 내보내기할 때 길이가 좀더 줄어들어서 좋았을 것

- 구현시 어려웠던 부분? 연정(레어이에 관한 설명 필요?)
- 비개발적인 부분에 있어서는 지도 데이터에 대한 이해를 기반으로 한, mapbox와 naver에서 제공한 100개 이상의 지도들의 레이어들을 분류 후 재구성 하는 작업
- 추가적으로 성능 지표로 60FPS를 목표로 설정하고 렌더링 최적화를 여러 방법으로 시도했었다. 이미지 사이즈나 폰트, 로컬스토리지 I/O 횟수 최소화, 맵박스단의 layer filter expression 개선작업 등의 여러 시도를 해봤지만 크게 개선되지 않아 어려움을 겪었다.
- 저희 퍼포먼스에 가장 크게 영향을 끼치는 부분이 초기에 지도 관련 데이터를 받아오는 작업입니다. 하지만 이 부분은 서버로부터 받아오는 부분이라, 해당 부분에서 저희가 시도해볼 수 있는 부분이 적어, 큰 성능개선이 어려웠던것 같습니다.

- 히스토리 관리하는 방법에 대해서 더 설명해주세요 은솔
- 큐에는 변경된 스타일 / 적용된 전체 스타일이 함께 히스토리에 저장이된다.
- 현재 시점을 가리키는 인덱스를 함께 상태로 가지고 있다.
- undo/redo에 따라서 인덱스의 위치를 앞/뒤로 조정하게 된다.
- 그리고 해당하는 인덱스의 데이터의 타입을 확인해서 변경된 스타일 상태만 바꿀지, 전체를 업데이트 할지 결정하고 리덕스 상태와 맵렌더링이 실행된다.

- Custom Hook으로 Container를 대체한 부분의 장단점을 설명해주세요 => (정훈)
- 장점. 컴포넌트의 depth가 깊어지는 것을 많이 줄일 수 있고, 비즈니스 로직과 View를 분리시킬 수 있습니다. 또한 재사용이 용이하여서 코드 중복 또한 줄일 수 있다.
- 단점. 재사용되는 Custom Hook과 그렇지 않은 Hook이 구분되지 않아 혼선을 줄 수 있다.

- 협업방식과 어려웠던 점을 공유해주세요 > 은식
- 웹 과정 수료중인 다섯명이 구성된 유일한 팀이다. 사람이 많아서 좀 더 편할 것으로 예상했으나, 다섯명 모두가 코드 전체를 이해하는 것이 목표였기에 다섯명을 어떻게 쪼개서 협업하는 것에 대해서 시간이 많이 걸렸다.
- 코어 타임에는 2 / 3 또는 1 / 1 / 3 형태로 작업을 주로 진행했으며, 주로 함수 단위로 나눠서 구현하였다. 하루의 끝에는 추가적인 학습을 진행하거나, 혼자 진행해도 된다고 판단되는 일은 나누어서 구현 후, 코드리뷰를 통해서 파악을 하였다.

- 타겟층? > 아무나
- 팀에서 회의를 진행하며 지도를 다양하게 스타일링하고자 하는 블로거로 타겟층을 생각하고있던 와중, 멘토님들께서도 해당 타겟층을 제시해주셔서 그쪽으로 방향을 잡았다.

# Q&A 타임 용 HackMD

---
slido 주소: https://app.sli.do/event/hr9rkc7u/live/questions
배포 URL: http://map-styler.kro.kr/
Notion 전시 부스: https://www.notion.so/08-A-STYLED-MAP-ADMIN-TOOL-f024ee72d13646339b82464df053cf1f
Youtube 데모영상: https://www.youtube.com/watch?v=QyYitRydlmk&feature=youtu.be
TrackC 줌링크: https://zoom.us/j/99081103164?pwd=QVZLWlNnMXJKUFJBUlpaRlFNZm1SQT09

### 질문에 대답하고 싶으면 이름 적기
- 그냥 대답 생각나면 바로 이름적고 말해주시면 됩니다.
- 대답끝나면 이름 지우고 다음 질문에 또 적으면 될 것 같아요
- 협업 부분은 질문으로 올리기 애매. 정훈님이 팀원에게 말씀해달라고 하시는 흐름으로..!

이름:
랜더링 저희 질문 아닌거죠?!
네네 그런것같아요
당황 눈치싸움 ㄷㄷ..
클라이언트 라우팅은 뭐죠..? 저는 뭔지 모르겠는데 혹시 답변 해주실 수 있으신분 계신가요??
음...... 뭘까요?
시간다되가는데 일단 넘기는 것이
저희 질문 터졌는데요??

### 들어온 질문들
#### 30분 남았으니 답변들을 준비해보죠

Q&A 시간이 부족하여 답변드리지 못했던 질문들 답변드립니다.

- 렌더링 오버헤드가 react에서도 있었겠지만 지도를 그리는 그래픽스 부분에서도 꽤 있을 것 같은데, react 최적화가 전체적으로 얼마나 성능을 개선했나요?
- 사실 저희 팀이 처음부터 성능을 신경쓰기도 했지만, react 최적화에 대한 성능개선은 미미하였습니다. 그에 대한 이유로는 퍼포먼스에 가장 크게 영향을 끼치는 부분이 초기에 지도 관련 데이터를 받아오는 작업입니다. 하지만 이 부분은 서버로부터 받아오는 부분이라, 해당 부분에서 저희가 시도해볼 수 있는 부분이 적어, 큰 성능개선이 어려웠던것 같습니다.

- sessionStorage 를 쓰면 tab 간 공유가 안될땐테 이럴때 생기는 차이는 어떻게 compare 하나요
- 우선 저희 storage는 session이 아닌 local을 사용하였고, 세션은 탭별(도메인의)로 데이터 저장하고, 로컬은 도메인 별로 저장하는 걸로 알고 있습니다. 따라서 tab간 공유는 가능합니다.

- 클라이언트 라우팅은 왜 지원하지 못했나요?
- 저희는 undo/redo 기능을 별도로 구현했기 때문에 클라이언트 라우팅에 대해서는 필요성을 크게 느끼지 못했던 것 같습니다.