소주제 : 지도 기능 구현 with 카카오 지도 API
1. 지도 연동하기(카카오지도)
- 카카오개발자 사이트에 회원가입하고 앱을 만들어 주세요.(이미 앱이 있다면, 새로 만들어 주세요.)
- 사이트를 등록(http://localhost:3000)하고, 발급 받은 javascript 키를 복사해 주세요.
- /pages/26/map1/index.tsx 페이지를 만들고, 카카오 지도를 그려주세요.
- /pages/26/map2/index.tsx 페이지를 만들고, [이동하기] 버튼을 하나 만들어 주세요.
⇒ [ 이동하기 ] 버튼을 클릭하면 /pages/26/map1/index.tsx로 router.push 하여 이동해 주세요.
⇒ 이 때, 에러가 발생한다면, 발생하지 않도록 수정해 주세요.
- 카카오 지도에 마커를 표시해 주세요.
⇒ 마커의 위치는 자신이 좋아하는 장소를 표시하면 됩니다.
- 클릭한 위치에따라 마커가 이동되도록 만들어 주세요.
- 마커의 이미지를 자신이 좋아하는 이미지로 변경해 주세요.
2. apollo-cache-state 직접 변경하기
- fetchBoards 를 요청하여 게시물 목록을 불러와 주세요.
- 불러온 목록을 보기 좋게 꾸며 주세요.
- 같은 페이지에 작성자, 비밀번호, 제목, 내용 입력창을 만들고, 게시물 등록하기 버튼을 만들어 주세요.
- 게시물 등록하기 버튼을 누를 경우, createBoard 뮤테이션을 요청해 주세요.
- 등록된 data가 반영된 최신 목록을 보여주기 위해, refetchQueries를 사용해 보세요.
- 이번에는 서버 부하 감소를 위해 refetchQueries를 사용하지 않고, 직접 apollo-state를 변경해 보세요.
⇒ 힌트: cache.modify를 사용합니다.
- 게시물 목록의 각각의 행에 [X] 버튼을 추가해 주세요.
- 해당 버튼을 누르면 deleteBoard 뮤테이션을 요청해 주세요.
- 제거된 data가 반영된 최신 목록을 보여주기 위해, refetchQueries를 사용해 보세요.
- 이번에는 서버 부하 감소를 위해 refetchQueries를 사용하지 않고, 직접 apollo-state를 변경해 보세요.