미래학자

#2.78 Chat Screen Mutation 저번에는 데이터를 콘솔에 찍히도록 했고, 이번에는 메시지를 보이도록 처리하고, 메시지 입력까지 해보자. src/components/Message/Message.tsx 메시지를 정의하자. withProps 라는 것을 새로 사용했다. styled-components에서 props를 확장하려면 이걸 사용하면 될 것같다. (니콜라스가 사용하지 않지만 찾아서 추가 함) import React from 'react'; import styled, { withProps } from '../../typed-components'; interface IProps { text: string; mine: boolean; } const Container..

#2.70 Apollo Subscriptions part One 이전에는 요청한 ride를 쿼리로 날려서 가져오도록 했고, 이번에는 ride를 subscribe 해서 실시간으로 요청된 ride를 운전자가 받아 볼 수 있도록 하자. 먼저 subscribtion을 정의하자. src/routes/Home/Home.quries.ts SUBSCRIBE_NEARBY_RIDE subscription을 작성했고, yarn codgen으로 타입을 생성하자. ... export const SUBSCRIBE_NEARBY_RIDE = gql` subscription nearbyRides { NearbyRideSubscription { id pickUpAddress dropOffAddress price distance pass..

이번 강의는 며칠이 걸린건지.. 상당히 오래 걸렸다. 니콜라스가 했던 코드 외에 조금 변경한 것들 때문에 조금 고생했다. #2.68 Getting Nearby Rides part One 근처의 Ride 요청을 받아오도록 하자. 먼저 Query를 작성하고 호출 하도록 하자. (아무래도 HomeContainer가 너무 비대해지고 있어서, 가능하면 탑승자일 때랑 운전자일때랑 구분해서 처리하는게 좋지 않을까하고 생각한다.) src/routes/Home/Home.queries.ts GET_NEARBY_RIDE 를 작성 후 yarn codegen을 실행하자. ... export const GET_NEARBY_RIDE = gql` query getRides { GetNearbyRide { ok error ride {..

#2.66 Ejecting from Apollo Boost Apollo-Boost라는 만능 라이브러리를 사용했는데, 이번에는 세부 라이브러리로 쪼개어 적용한다. apollo-boost는 아래에 열거된 라이브러리를 모아서 익스프레스에 매핑한 프레임워크라고 생각하면 될 것 같다. $ yarn add apollo-cache-inmemory apollo-client apollo-link apollo-link-error apollo-link-http apollo-link-state apollo-link-ws apollo-utilities subscriptions-transport-ws src/apollo.ts import { InMemoryCache } from "apollo-cache-inmemory"; imp..

#2.57 HomeScreen Getting Directions part One 구글맵의 기능을 계속 확장하고 있다. 이전에 목적지를 표시했다면, 목적지와 내 위치를 둘다 적절히 표시할 수 있게 하자. google maps에서는 bounds를 생성하는 것인데 아래 그림 그럼 두 위치를 포함하는 bounds를 생성해서 필요한 만큼 줌을 조절하여 화면에 보여준다. src/routes/Home/HomeContainer.tsx setBounds 라는 함수를 별도로 빼서 목적지를 검색하면 state를 업데이트하고 두 지점간에 bounds를 생성하게 했다. ... public toMarker: google.maps.Marker | null = null; public directions: google.maps.Dir..

#2.54 HomeScreen User Marker 우버 서비스는 동작은 대부분이 지도에서 이뤄진다. HomeScreen도 google maps를 띄우자. 띄우는 방법은 find-address와 동일하다. src/routes/Home/index.ts Container가를 google maps를 사용할 수 있도록 래핑한다. import dotenv from 'dotenv'; import { GoogleApiWrapper } from 'google-maps-react'; import HomeContainer from './HomeContainer'; dotenv.config(); export default GoogleApiWrapper({ apiKey: process.env.REACT_APP_GOOGLE_M..

#2.51 Geocoding part One handleDragEnd에서 lat, lng, address 모두 갱신해주는데, address의 값을 별도로 분리를 했다. src/routes/FindAddress/FindAddressContainer.tsx reverseGeocodeAddress를 정의하여 address를 별로도 업데이트하는 함수를 만들었고, 처음 페이지가 로딩될때, 그리고 드래그 될 때 동작하도록 수정했다. ... public handleGeoSuccess: PositionCallback = (position: Position) => { const { coords: { latitude, longitude } } = position; this.setState({ lat: latitude, l..

이번에는 장소 데이터를 구글 맵을 통해 연동하도록 한다. 언뜻 봤는데 조금 어려워 보인다. #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.39 Uploading Profile Photo to Cloudinary part One (1) 이번에는 이미지 파일을 수정하는 것인데, 지금까지 프로필은 facebook을 통해 url을 통해 이미지를 가져왔다. 마찬가지로 url을 통해서 이미지를 수정하게 해줄 거다. 다만 이미지를 저장하는 저장소가 있어야 하는데, 니콜라스가 간단한 서비스를 소개해줬다. https://cloudinary.com/ 무료로 이미지를 어느 정도 사용할 수 있나보다. 먼저 프로필 변경 컴포넌트를 생성하자. src/components/PhotoInput/PhotoInput.tsx import React from "react"; import styled from "../../typed-components"; const Con..