TIL # 14 - 먹방 프로젝트 리팩토링 # 1

정승옥(seungok)·2021년 4월 26일
0

TIL

목록 보기
14/16
post-thumbnail

✍️ 수정사항

  • 현재 화면을 범위를 기준으로 좌표가 변경될 때마다 데이터를 요청하여 마커를 지도에 표시했었다.
  • 이 방식을 구현한 이유는 마커가 지도에 올라가면 범위 밖에 있어도 마커가 계속 지도에 표시된다고 생각하여 지속적으로 범위 밖과 중복되는 마커들을 삭제했다.
  • 하지만 카카오 지도 API 에서 자동으로 범위 밖에 마커들은 display:none 상태로 변경시켰고 범위 안에 들어올 경우 다시 마커들이 표시됐다.
  • 수정한 방법은 초기에 전체 데이터를 요청하고 이후에 필터링될 때만 데이터를 새로 요청해서 지도의 마커를 다시 표시했다.
  • 반면 가게 리스트를 보여주는 컴포넌트에서는 현재 지도 범위 안에 있는 데이터를 보여줘야하기 때문에 지속적으로 데이터를 요청했다.
  • 이미지 URL 을 주소 복붙으로 백엔드에 전달하여 일부 이미지들은 불러와지지 않아 매 데이터 통신마다 에러 메세지가 누적돼 이를 해결하기 위해 AWS S3 를 이용했다.

🤜 수정결과

✅ 초기 렌더링

  • 초기 렌더링때 지도와 클러스터러를 생성한다.
  • mapclusterer 인스턴스는 현재 지도의 중심값, 등록된 클러스터러 삭제 등 추가적인 활용을 위해 state 에 담아 관리했다.

✅ 지도 생성 이후

  • 데이터를 요청하는 부분을 담은 getStoreData 함수를 컴포넌트 외부에 선언하고 API URL 과 삭제/생성에 필요한 데이터를 인자로 전달했다.
  • 지도가 생성된 후와 가격/카테고리 필터링을 했을때 실행하기 위해 의존성 배열에 mapInstance, price, category 를 담았다.
  • 마커와 오버레이 객체들을 배열로 관리하여 가게 리스트 컴포넌트 쪽에서 마우스를 올렸을 때 해당 마커와 id 값이 같을 경우 오버레이 또는 클러스터의 색상이 변경되는 기능에 활용할 생각이다.

📌 가게 리스트

  • 가게 리스트는 현재 지도 범위 안에 있는 데이터를 받아야한다.
  • 좌표, 범위, 필터링 변화가 발생할 때 마다 해당 조건에 맞는 데이터를 받아야한다.

  • 데이터 요청은 스크롤 이벤트와 OFFSET, LIMIT 을 통해 이뤄진다.
  • 여기서 LIMIT 값이 고정일 경우 리스트 높이가 사용자 화면의 높이보다 작아 스크롤이 발생하지 않아 데이터를 추가적으로 요청할 수 없다.
  • LIMIT 값은 (리스트 컴포넌트 높이 / 리스트 하나의 높이) 을 반올림한 값으로 수정했다.
  • 스크롤 이벤트 경우 useRef 를 통해 렌더링과 무관한 값을 저장하여 CURRENT_DATA, OFFSET 을 통해 데이터를 초기화하거나 추가 요청 방지에 대한 조건으로 활용했다.

📌 AWS S3 설정

  • AWS S3버킷 이라는 최상위 디렉토리를 생성하고 그 안에 객체 라는 단위로 파일, 메타 데이터를 저장할 수 있다.
  • AWS IAM Policy 을 사용해 S3 Bucket Policy 를 편집하여 Public Access 에 대한 권한을 설정할 수 있다.
  • 다른 aws 서비스를 사용하는 경우 aws-sdk 패키지를 설치하고 아니라면 react-s3 라이브러리를 사용해도 된다.
  • AWS IAM Policy 참고 자료

  • react-s3 라이브러리에서 제공하는 uploadFile 함수는 configfile 두가지를 인자로 받는다.
  • config : 버킷의 이름, 리전 코드, accesskeyId, secretAccessKey를 담고 있는 객체
  • file : 업로드할 이미지 파일 데이터를 가지고 있는 객체

  • 실행 결과로 성공했을 경우 AWS S3에 업로드한 이미지의 URL이 포함된 data 를 반환한다.
profile
Front-End Developer 😁

0개의 댓글