React를 사용한 Slack 클론 | 시맨틱 UI | 그래프QL | PostgresSQL(6부)

이전에는 Graphql 쿼리와 변형을 만들었습니다. 당신은 그것을 찾을 수 있습니다

오늘은 백엔드에서 잠시 뒤로 물러나서 Apollo 클라이언트로 프런트엔드 설정을 해보겠습니다.

반응 프로젝트 만들기

간단하게 하기 위해 프런트엔드용으로 다른 폴더를 만들겠습니다.

cd desktop
mkdir chatroom_front
cd chatroom_front

chatroom_front 폴더 안에 react 프로젝트를 생성하세요.
이름.

npx create-react-app .

물론 시간이 좀 걸립니다 :)

프로젝트 정리

모든 test 파일을 제거하십시오. 따라서 확장자가 .test.js인 모든 항목을 제거할 수 있습니다. logo.svg , serviceWorkers.js 및 setupTests.js도 제거합니다.

패키지 설치

우선 필요한 모든 패키지를 설치해 보겠습니다.

npm i @apollo/client graphql react-hook-form semantic-ui-css semantic-ui-react react-router-dom

백엔드에서 apollo 서버에 연결/통신하는 데 사용되는 @apollo/client

graphql을 사용하면 프런트엔드에서 쿼리 및 변형을 호출할 수 있습니다.
-** react-hook-form** 후크를 사용하는 양식에 대한 양식 유효성 검사 패키지(개인 취향, 필수는 아님)

semantic-ui-css 및 semantic-ui-react는 UI에 사용되었습니다.

앱 전체를 라우팅하는 데 사용되는 react-router-dom입니다.

Apollo 클라이언트 설정

아폴로 설정을 해봅시다.
내부 src > index.js 추가

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache()
});

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

백엔드 apollo 서버에 대한 연결을 설정하는 ApolloClient를 가져오고 있습니다. 연결하려는 백엔드 apollo 서버에 uri를 전달해야 합니다. ApolloProvider 는 앱이 모든 것에 액세스할 수 있도록 하는 래퍼이며 client 를 전달합니다.

그 동안 이 파일에도 시맨틱 CSS 스타일을 추가해 보겠습니다.

import "semantic-ui-css/semantic.min.css";

따라서 결국 index.js 파일은 다음과 같아야 합니다.

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import App from "./App";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache()
});
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

지금까지의 프로젝트 구조

현재 간단한 설정이 있습니다. 필요한 모든 양식 구성 요소가 있습니다.
src 디렉토리 내부에 Home.js 구성 요소를 만듭니다.

import React from "react";

const Home = () => {
  return <div>Auth or Slack</div>;
};

export default Home;

이것은 로그인하지 않은 경우 인증 페이지(잠시 후 생성됨) 또는 로그인한 경우 Slack 구성 요소를 렌더링하는 구성 요소입니다.
src 디렉토리에 구성 요소 폴더를 만듭니다. 내부 src > components 다음 폴더 추가 =>

src > components > auth
src > components > channel
src > components > message
src > components > team

지금은 이러한 폴더에 양식 구성 요소가 있습니다.

src > 구성 요소 > 인증 > Login.js 및 Register.js 및 login.css

src > 구성 요소 > 채널 > CreateChannel.js

src > 구성 요소 > 메시지 > CreateMessage.js

src > 구성 요소 > 팀 > CreateTeam.js

내부 src > App.js 파일에 이러한 구성 요소에 대한 경로를 추가해 보겠습니다.

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import CreateTeam from "./components/team/CreateTeam";
import Channel from "./components/channel/CreateChannel";
import Home from "./Home";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
          <Route path="/create-team" component={CreateTeam} />
           <Route path="/create-message" component={CreateMessage} />
          <Route path="/create-channel" component={CreateChannel} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

여기에는 특별한 것이 없으며 기본 라우팅 설정만 있습니다. 결국 파일은 다음과 같아야 합니다 =>

src > 구성요소 > 인증 > Login.js

import React from "react";

const Login = () => {
  return <div>login</div>;
};
export default Login;

src > 구성요소 > 인증 > Register.js

import React from "react";

const Register = () => {
  return <div>register</div>;
};
export default Register;

src > 구성요소 > 채널 > CreateChannel.js

import React from 'react'

const CreateChannel = () => {
    return (
        <div>
            create channel
        </div>
    )
}
export default CreateChannel;

src > 구성 요소 > 메시지 > CreateMessage.js

import React from "react";

const CreateMessage = () => {
  return <div>im the create message component</div>;
};

export default CreateMessage;

src > 구성요소 > 팀 > CreateTeam.js

import React from 'react'

const CreateTeam = () => {
    return (
        <div>
            create team 
        </div>
    )
}

export default CreateTeam

결국 폴더 구조는 다음과 같아야 합니다.



그게 전부입니다. 다음 기사에서는 react-hook-form과 함께 Semantic을 사용하여 login 및 register UI를 완성하는 작업을 할 것입니다. 계속 지켜봐! :)

참고로 login.css 파일이 비어 있으니 걱정하지 마세요 :)