[ 14부 ] GraphQL, Typescript 및 React를 사용하여 Twitter 복제본 만들기( Frontend 시작 )

안녕하세요 여러분 ;).

참고로 저는 이렇게 하고 있습니다Tweeter challenge

Db diagram

약간의 프론트엔드

Frontend 부분은 React + Tailwindcss + Typescript를 사용하겠습니다. 방금 템플릿을 찾았으니 시도해 보겠습니다. 모든 것을 구성하지 않고 시간을 벌 수 있다면 ... 가져 가겠습니다 ^^. 디자인의 경우 devChallenges.io의 모든 챌린지는 Figma 파일을 제공하므로 처음부터 디자인을 시작할 필요가 없습니다. 당신은 감사 할 수 있습니다


.ltag__user__id__367332 .follow-action-button {
background-color: #2f80ed !important;
색상: #ffffff !중요;
border-color: #2f80ed !important;
}

Thu Nghiem

Creator of devchallenges.io, Software developer at Telia Finland



:디

npx create-react-app challenge_twitter_front --template tailwindcss-typescript

yarn start

모든 것이 작동하는 것 같습니다. 필요한 라이브러리를 더 추가해 보겠습니다.

yarn add @apollo/client graphql recoil react-hook-form @hookform/resolvers yup react-router-dom date-fns react-icons

@apollo/client 및 graphql: 쿼리/변이 및 graphql 관련 항목용

반동: 글로벌 상태 관리용

react-hook-form @hookform/resolvers yup: 양식 유효성 검사용

react-router-dom: 라우터

date-fns: 형식을 지정할 날짜가 있습니다

.

react-icons: 아이콘을 가지고 놀기 위해 ;)

시작하려면 일부 페이지와 함께 라우터를 추가해 보겠습니다.

src/App.tsx

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login">
          <Login />
        </Route>
        <Route exact path="/register">
          <Register />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

export default App

예를 들어 여기 제 등록 페이지가 있습니다.

src/페이지/Register.tsx

import React from 'react'

const Register = () => {
  return <div>Register</div>
}

export default Register

사용자 등록

인증부터 시작하겠습니다. 유효성 검사를 위해 yup과 함께 react-hooker-form을 사용합니다. 그러나 등록 페이지에서 작업하기 전에 apolloClient를 생성해 보겠습니다.

src/클라이언트/index.ts

import { ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: process.env.REACT_APP_BACKEND_URL || 'http://localhost:4000',
  cache: new InMemoryCache(),
})

export default client

지금은 설명서를 따릅니다 ;). apolloClient에서 제공하는 일부 후크에 액세스하려면 앱을 ApolloProvider로 래핑합니다.

src/index.tsx

import { ApolloProvider } from '@apollo/client'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import client from './client'
import './styles/index.css'

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

모든 것이 예상대로 작동하는지 테스트하기 위해 내 등록 페이지에서 플레이하겠습니다 ;).

src/페이지/Register.ts

import { gql, useMutation } from '@apollo/client'
import React from 'react'

const REGISTER = gql`
  mutation($input: RegisterPayload!) {
    register(input: $input) {
      token
      user {
        id
        username
        display_name
        email
        created_at
        updated_at
      }
    }
  }
`

const Register = () => {
  const [register, { loading, data, error }] = useMutation(REGISTER)

  return (
    <div>
      <button
        onClick={() => {
          register({
            variables: {
              input: {
                username: 'new',
                email: '[email protected]',
                display_name: 'New',
                password: 'password',
              },
            },
          })
        }}
      >
        Register
      </button>
      {loading && <div>Loading...</div>}
      {data && <div>{data.register.user.username}</div>}
    </div>
  )
}

export default Register

서버를 시작하는 것을 잊지 말고 시도해 봅시다 ;).



멋진 ;). 클라이언트가 예상대로 작동하는 것 같습니다.

지금은 여기서 멈추고 다음 부분에서 사용자 등록 작업을 시작하겠습니다. ;).

차오 & 조심해 ;).