티스토리

미래학자

검색하기

블로그 홈

미래학자

futurists.tistory.com/m

미래학자 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

36 우버 클론 코딩 (nomad coders) #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.. 공감수 1 댓글수 0 2019. 7. 8.
35 우버 클론 코딩 (nomad coders) #2.75 Ride Status Subscription 이전에 운전자가 버튼을 눌러서 상태를 업데이트 하도록 했다. 이 상태 업데이트를 운전자, 승객 모두 subscription하도록 해보자. src/routes/Ride/Ride.queries.ts RIDE_SUBSCRIPTION 을 정의하고 yarn codegen을 하자. ... export const RIDE_SUBSCRIPTION = gql` subscription rideUpdate { RideStatusSubscription { id status pickUpAddress dropOffAddress price distance duration driver { id fullName profilePhoto } passenger { id fullName.. 공감수 0 댓글수 0 2019. 7. 6.
34 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 1 2019. 7. 2.
33 우버 클론 코딩 (nomad coders) 이번 강의는 며칠이 걸린건지.. 상당히 오래 걸렸다. 니콜라스가 했던 코드 외에 조금 변경한 것들 때문에 조금 고생했다. #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 {.. 공감수 0 댓글수 1 2019. 6. 28.
3장 HTTP 메시지 [HTTP 완벽가이드] 3장 HTTP 메시지 이번 장에서 다룰 내용 메시지가 어떻게 흘러가는가 HTTP 메시지의 세 부분(시작줄, 헤더, 개체 본문) 요청과 응답 메시지의 차이 요청 메시지가 지원하는 여러 기능(메서드)들 응답 메시지가 반환하는 여러 상태 코드들 여러 HTTP 헤더들은 무슨 일을 하는가 3.1 메시지의 흐름 HTTP 메시지는 HTTP 애플리케이션 간에 주고 받은 데이터의 블록들이다. 이런 메시지는 방향성이 있어서 몇가지 용어가 등장 한다. '인바운드', '아웃바운드', '업스트림', '다운스트림' 3.1.1 메시지는 원 서버 방향을 인바운드로 하여 송신된다. 간단하게 서버를 기준으로 들어가는 방향이 인바운드, 서버에서 외부로 나가는 방향을 아웃바운드라 한다. 3.1.2 다운스트림으로 흐르는 메시지 클라언트에서 .. 공감수 0 댓글수 0 2019. 6. 26.
32 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 12 2019. 6. 26.
31 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 0 2019. 6. 24.
2장 URL과 리소스 [HTTP 완벽가이드] 이 장에서 다루는 내용들 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... 공감수 1 댓글수 0 2019. 6. 23.
30 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 0 2019. 6. 23.
29 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 0 2019. 6. 21.
1장 HTTP 개관 [HTTP 완벽가이드] 이번 장에서 다룰 내용들 얼마나 많은 클라이언트와 서버가 통신하는지 리소스(웹 콘텐츠)가 어디서 오는지 웹 트랜잭션이 어떻게 동작하는지 HTTP 통신을 위해 사용하는 메시지의 형식 HTTP 기저의 TCP 네트워크 전송 여러 종류의 HTTP 프로토콜 인터넷 곳곳에 설치된 다양한 HTTP 구성 요소 1.1 HTTP: 인터넷의 멀티미디어 배달부 웹에서 통신할 때 우리는 다양한 포맷을 주고 받는다.(text, image, video 등) 우리는 다양한 데이터를 주고 받고 데이터라 누락된 것이 없는지에 대한 걱정을 하지 않는다. 이것은 네트워크 차원에서 신뢰성을 보장하기 때문이다. 1.2 웹 클라이언트와 서버 HTTP 프로토콜로 의사소통 하는 두 개의 주체를 HTTP 클라이언트, HTTP 서버라고 한다. 1.3 .. 공감수 0 댓글수 0 2019. 6. 20.
28 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 5 2019. 6. 19.
27 우버 클론 코딩 (nomad coders) 이번에는 장소 데이터를 구글 맵을 통해 연동하도록 한다. 언뜻 봤는데 조금 어려워 보인다. #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를 검색하면 하나가 뜨고 사용하도록 설정하.. 공감수 0 댓글수 0 2019. 6. 17.
26 우버 클론 코딩 (nomad coders) #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를 생성하고... 공감수 0 댓글수 0 2019. 6. 13.
25 우버 클론 코딩 (nomad coders) #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... 공감수 0 댓글수 0 2019. 6. 10.
24 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 0 2019. 6. 7.
23 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 0 2019. 6. 4.
22 우버 클론 코딩 (nomad coders) #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.. 공감수 0 댓글수 10 2019. 6. 1.
21 우버 클론 코딩 (nomad coders) 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"; .. 공감수 0 댓글수 0 2019. 5. 30.
우버 클론 코딩 (nomad coders) #20 #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.. 공감수 0 댓글수 0 2019. 5. 28.
우버 클론 코딩 (nomad coders) #19 #2.18 PhoneLogin Mutation part One 이번에 클라이언트에서 첫 Mutation을 작성할 거다. 강의를 들어보니 조금 복잡한 형태고, 나도 충분히 이해하지 못한 상태이다. 일단 시작하자. chome extension 중에 apollo가 설치되어 있지 않다면, 설치하자. 클라이언트단에서 연결된 graphql endpoint의 쿼리를 볼수 있다. 이번에는 StartPhoneVerification mutation을 실행할텐데, 인자로 phoneNumber를 받고, 응답은 ok, error 필드를 가진다. src/routes/PhoneLogin/PhoneLogin.queries.ts import { gql } from "apollo-boost"; export const PHONE_SIGN.. 공감수 0 댓글수 0 2019. 5. 27.
우버 클론 코딩 (nomad coders) #18 #2.13 Login Component and React Helmet 리액트는 SPA고 실제로는 하나의 페이지인데 우리는 페이지별로 meta 태그 내용을 바꾸고 싶을 때가 있다. 예를들면 meta에는 현재 페이지에 대한 정보가 있는데, 리액트에서 사용하는 page 단위로 컨트롤을 해줄 필요가 있다. 이런 컨트롤을 해주는 것이 react-helmet 모듈이다. $ yarn add react-helmet public/index.html 에서 title만 바꾸자. 지금은 title이 React App 로 되어있다. ... Nuber ... 이렇게 하고 서버 보면 title이 정상적으로 바뀐다. 이제 페이지별로 변경해놓자. src/routes/Login/LoginPresenter.tsx 을 추가 하자. impo.. 공감수 0 댓글수 0 2019. 5. 23.
우버 클론 코딩 (nomad coders) #17 #2.7 Typescript and Styled Components part One #2.6 Typescript and Styled Components part Two 이번에 짧게 styled-components 모듈의 설치하고 사용법을 간단히 살펴 보자. 강의 기준은 styled-components V3 인데, 지금은 V4가 최신이다. 내가 처음 강의 볼때는 문제가 좀 발생해서 나 나름대로 조금 수정했다. $ yarn add styled-components src/theme.ts 에 theme을 정의 한다. 위에서 IThemeInterface 인터페이스 대로 값을 만든다. import baseStyled, { ThemedStyledInterface } from 'styled-components&.. 공감수 0 댓글수 0 2019. 5. 20.
우버 클론 코딩 (nomad coders) #16 nomad coders의 우버 클론 코딩 클라이언트 파트를 시작한다. #2.0 Create React App with Typescript 내가 글을 작성했을 떄가 cra 3.0.0이 최신이었고, 컴퓨터에 깔려 있는 버전이 2.1.8 버전이었다. 따로 업데이트 명령은 없고 설치 명령을 하면 버전업이 된다. 버전 확인을 하고 2.10 이상이 아니면 꼭 버전업을 하자. (이 프로젝트는 백엔드와 마찬가지로 typescript를 사용할 것이고, cra 2.10 버전부터인가 typescript를 정식 지원 한다고 알고 있다.) $ create-react-app -V $ npm install -g create-react-app $ create-react-app -V $ yarn create react-app nc-d.. 공감수 0 댓글수 0 2019. 5. 9.
우버 클론 코딩 (nomad coders) #15 #1.81 Creating a ChatRoom 승객이 Ride를 요청하고, 운전자가 Ride를 수락하면 채팅이 가능하게 해야 한다. 여기서 내가 잘못 생각한게 있었다. 채팅방이 생성되면 거기서 여러 승객이 합석했을 때 다 같이 채팅하는 줄 알았는데, 여기서는 운전자와 Ride를 요청한 승객이 1:1 대화만 한다. 그리고 차에 타면 채팅방은 사라지는 것 같다. 니콜라스도 처음에 여럿이 채팅하는 걸로 entity구조를 짠거 같은데 보니까, 이번에 조금 수정해서 1:1 대화 형태로 만들었다. 그렇기 떄문에 아래처럼 entity를 수정해줘야 한다. src/entities/Chat.ts 기존에 있던 participants 를 passenger와 driver로 구분했고, 별도의 각 id 필드 passengerId,.. 공감수 0 댓글수 5 2019. 5. 3.
우버 클론 코딩 (nomad coders) #14 #1.76 UpdateRideStatus Resolver part One 이전에 Ride를 요청하고 운전자가 주변으로 요청된 Ride를 확인하는 것 까지 했다. 이제 운전자는 요청된 Ride를 수락해야 한다. src/api/Ride/UpdateRideStatus/UpdateRideStatus.graphql type UpdateRideStatusResponse { ok: Boolean! error: String } enum StatusOptions { ACCEPTED FINISHED CANCELED REQUESTING ONROUTE } type Mutation { UpdateRideStatus( rideId: Int!, status: StatusOptions! ): UpdateRideStatusRespon.. 공감수 0 댓글수 0 2019. 5. 2.
우버 클론 코딩 (nomad coders) #13 #1.72 RequestRide Resolver 이번에는 RequestRide 의 Query를 정의할 것이다. 내가 우버 택시에 대해서 오해한 점이 있다. 나는 이 서비스가 카풀인줄 알았다.그런데 그게 아니라 카카오 택시 같은 택시였다. 그렇기 때문에 탑승자는 자신이 가고자 하는 길을 요청하고, 이 요청은 가장 가까이 있는 운전자에게가는 것이다. src/entities/Ride.ts Ride entity를 조금 손볼 게 있다. status 필드의 default 값을 추가하고, driver에 nullable: true로 설정하자. ... @Column({ type: "text", enum: ["ACCEPTED", "FINISHED", "CANCELED", "REQUESTING", "ONROUTE"], de.. 공감수 0 댓글수 0 2019. 5. 1.
우버 클론 코딩 (nomad coders) #12 #1.64 GetNearbyDrivers Resolver part One #1.64 GetNearbyDrivers Resolver part Two 이번에는 사용자가 근처에서 운행 중인 운전자를 찾을 때의 Query를 구현할 것이다. src/api/User/GetNearbyDrivers/GetNearbyDrivers.graphql type GetNearbyDriversResponse { ok: Boolean! error: String drivers: [User] } type Query { GetNearbyDrivers: GetNearbyDriversResponse! } src/api/User/GetNearbyDrivers/GetNearbyDrivers.resolvers.ts import { Resolver.. 공감수 0 댓글수 0 2019. 4. 29.
우버 클론 코딩 (nomad coders) #11 프로젝트를 시작할 때 tslint가 정상적으로 돌고 있지 않았는데, 원인이 tslint를 글로벌로 설치를 하고 typescript또한 글로벌로 설치를 해야 했었다. 이런 버그를 수정하고 나니 tslint가 import 순서를 지적 많이 해줘서 부득이하게 #1.62 부터 tslint에서 잡아준 import 순서대로 코드를 올리게 됐다. 이번에는 Place 정보를 추가하고 삭제하고 변경하는 과정을 진행할 예정이다. #1.60 AddPlace Resolver 이번에는 장소를 추가하는 type과 Mutation을 정의할 차례다. 한 사람은 여러 장소를 가질 수 있다. 주소가 같은 장소래도 사용자마다 독립적으로 가지는 형태인거 같다. 기존에는 장소와 유저와의 관계가 없었기 때문에 추가한다. src/api/User.. 공감수 0 댓글수 0 2019. 4. 28.
우버 클론 코딩 (nomad coders) #10 #1.56 UpdateMyProfile Resolver part One #1.56 UpdateMyProfile Resolver part Two 유저의 정보를 업데이트 하는 type과 mutation을 작성하자 src/api/User/UpdateMyProfile/UpdateMyProfile.graphql type UpdateMyProfileResponse { ok: Boolean! error: String } type Mutation { UpdateMyProfile( firstName: String, lastName: String, email: String, password: String, profilePhoto: String, age: Int, phoneNumber: String ): UpdateMyPr.. 공감수 0 댓글수 0 2019. 4. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.