React TypeScript를 Express TypeScript에 연결

안녕하세요 👋🏼, React TypeScript 로그인 양식을 작성하고 Express TypeScript 서버에서 제공하겠습니다. 우리는 로그인 시스템을 구축하는 방법에 초점을 맞추지 않을 것입니다. 대신 TypeScript와 서버 통합 작업을 할 것입니다.

이 튜토리얼의 범위 때문에 제 웹사이트 블로그를 링크하겠습니다. 더 나은 시각적 표현이 있습니다.

TypeScript로 React 및 Express.js 프로젝트 만들기 | 코딩PR

TypeScript Express.js 서버에서 간단한 TypeScript 반응 양식을 제공합니다.



codingpr.com

1. 노드 환경을 설정합니다.

컴퓨터에 새 디렉토리를 만들고 해당 디렉토리로 이동합니다.

Terminal

    mkdir simple-react-form
    cd simple-react-form

Node.js 프로젝트를 만들고 -y 플래그를 사용하여 질문 없이 만든 다음 코드 편집기에서 프로젝트를 엽니다. package.json으로 이동하여 빈 값을 채웁니다.

Terminal

    npm init -y
    code .

2. Express.js 및 TypeScript를 설정합니다.

cors, dotenv 및 express.js를 설치합니다. Cors는 익스프레스 서버 포트 외부에서 교차 출처 요청을 활성화합니다. Dotenv는 환경 변수를 사용할 수 있게 해줍니다.

Install through npm or yarn

    npm install cors dotenv express

다음으로 -D(개발) 플래그를 사용하여 TypeScript와 관련된 모든 라이브러리를 설치합니다. 동시 라이브러리를 사용하면 package.json 스크립트에서 여러 명령을 실행할 수 있습니다. nodemon 라이브러리는 디렉토리의 파일을 변경하면 자동으로 서버를 다시 시작합니다.

npm install -D typescript @types/cors @types/express @types/node concurrently nodemon

다음 명령을 사용하여 TypeScript 구성 파일을 만듭니다.

Config

    npx tsc --init

tsconfig.json 파일에서 주석을 제거하고 이 JSON 값을 추가합니다.

tsconfig.json

    {
      "compilerOptions": {
        "target": "es2016",
        "jsx": "preserve",
        "module": "commonjs",
        "allowJs": true,
        "outDir": "./dist",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
      },
      "exclude": [
        "client",
        "dist",
        "node_modules"
      ]
    }

다음으로 package.json으로 이동하여 스크립트 섹션을 업데이트합니다.

package.json

    {
      "scripts": {
        "build": "npx tsc",
        "start": "node dist/index.js",
        "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\"",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
    }

프로젝트 루트에 index.ts를 생성하고 다음 코드를 삽입합니다.

index.ts

    import dotenv from "dotenv";
    import express, { Express, Request, Response } from "express";
    import path from "path";
    import cors from "cors";

    dotenv.config();

    const app: Express = express();

    app.use(express.json());
    app.use(cors());

    app.get('/', (req: Request, res: Response) => {
      res.send('<h1>Hello World From the Typescript Server!</h1>')
    });

    const port = process.env.PORT || 8000;

    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    });

VS Code를 사용하는 경우 편집기를 다시 시작하고 터미널을 다시 열고 다음을 실행합니다.

Terminal

    npm run build
    npm run dev

3. React 및 TypeScript를 설정합니다.

이제 React 클라이언트 측을 구축할 차례입니다. 먼저 명령 터미널을 열고 프로젝트의 루트에 있는지 확인한 다음 React with TypeScript를 클라이언트 폴더로 설치합니다.

Terminal

    npx create-react-app client --template typescript

Reacts가 기본적으로 설치하는 git 폴더를 제거합니다.

Git Bash

    $ cd client
    $ rm -rf .git

src 폴더로 이동하여 두 개의 폴더 구성 요소 및 utils를 만듭니다.

Git Bash

    $ cd src
    $ mkdir components
    $ mkdir utils

구성 요소 폴더 안에 form-input이라는 다른 폴더를 만든 다음 form-input.tsx를 만들고 아래에서 코드를 복사합니다. 이 파일은 재사용 가능한 양식 입력을 보유합니다. 입력 스타일을 조작하려면 양식 입력 폴더에 form-input.css를 생성합니다.

