나는 이미 한동안 게시물을 한 편도 올리지 못했다.나는 합작/실습 프로젝트에 참여하여 4인조와 응용 프로그램을 개발하고 있다.그 이후로 나는 줄곧 나의 일상적인 일에 바빠서 글을 쓸 시간이 없었다.나는 다음 게시물에서 나의 경력에 대해 더 많은 것을 공유할 것이다.

본 교과 과정을 예습하다.

react와reacthooks

에 대해 알고 계십니다.

기본express 서버를 설정하는 방법을 아십니까

fetch API

JSON

반응 얘기 좀 하자.

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다.UI를 쉽게 만들 수 있습니다.물론 다른 훌륭한 전단 프레임워크, 예를 들면 angular, Vue Svelte 등도 있다. 그러나 이 글에서 우리는react에 중점을 둘 것이다.

우리의 앞부분을 만듭니다.

우리는 우선 우리의 앞부분을 설정해야 한다.create react 응용 프로그램을 사용합니다.
터미널에서 다음 명령을 실행합니다.필요한 파일을 만드는 데 시간이 좀 걸립니다.

npx create-react-app app-name

이 명령은 프로그램이 선택한 이름으로 디렉터리를 만들고 프로그램에 필요한 파일을 추가합니다.
당신이 가장 좋아하는 IDE에서 이 디렉터리를 열면 폴더 구조가 이렇습니다

우리는 src 폴더를 열고 App.js 파일의 내용을

import  React from 'react'

function App() {
  return (
    <div>
      <form>
        <input placeholder="email" />
        <input placeholder="password" />
      </form>
    </div>
  );
}

export default App;

*주: 내가 틀렸을 수도 있지만, 나는 네가 지금 조립품을 만들 수 있다고 믿는다. 만약 내가 틀렸다면 Import React from 'react' 평론에서 나에게 알려줄 필요가 없다.
우리는 백엔드에 데이터를 보낼 수 있는 기본 폼을 가지고 있다.걱정하지 마라, 우리는 곧 해낼 것이다.

Dell의 프런트엔드 설계

쉽게 보이지 않도록 양식에 CSS 스타일을 추가합니다.src 디렉터리에서 App.css 파일로 이동하여 아래 코드를 붙여넣습니다.

body{
  background-color: rgb(63, 63, 63);
}
.App {
  text-align: center;
  width: 50%;
  margin-left: 25%;
}

.Heading{
  text-align: center;
  color: white;
}


.btn{
  padding: 9px 25px 9px 25px;
  background-color: blueviolet;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  color: white;
  margin-left: 45px;
  border: 1px solid transparent;
  border-radius: 25px;
}

 input{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
  border: none;
  border-bottom: 2px solid blueviolet;
  outline: none;
}

너의 표는 이렇게 해야 한다

갈고리로 폼 설정하기

후크는 React 16.8 릴리즈에 도입된 새로운 기능입니다.클래스를 작성하지 않고state와 다른React 기능을 사용할 수 있습니다.고리는 기능 어셈블리 고리에서 반응 상태 및 라이프 사이클 피쳐에 이르는 기능입니다.그것은 교실에서 작용하지 않는다.이 정의의 출처는 javatpoint이다.만약 네가 갈고리에 대해 아무것도 모른다면, 이 링크는 네가 알아야 할 모든 갈고리가 있을 것이다.현재 우리는 갈고리를 도입하기 위해 App.js 파일의 코드를 업데이트할 것이다.우리가 사용할 첫 번째 갈고리는 useState 갈고리다.

