소주제 : 지도 기능 구현 with 카카오 지도 API

1. 지도 연동하기(카카오지도)

  1. 카카오개발자 사이트에 회원가입하고 앱을 만들어 주세요.(이미 앱이 있다면, 새로 만들어 주세요.)
  2. 사이트를 등록(http://localhost:3000)하고, 발급 받은 javascript 키를 복사해 주세요.
  3. /pages/26/map1/index.tsx 페이지를 만들고, 카카오 지도를 그려주세요.
  4. /pages/26/map2/index.tsx 페이지를 만들고, [이동하기] 버튼을 하나 만들어 주세요. ⇒ [ 이동하기 ] 버튼을 클릭하면 /pages/26/map1/index.tsx로 router.push 하여 이동해 주세요. ⇒ 이 때, 에러가 발생한다면, 발생하지 않도록 수정해 주세요.
  5. 카카오 지도에 마커를 표시해 주세요. ⇒ 마커의 위치는 자신이 좋아하는 장소를 표시하면 됩니다.
  6. 클릭한 위치에따라 마커가 이동되도록 만들어 주세요.
  7. 마커의 이미지를 자신이 좋아하는 이미지로 변경해 주세요.

2. apollo-cache-state 직접 변경하기

  1. fetchBoards 를 요청하여 게시물 목록을 불러와 주세요.
  2. 불러온 목록을 보기 좋게 꾸며 주세요.
  3. 같은 페이지에 작성자, 비밀번호, 제목, 내용 입력창을 만들고, 게시물 등록하기 버튼을 만들어 주세요.
  4. 게시물 등록하기 버튼을 누를 경우, createBoard 뮤테이션을 요청해 주세요.
  5. 등록된 data가 반영된 최신 목록을 보여주기 위해, refetchQueries를 사용해 보세요.
  6. 이번에는 서버 부하 감소를 위해 refetchQueries를 사용하지 않고, 직접 apollo-state를 변경해 보세요. ⇒ 힌트: cache.modify를 사용합니다.
  7. 게시물 목록의 각각의 행에 [X] 버튼을 추가해 주세요.
  8. 해당 버튼을 누르면 deleteBoard 뮤테이션을 요청해 주세요.
  9. 제거된 data가 반영된 최신 목록을 보여주기 위해, refetchQueries를 사용해 보세요.
  10. 이번에는 서버 부하 감소를 위해 refetchQueries를 사용하지 않고, 직접 apollo-state를 변경해 보세요.