미래학자

이번 강의는 며칠이 걸린건지.. 상당히 오래 걸렸다. 니콜라스가 했던 코드 외에 조금 변경한 것들 때문에 조금 고생했다. #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 {..

3장 HTTP 메시지 이번 장에서 다룰 내용 메시지가 어떻게 흘러가는가 HTTP 메시지의 세 부분(시작줄, 헤더, 개체 본문) 요청과 응답 메시지의 차이 요청 메시지가 지원하는 여러 기능(메서드)들 응답 메시지가 반환하는 여러 상태 코드들 여러 HTTP 헤더들은 무슨 일을 하는가 3.1 메시지의 흐름 HTTP 메시지는 HTTP 애플리케이션 간에 주고 받은 데이터의 블록들이다. 이런 메시지는 방향성이 있어서 몇가지 용어가 등장 한다. '인바운드', '아웃바운드', '업스트림', '다운스트림' 3.1.1 메시지는 원 서버 방향을 인바운드로 하여 송신된다. 간단하게 서버를 기준으로 들어가는 방향이 인바운드, 서버에서 외부로 나가는 방향을 아웃바운드라 한다. 3.1.2 다운스트림으로 흐르는 메시지 클라언트에서 ..

#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.61 NearbyDrivers Query 사용자는 주변에 운행 중인 드라이버 정보를 가져올 수 있다. Home으로 접근을 했을 때, 운전자가 아니면 운전자 쿼리를 날려서 운전자의 정보를 가져오도록 하자. 강의를 진행하다보니 역시 HomeContainer가 좀 방대해지는 기분이었다. src/routes/Home/Home.queries.ts GET_NEARBY_DRIVERS를 정의했다. yarn codegen을 해주고 ... export const GET_NEARBY_DRIVERS = gql` query getDrivers { GetNearbyDrivers { ok drivers { id lastLat lastLng } } } `; src/routes/Home/HomeContainer.tsx ... i..

이 장에서 다루는 내용들 URL 문법, 여러 URL 컴포넌트가 어떤 의미를 가지며 무엇을 수행하는지 여러 웹 클라이언트가 지원하는 상대 URL과 확장 URL 같은 단축 URL에 대해서 URL의 인코딩과 문자 규칙 여러 인터넷 정보 시스템에 적용되는 공통 URL 스킴 기존 이름은 유지하면서 객체들을 다른 장소로 옮기는 것을 가능하게 해주는 URN을 포함한 URL의 미래 2.1 인터넷의 리소스 탐색하기 1장에서 URL의 구조를 간단히 설명한 적있다. URL에는 스킴, 호스트, 패스, 쿼리, 프래그먼트가 구성 요소지만, 모두 포함하지 않아도 된다. 스킴, 호스트, 패스 정도가 URL의 항상 포함해야 하는 것들이다. mailto:tamm@google.com ftp:ftp.tamm.com/video/bts-01...

#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..

이번 장에서 다룰 내용들 얼마나 많은 클라이언트와 서버가 통신하는지 리소스(웹 콘텐츠)가 어디서 오는지 웹 트랜잭션이 어떻게 동작하는지 HTTP 통신을 위해 사용하는 메시지의 형식 HTTP 기저의 TCP 네트워크 전송 여러 종류의 HTTP 프로토콜 인터넷 곳곳에 설치된 다양한 HTTP 구성 요소 1.1 HTTP: 인터넷의 멀티미디어 배달부 웹에서 통신할 때 우리는 다양한 포맷을 주고 받는다.(text, image, video 등) 우리는 다양한 데이터를 주고 받고 데이터라 누락된 것이 없는지에 대한 걱정을 하지 않는다. 이것은 네트워크 차원에서 신뢰성을 보장하기 때문이다. 1.2 웹 클라이언트와 서버 HTTP 프로토콜로 의사소통 하는 두 개의 주체를 HTTP 클라이언트, HTTP 서버라고 한다. 1.3 ..

#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를 검색하면 하나가 뜨고 사용하도록 설정하..