🥞 오늘 한 일

• 아웃소싱 프로젝트
  • 게시물 작성 시 이미지 업로드 기능 구현
  • 상세 페이지 구조 및 스타일 수정
  • 지도 API 정보 게시물 작성 페이지로 전송 및 등록 구현
  • 게시물 작성 페이지에서 선택한 지도 화면 구현
  • 게시물 상세 페이지에서 등록된 지도 화면 구현
  • 유저 정보 받아오는 함수 제작
  • 장소 설정 페이지 디자인 및 UI 구현
• 스탠다드반 수업
  • Tanstack Query 심화 - 효율적인 대량데이터 로드전략

아웃소싱 프로젝트

이것저것 진행하느라 바쁜 날이었다. 다른 부분들은 그래도 익숙한 부분이었지만, 지도 API 부분이 어떻게 접근해야할지 감이 안 잡혔었다... 다행히 팀원 분께서 테스트 페이지를 제작해 전달해주셔서 해당 파일을 살펴보고, 카카오맵 API 공식 문서를 확인하니 생각보다는 쉽게 진행할 수 있을 것 같았다. 지도에서 좌표를 선택해 게시물 작성 페이지로 전송시키고, 해당 지도 좌표를 게시물 작성 페이지에서 띄우는 작업을 수행했다. 해당 코드는 다음과 같다.

// WritingForm.jsx
const {
  state: { info: mapInfo }
} = useLocation();

<Map
  center={{
    lat: mapInfo.y,
    lng: mapInfo.x
  }}
  style={{
    width: '100%',
    height: '700px'
  }}
  level={3}
  draggable={false}
  zoomable={false}
>
  <MapMarker
    position={{
      lat: mapInfo.y,
      lng: mapInfo.x
    }}
  />
</Map>

mapInfo는 useLocation으로 받아온 지도 정보이다. 해당 정보에서 좌표를 나타내는 y,x를 통해 지도에 만들어주었다.

🍪 배운 것

스탠다드반 수업

• 페이지네이션
• 더보기 / 무한스크롤

🍳 내일 할 일

• 아웃소싱 프로젝트
  • 전체적으로 디테일한 부분 손 보기