🍊 오늘 할 일
map page 컴포넌트 구성 짜기kakao map 도입하기sidebar(asdie tag) 레이아웃kakao map 위치 기반 제공 학습
주의할 점
- 시멘틱 태그 신경쓰기
- 웹의 접근성 고려
- alt 꼭 작성
- 반응형, 모바일 고려하면서 코드 짜기
- tabindex 필요 => 키보드로 가능하도록
- 로딩 처리가 잘 되었는가 (indicator, 레이아웃 유지, 로딩 실패시 피드백)
- 데이터를 불러오는 것에 실패할 경우, 유저에게 정확한 피드백을 전달하고 있나?
- 불러온 데이터의 크기가 0일때, 에러나 버그처럼 보이지는 않는가?
- 개발자 콘솔을 열었을 때 자바스크립트 에러가 발생하지 않는가?
- 모달창도 오류 핸들링 필요
- 에러 핸들링에 대한 규칙을 정하는 것도 필요할 듯.
네트워크 에러
서버 API로부터 받는 에러
사용자 브라우저 환경 에러 - 무한로딩 처리
참고 링크
논의 필요
- immer.js => (불변성)
- 가이드가 시작되는 장소 => 정확히 정할 필요 있음
- 카카오 맵 사용 공지
🍊 오늘의 정리
🍉 지도 맵 기능 정리 & 고려사항
=> 모달 내용
1. 가이드 프로필, 이름, 성별
2. 정확한 주소 => 가이드가 시작되는 장소 => 정확히 정할 필요 있음
3. 가이드 가능 날짜
4. 참고 사진
5. 가이드 내용
6. 추후 오픈 예정 안내
기본
-
필터링 없이 가이드 찾기 페이지로 왔다면 전체 가이드 카드 보여주기 => 지도는 대한민국 전체가 보이도록 설정
=> img 등은 반드시 alt 자세한 기재가 필요하다 -
지도 지역을 확대했다면 해당 위치에 해당하는 가이드 카드들과, 필터링되었다면 필터링된 날짜와 성별에 맞는 가이드 카드만 보여준다.
=> 많은 서버 요청과 리렌더링이 발생한다. -
지도 마커를 클릭해도 해당 모달을 보여준다.
=> 모달창을 보여준다고 해도, route로 만들어주어서 웹의 url을 공유할 수 있게해도 좋을 것 같다.
=> 네이버는 모달을 띄우고 안띄우고에 따라 smart-around를 url에 추가표시하여 url 공유가 가능하도록 했다.
=> 지도 마커의 경우는 굳이 읽어줄 필요가 없으니, aria-hidden="true"하면 되려나??
=> 카드에 tabindex를 잘 넣어주면 카드를 검색하는데 힘들지 않을 것 같은데...
-
선택된 모달에 해당하는 카드는 시각적으로 표시해준다.
=> 색맹 등 장애인을 고려할 필요도 있다. -
가이드 카드는 2가지 크기로 제작
=> 웹 버전, 앱 버전 (앱 버전의 UI가 전혀 기획되지 않아, 이걸로 예상치 못한 시간이 소요될 것 같다.)
반응형
- 지도는 shrink 적용, sidebar는 적용하지 않는다.
=> 767px까지 웹 반응형 적용이기 때문에, 이 크기에 맞춰서 사이드바와 모달크기 적용해야 할듯...
모바일
- 767px
- 필터항목은 header로 배치, 카드는 아래로 배치,
- 카드는 가로 슬라이드되는 형식 (scroll로 구현)
- 가이드 카드 모발은 전체화면을 채우는 형식
🍉 지도 맵 => 카카오 맵으로 결정
- 구글 static map api의 경우 default로 640px X 640px을 제공하며 더 큰 크기의 지도를 제공받기 위해서는 추가적인 단계가 피요. 우리 웹은 640px 이상의 크기가 필요하다.
- triplus는 한국 사람이 유저이기 때문에 한국 주소값만을 필요하다. 이후 세계적으로 서비스를 넓히는 가능성이 존재하지만, 현재 4주 프로젝트 진행에 있어서는 우리의 정확한 타겟이 정해져 있기 때문에, 카카오 맵으로도 충분히 서비스를 구현할 수 있기 때문이다.
🍉 ref vs getElementById
ref vs getElementById
ref를 사용함으로써 단방향 데이터 흐름을 방해하지 않기 때문에 코드를 좀 더 유지보수하기 쉽게 만든다.
대부분의 경우에 ref를 사용하지 않고도 똑같은 코드를 구현 할 수 있다. 넷플릭스에서는 절대로 ref를 사용하지 않는다는 원칙을 만들고 지키고 있다고 한다.
🍉 NavBar position 문제
해결 코드
position: sticky;
position: -webkit-sticky;다른 웹을 찾아본 결과 대부분 상위에 고정시키기 위해 navbar는 fixed를 사용한다. 하지만 이렇게 한 경우 navbar가 아래에 오는 컴포넌트와 겹치는 문제가 발생했고, 이를 해결하기 위해서는 일일히 빈 태그를 삽입하거나 absolute 포지션을 사용해야했다.
이보다는 sticky를 사용하여 navbar 다음에 다음 컴포넌트가 위치하도록 하는 것이 더 좋다고 생각하여서, sticky으로 사용하기로 결정하였다.
🍊 DevLog
오늘은 어떻게 프로젝트에 기여했나요?
- map page 컴포넌트 구성
- Kakao map 구현
- sidebar(aside tag) 레이아웃
오늘 프로젝트에서 힘들었던 점은 무엇인가요?
- 웹과 모바일 반응형을 구현할 때에는 모바일 버전의 컴포넌트 구성을 고려했어야 했는데, 웹 버전의 컴포넌트를 구성한 후 모바일 버전을 고려하려다보니, 컴포넌트를 다시 구성해야하는 문제점이 있었다.
오늘 프로젝트에서 아쉬웠던 점은 무엇인가요?
- 모바일과 웹 모든 레이아웃 구성을 고려하여 코드 작성을 시작했어야 했다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- map 가이드 카드 더미데이터 생성
- db 더미데이터를 기반으로 map 마커 구현
- 가이드 카드 UI 구상
