미래학자

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

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

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

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

#1.81 Creating a ChatRoom 승객이 Ride를 요청하고, 운전자가 Ride를 수락하면 채팅이 가능하게 해야 한다. 여기서 내가 잘못 생각한게 있었다. 채팅방이 생성되면 거기서 여러 승객이 합석했을 때 다 같이 채팅하는 줄 알았는데, 여기서는 운전자와 Ride를 요청한 승객이 1:1 대화만 한다. 그리고 차에 타면 채팅방은 사라지는 것 같다. 니콜라스도 처음에 여럿이 채팅하는 걸로 entity구조를 짠거 같은데 보니까, 이번에 조금 수정해서 1:1 대화 형태로 만들었다. 그렇기 떄문에 아래처럼 entity를 수정해줘야 한다. src/entities/Chat.ts 기존에 있던 participants 를 passenger와 driver로 구분했고, 별도의 각 id 필드 passengerId,..

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

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

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

프로젝트를 시작할 때 tslint가 정상적으로 돌고 있지 않았는데, 원인이 tslint를 글로벌로 설치를 하고 typescript또한 글로벌로 설치를 해야 했었다. 이런 버그를 수정하고 나니 tslint가 import 순서를 지적 많이 해줘서 부득이하게 #1.62 부터 tslint에서 잡아준 import 순서대로 코드를 올리게 됐다. 이번에는 Place 정보를 추가하고 삭제하고 변경하는 과정을 진행할 예정이다. #1.60 AddPlace Resolver 이번에는 장소를 추가하는 type과 Mutation을 정의할 차례다. 한 사람은 여러 장소를 가질 수 있다. 주소가 같은 장소래도 사용자마다 독립적으로 가지는 형태인거 같다. 기존에는 장소와 유저와의 관계가 없었기 때문에 추가한다. src/api/User..

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