import React, { useState } from "react";
import "./App.css";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleEmail = (e) => {
    setEmail(e.target.value);
  };

  const handlePassword = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    alert("User Added")
    const userData = {
      email: email,
      password: password,
    };

   try{
    const add = await fetch("http://localhost:5000/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userData),
    });
  console.log(add)
   }catch(err){
     console.error()
   }
  };

  return (
    <div className="Heading">
      <h1>Learning Client and Server Connection</h1>
      <div className="App">
        <form onSubmit={handleSubmit}>
          <input
            placeholder="Enter Email"
            type="email"
            onChange={handleEmail}
          />
          <input
            placeholder=" Enter Password"
            type="password"
            onChange={handlePassword}
          />
          <button type="submit" className="btn">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

export default App;

코드 해석

나는 해야 할 일이 많은 것 같다는 것을 알고 있지만, 걱정하지 마라. 내가 설명할 것이다.우리는 useState 갈고리를 사용하여 전자메일과 비밀번호 필드의 상태를 처리합니다.useState 갈고리를 사용할 때 처리할 항목의 초기 상태를 먼저 설정해야 합니다.예를 들어 만약에 내가 고양이의 나이를 바꾸고 싶다면 나는 먼저 고양이의 현재 나이를 지정해야 한다. 그리고 나는 지금 고양이의 새 나이를 cat = whatever age I want to change it to로 설정할 수 있다.react에서 전자메일과 비밀번호 필드에 입력한 내용을 추적하기 위해 onChange 이벤트가 입력에 추가된 다음 함수의 값을 제시합니다. 이 함수는 입력한 값을 새로운 (초기) 값으로 설정합니다.내 말은 고양이의 나이가 1이라고 가정하지만 2로 만들고 싶다. 나는 onChange 키워드로 내 항목을 추적하고 (이 예에서 2) 함수를 분배한 다음 2를 고양이의 새 나이로 설정한다.
주의--코드를 보면 볼 수 있다

 const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

이 예에서는 암호와 전자 우편을 빈 문자열로 설정하여 handlePassword 및 handleEmailFunction 를 입력한 내용으로 업데이트할 수 있습니다.handleSubmit 기능은 다음에 설정할 백엔드 서버로 데이터를 전송합니다.먼저 양식의 기본 비헤이비어(제출 시 페이지를 다시 로드)를 차단한 다음 전자 메일 메시지와 암호를 저장할 객체를 만듭니다.우리는 왜 대상을 만들어야 합니까?이유는 간단하다.이 두 정보를 백엔드에 동시에 보내서 특정 사용자에게 추가할 필요가 있습니다.우리는fetch를 사용하여 데이터를 발표/발송하고 있기 때문에, 데이터를 어떻게 처리해야 하는지 알려줘야 합니다.우선, 우리는 그것이 post에 우리의 데이터를 표시할 수 있기를 희망하고, 그 다음에 데이터가 문자열화되기를 희망한다.데이터를 JSON으로 변환하는 것입니다.오류 처리를 돕기 위해try-catch 블록에 코드를 포장합니다.fetch() 키워드를 보면 괄호 안에 URL이 있다는 것을 알 수 있습니다.이 URL이 백엔드 URL이 됩니다.이것이 바로 표의 데이터가 전송된 위치다.백엔드를 만들 것입니다.

우리express 서버 설정

우리가 해야 할 첫 번째 일은 server 라는 새 디렉터리를 만드는 것이다. (모든 이름으로 명명할 수 있다.)디렉터리를 새 server 디렉터리로 변경합니다.이 명령npm init을 실행하면 저희 package.json 파일을 설정합니다.이 파일에서, 우리는 우리가 사용하거나 필요로 하는 모든 의존항을 볼 수 있을 것이다.다음에 우리가 해야 할 일은 우리가 필요로 하는 의존항을 설치하는 것이다.이 특수 임무에 대해 우리는 단지 세 가지 일만 필요로 한다.하나는 CORS, 다른 하나는 Express, 마지막은 Nodemon입니다.CORS는 서버 전반에 걸쳐 데이터를 전송하고 Express는 서버를 신속하게 생성하는 데 도움을 줍니다.
현재 너의 응용 프로그램 구조는 마땅히 이렇게 해야 한다.

우리는 지금 이 명령을 실행하고 있다 npm install express cors nodemon.
주의 - Nodemon을 개발자 의존 항목으로 설치하는 것은 좋은 방법입니다.
필요한 모든 의존 항목을 설치하면 시작 스크립트를 설정해야 합니다. 그러면 npm start Nodemon으로 서버를 시작할 수 있습니다.package.json 파일을 열고 추가

"start": "nodemon index.js"

test 파일의 줄 바로 아래에 있습니다.

서버 코드

다음 코드를 서버 디렉터리 package.json 파일에 추가할 것입니다.

const express = require("express");
const cors = require("cors")
const port = 5000
const app = express()

app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())


app.post("/", (req, res)=>{
   const {email, password} = req.body
   console.log(`Your Email is ${email} and your password is ${password}`)
})

app.listen(port, ()=>{
    console.log(`server is running on port ${port}`)
})

코드 해석

이것은 매우 간단한 서버 사이드 코드 라이브러리다.우리는 간단한post단점index.js이 전방에서 전송된 데이터입니다.

어플리케이션 실행

따라서 react 전단이 실행 중인지 확인하고 서버 디렉터리에 console.log 를 입력하면 서버를 시작할 수 있습니다.서버가 시작되고 실행된 후에 전방으로 돌아가서 후방으로 보낼 데이터를 입력하십시오. 아래와 같습니다. (아래gif 참조)

결론

됐다.클라이언트에서 서버로 데이터를 발표하는 방법을 알고 있습니다.다음 기사에서는 JWT, Cookies 및 SQL 데이터베이스를 사용하여 인증 및 권한 부여를 설정합니다.이 문서에서는 사용자 정의 API에서 데이터를 가져오고 사용하는 방법을 보여 드리겠습니다.