미래학자

이번 장에서 다룰 내용들 얼마나 많은 클라이언트와 서버가 통신하는지 리소스(웹 콘텐츠)가 어디서 오는지 웹 트랜잭션이 어떻게 동작하는지 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를 검색하면 하나가 뜨고 사용하도록 설정하..

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

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

#2.36 EditProfile Screen part One 이번에는 계정 정보 변경인데 중요하진 않지만 필요한 기능이다. 아직 뷰가 없어서 니콜라스가 미리 만들어논 뷰로 채우자. src/routes/EditAccount/EditAccountPresenter.tsx import Button from "components/Button"; import Form from "components/Form"; import Header from "components/Header"; import Input from "components/Input"; import React from "react"; import { MutationFn } from "react-apollo"; import Helmet from "react..

#2.31 Home Sidebar Component 이제 실제 기능에 대해서 뷰를 만들어 가는 과정을 진행할 거다. Home 페이지부터 차차 만들자. 나는 기존에 slidebar를 구현해서 사용했었는데, react-sidebar 모듈을 설치해서 사용하며 될 것 같다. $ yarn add react-sidebar $ yarn add @types/react-sidebar --dev src/routes/Home/HomePresenter.tsx import React from "react"; import Helmet from "react-helmet"; import Sidebar from "react-sidebar"; import styled from "../../typed-components"; const C..

2.26 Updating Local State 저번에 메일 인증을 하고 넘어온 토큰을 콘솔로 찍어봤다. 이번에는 이 토큰을 통해 로그인 상태를 변경하는 것을 해보자. 앱 전반으로 사용하는 공용 쿼리를 위해 파일을 생성하자. src/sharedQueries.ts import { gql } from "apollo-boost"; export const LOG_USER_IN = gql` mutation logUserIn($token: String!) { logUserIn(token: $token) @client } `; src/api/VerifyPhone/VerifyPhoneContainer.tsx LOG_USER_IN Mutation을 사용하기 위해 추가했다. import React from "react"; ..

#2.22 VerifyPhone Screen 지금까지 phoneLogin 페이지에서 입력한 폰 번호가 유효한지 검사하고, 유효 하면 해당 폰 번호로 번호를 메시지로 보내게 된다. 사용자는 메시지로 온 번호를 입력해야 한다. 이번에 만들 것이 폰으로 넘어온 코드를 입력하는 인증 페이지다. 먼저 페이지에 필요한 컴포넌트를 정의하자. Header, Button 두 컴포넌트를 정의한다. src/components/Header/Header.tsx import React from "react"; import styled from "../../typed-components"; import BackArrow from "../BackArrow"; const Container = styled.header` backgrou..