react 1일차

로컬에서 개발함 

 

npm : node package manager

yarn : npm과 역할 동일 (편함) 

 

react 설치 명령어 :  yarn create react-app nospoon

 

그럼 디렉토리에 nospoon 디렉토리가 또 생김 --> yarn start

 

OOP (객체지향 프로그래밍) 

Componet : UI를 객체화

 

*yarn add react-router-dom : URL 네비게이팅 해주는 패키지  

*yarn add axios : react가 Django API를 호출하는 패키지

*yarn add antd : react의 UI 라이브러리 

 

code . --> vscode에서 디렉토리 확인

 

다 설치하기 

 

index.html-->index.js-->App.js

 

그럼 파일럿 프로젝트 만들기 

 

1. antd 라이브러리 확인해서 UI 구현하기 

java script 와 type script

 

import {

  BrowserRouter as Router,

  Route,

  Routes,

  Navigate,

  Outlet,

} from "react-router-dom";

function App() {

 return (

 

 <Router>

  <Routes>

    <Route

      path="/ds_search/ds_search"

      element={

        <PrivateRoute

          auth={{ isAuthenticated: login }}

          // perm={{ permissions: permissions }}

        >

          <DSSearch name="search" />

        </PrivateRoute>

      }

    />

    <Route path="/ds_search/ds_login" element={<DSLogin />} />

    <Route

      path="/ds_search/ds_logout"

      element={

        <PrivateRoute auth={{ isAuthenticated: login }}>

          <DSLogout name="logout" />

        </PrivateRoute>

      }

    />

    <Route path="/" element={<DSLogin />} />

  </Routes>

</Router>

);

}

 

--App.js --

 

React Router-dom : 컴포넌트를 Mapping 해줌 

 

import { useEffect, useState } from "react";

import { Link, useHistory } from "react-router-dom";

import axios from "axios";

 

--> 패키지 임포트   

  useEffect(() => {

    fetch();

    let timer = setInterval(() => {

      fetch();

    }, 10000); // 10초 마다 ES 상태 체크

    return () => clearInterval(timer); // 화면을 떠나면 타이머 중단

  }

컴포넌트들 --> useEffect  : 10초마다 한 번씩 fetch 함수를 호출 

  const fetch = () => {

    axios({

      url: "http://1.234.25.136:30018/ds_admin/utilitys/get_elasticstatus/",

      method: "GET",

      headers: {

        "Content-Type": "application/json",

      },

    }).then((response) => {

      // console.log(response);

      setStatus(response.data.status);

    });

  };

axios를 통해 url로 상태 확인 

return (

    <>

      {/* ES{" "} */}

      {/* <Badge

        className="site-badge-count-109"

        count={"ES"}

        style={{ backgroundColor: status === "ON" ? "#52c41a" : "red" }}

      /> */}

      <Link to="/ds_search/ds_logout">

        <Button

          type="primary"

          htmlType="submit"

          className="login-form-button"

          style={{

            backgroundColor: status === "ON" ? "#52c41a" : "red",

            border: 0,

          }}

        >

          Logout

        </Button>

      </Link>

    </>

  );

 

 

--Nospoon.js 파일--

import { useEffect, useState } from "react";

import { Link, useHistory } from "react-router-dom";

import axios from "axios";

//import "antd/dist/antd.css";

import { Result, Button, Badge } from "antd";

// import { CloseCircleOutlined } from "@ant-design/icons";

export default function Nospoon() {

  const [status, setStatus] = useState("");

  useEffect(() => {

 //   fetch();

 //   let timer = setInterval(() => {

 //     fetch();

 //   }, 10000); // 10초 마다 ES 상태 체크

//

 //   return () => clearInterval(timer); // 화면을 떠나면 타이머 중단

  }, []);

  const fetch = () => {

    axios({

      url: "http://1.234.25.136:30018/ds_admin/utilitys/get_elasticstatus/",

      method: "GET",

      headers: {

        "Content-Type": "application/json",

      },

    }).then((response) => {

      // console.log(response);

      setStatus(response.data.status);

    });

  };

  return (

    <>

     Nospoon

    </>

  );

}