uchang7194/remember-location

추억의 장소를 저장하는 웹 어플리케이션

remember-location's Issues

1. 파이어베이스 연동

1. 페이스북 로그인 -> auth, name, email -> 파이어베이스 등록 및 확인 -> 해당 유저의 데이터정보를 받아서 불러옴 -> 불러온 정보를 렌더링.

• 페이스북의 userID 값을 가져온다.
• usetID값을 가져와서 firebase의 snapshot.val()값에서 userID를 가진 객체만 받아온다.
• 받아온 객체를 Map component에 렌더링 시켜준다.

4. 다른 페이스북 아이디로 로그인 했을 때 각각 다른 API를 가져오는 것을 확인

1. 마커 종류 선택기능

이슈

• local에서 이미지가 가져와지지 않음.

해결

• firebase의 storage에 저장해놓고 url링크를 가져와 사용

3. 반응형 스타일 적용

modal, search, current_position btn 반응형 스타일 적용

2. 파이어베이스 배포

이슈

• firebase ie10 이하는 작동이 안됨.

2. 데이터 처리

• marker가 추가되었을 때 Map component의 state 값으로 가지고 있는 markersData를 firebase에 업데이트 시키는 setFirebaseData 기능 구현

1. 이슈

• firebase의 데이터를 가지고 오는 도중 데이터를 업데이트 할 때마다 계속 추가적으로 데이터를 가져오는 현상이 발생.
  • 해결: firebase의 on함수를 사용하면 여러번 가져오게 됨. 그래서 once함수를 사용해서 단 한번만 가져오도록 만듬.
• firebase의 초기 데이터를 받을 때 기존에는 Facebook의 login callback에 넣어 사용했는데 이렇게 사용하면 props가 너무 많아지고 그에 따라 사이드이펙트가 많아질거라 예상함.
  • 리팩토링: componentWillReceiveProps 함수를 사용해 App component에서 보내온 isLoggedIn의 값이 true이고 userInfo 데이터가 빈객체가 아닐 때 firebase데이터를 가져오도록 만듬.

2. 헤더영역 스타일 바꾸기

완성

1. 마커 리스트 select box의 filter 기능 추가

이슈

• 없음.

2. 마커 info window 추가 하기

google map infoWindow 기능 추가

• 기존 마커를 클릭하면 내용을 추가하거나 확인 할 수 있는 모달창을 활성화 할 수 있도록 한 것을 infoWindow의 추가, 확인 버튼으로 작동하게 끔 만듬.
• 이슈: 리액트 컴포넌트에 의해서 동적으로 생성되는 것이 아니기 때문에 따로 jsx를 가지고 이벤트를 할당할 수 없었음.
• 해결: componentDidMount 함수에 map태그의 ref를 설정해 DOM객체를 가져와 이벤트 델리게이션 패턴을 사용해 처리하였음.

추가할 것

• 사진 첨부기능

1. 위치 정보를 입력할 modal 간단한 마크업 및 기능 구현

• 모달 toggle 기능

  • Map component의 state에 activedModal(bool)변수를 만들어 놓고 activedModal이 true면 모달이 활성화되고 아니면 비활성화 되게끔 만듦.

• 모달 title, description 값을 입력받아 Map component의 state에 저장하도록 함.

  • Map component 하위에 있는 ModalLocInfo component에 Map component의 state에 접근할 수 있는 함수를 props로 보내주고 props로 전달된 함수는 저장과 수정, 취소 값을 누르면 실행되게 끔 처리함.

• 이미 등록된 장소를 다시 등록하지 못하게 끔 처리

  • 이미 등록된 장소를 필터하기 위한 방법은 여러가지였음. 첫번째로 position[lat, lng]을 비교하는 방법. 두번째로는 marker 객체의 property(임의의로 만든)를 전부 비교하는 방법(position포함) 이 있었는데 생각해보니 position값은 겹치지 않을거란 생각에 position 값만 비교해서 처리하게끔 함.

• 수정, 삭제 기능 추가

  • 수정기능은 position을 비교해서 같으면 수정하게 끔 처리함.
  • 삭제기능은 google map 마커 부분과 markersData(API에 저장할 데이터)를 둘다 삭제시켜줘야 했음. 이미 _renderMarkers라는 함수에 marker의 isSaved(저장되었는지 확인하는 값)으로 google map에서 setMap을 처리하게 해주었기 때문에 markersData는 position으로 비교해서 처리하고 marker는 marker객체의 isSaved 값을 false로 만들어주기만 함.

• 수정 기능 수정

  • UX 고려
    • 처음 새로 수정페이지에서 작업할 때와 저장된 마커 정보를 수정할 때 취소 버튼이 다른 역할을 하도록 만듬
    • 처음 작업할 때는 취소를 누르면 바로 모달 창이 비활성화 되고 마커가 사라지게 됨.
    • 저장된 마커 정보를 수정할 때 취소를 누르면 수정 전의 모달창으로 넘어감

3. google map cluster 기능 추가

2. 위치 정보 modal에서 settings 토글기능 추가 및 스타일 변경

1. map 브라우저 resize시 브라우저 크기에 맞게 높이를 변화를 줌

3. Firebase의 데이터베이스에 추가할 Api 설계

// add to rememberLocation
{
  uid: [Number],
  key: [String],
  userInfo: {
    name: [String],
    email: [String]
  },
  markersData: [ // add constantly marker data
    {
      position: {
        lat: [Number],
        lng: [Number]
      }
      marker_addr: [String],
      marker_title: [String],
      marker_des: [String],
      isSaved: [Boolean]
    }
  ]
}

• uid: Facebook userid
• key: Firebase key value
• userInfo[Object]
  • email: Facebook Email
  • name: Facebook Name
• markersData[Array]
  • position[Object]
    • lat: Marker's latittude
    • lng: Marker's longitude
    • marker_addr: Marker's Address
    • marker_tit: User written title
    • marker_des: User written description
    • isSaved: saved Marker Info

1. 맵 필요없는 기능 삭제

3. 저장된 위치 정보 리스트 만들기

1. 모달 형식으로 토글되도록 만듦.
2. 클릭을 하면 맵이 해당 마커의 위치로 이동됨.

이슈

• moveTo 함수를 props로 modalLocList component로 이동시키고 리스트를 클릭할 때 이동되도록 만드려고 했는데 렌더링이 되면 곧바로 마지막 마커의 위치로 이동이 됨.

해결

• moveTo 함수를 bound 시켜 클릭되면 position의 값이 적용되어 실행 되게끔 설정.