Git Bash

    $ cd components
    $ mkdir form-input
    $ cd form-input
    $ touch form-input.tsx

client/src/components/form-input/form-input.tsx

    import { InputHTMLAttributes, FC } from "react";

    import './form-input.css';

    type FromInputProps = { label: string } &
      InputHTMLAttributes<HTMLInputElement>;

    const FormInput: FC<FromInputProps> = ({ label, ...otherProps }) => {
      return (
        <div className="group">
          <input {...otherProps} />
          {
            label &&
            <div className="form-input-label">
              {label}
            </div>
          }
        </div>
      );
    }

    export default FormInput;

utils 폴더로 이동하여 data-utils.ts를 추가합니다. 이 파일은 서버에 대한 API 호출을 수행합니다.

client/src/utils/data-utils.ts

    export const getData = async <T>(
      url: string,
      email: string,
      password: string
    )
    : Promise<T> => {
      const res = await fetch(url, {
        method: 'Post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({ email, password })
      });

      return await res.json();
    }

App.tsx 수정; 우리는 React와 동일한 클래스와 색상을 사용하여 로그인 양식을 만들고 있습니다.

client/src/App.tsx

    import { useState, ChangeEvent, FormEvent } from "react";
    import { ReactComponent as Logo } from "./logo.svg";
    import { getData } from "./utils/data-utils";
    import FormInput from './components/form-input/form-input';

    import './App.css';

    // TypeScript declarations
    type User = {
      id: number,
      name: string,
      email: string,
      password: string
    }

    const defaultFormFields = {
      email: '',
      password: '',
    }

    const App = () => {
      // react hooks
      const [user, setUser] = useState<User | null>()
      const [formFields, setFormFields] = useState(defaultFormFields)
      const { email, password } = formFields

      const resetFormFields = () => {
        return (
          setFormFields(defaultFormFields)
        );
      }

      // handle input changes
      const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target
        setFormFields({...formFields, [name]: value })
      }

      const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        try {
          // make the API call
          const res:User = await getData(
            'http://localhost:8000/login', email, password
          )
          setUser(res);
          resetFormFields()
        } catch (error) {
          alert('User Sign In Failed');
        }
      };

      const reload = () => {
        setUser(null);
        resetFormFields()
      };

      return (
        <div className='App-header'>
          <h1>
            { user && `Welcome! ${user.name}`}
          </h1>
          <div className="card">
            <Logo className="logo" />
            <h2>Sign In</h2>
            <form onSubmit={handleSubmit}>
              <FormInput
                label="Email"
                type="email"
                required
                name="email"
                value={email}
                onChange={handleChange}
              />
              <FormInput
                label="Password"
                type='password'
                required
                name='password'
                value={password}
                onChange={handleChange}
              />
              <div className="button-group">
                <button type="submit">Sign In</button>
                <span>
                  <button type="button" onClick={reload}>Clear</button>
                </span>
              </div>
            </form>
          </div>
        </div>
      );
    }

    export default App;

4. 새 경로와 TypeScript를 서버에 추가합니다.

거의 마무리되고 있습니다. index.ts로 돌아가서 추가 유형으로 로그인 경로를 추가하십시오.

index.ts

    interface FormInputs {
      email: string,
      password: string
    }

    // Array of example users for testing purposes
    const users = [
      {
        id: 1,
        name: 'Maria Doe',
        email: '[email protected]',
        password: 'maria123'
      },
      {
        id: 2,
        name: 'Juan Doe',
        email: '[email protected]',
        password: 'juan123'
      }
    ];

    // route login
    app.post('/login', (req: Request, res: Response) => {
      const { email, password }:FormInputs = req.body;

      const user = users.find(user => {
        return user.email === email && user.password === password
      });

      if (!user) {
        return res.status(404).send('User Not Found!')
      }

      return res.status(200).json(user)
    });

개별 터미널에서 클라이언트와 서버를 모두 실행합니다.

Terminal

    npm run dev
    cd client
    npm start

앱 테스트를 시작하세요.

이 튜토리얼의 두 번째 부분을 확인하십시오. How to Upload a React and Express TypeScript project to Heroku