미래학자
이번에는 장소 데이터를 구글 맵을 통해 연동하도록 한다. 언뜻 봤는데 조금 어려워 보인다. #2.46 Google Maps and React part One google maps API를 사용해서 장소에 대한 데이터를 가져오는 것을 진행한다. 차를 운행하는 길이라던가 사용자의 장소 등에 대한 데이터를 나타낼때 등 잘 활용해야 한다. 먼저 google maps API를 사용하기 위해서는 API를 사용하도록 설정해야 한다. https://console.cloud.google.com 에 가서 프로젝트를 하나 생성하자. https://console.cloud.google.com/google/maps-apis 로 이동해서 검색에 java maps javascript api를 검색하면 하나가 뜨고 사용하도록 설정하..
#2.44 AddPlace Mutation 이전에는 view 작업을 했고 이제 장소를 추가하는 mutation을 작성하자. src/routes/AddPlace/AddPlace.queries.ts import { gql } from "apollo-boost"; export const ADD_PLACE = gql` mutation addPlace ( $name: String! $lat: Float! $lng: Float! $address: String! $isFav: Boolean! ) { AddPlace( name: $name lat: $lat lng: $lng address: $address isFav: $isFav ) { ok error } } `; yarn codegen으로 queries를 생성하고...
#2.41 Settings Screen part One 설정창에는 로그아웃 버튼이라든가 내가 저장한 장소 같은 내용들이 있다. Settings 페이지 디자인은 니콜라스가 해뒀다. Place 컴포넌트를 만들자. src/components/Place/Place.tsx import React from "react"; import styled from "../../typed-components"; const Place = styled.div` margin: 15px 0; display: flex; align-items: center; & i { font-size: 12px; } `; const Container = styled.div` margin-left: 10px; `; const Name = styled...