목록2019/06 (15)
미래학자
#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..