IT개발/통신

[React] JavaScript와 Express의 웹 서버 구축 및 get, post방식의 통신(VScode)

Thompson 2024. 9. 27. 02:36
728x90
반응형

 

JavaScript와 Express를 사용하여 웹 서버를 구축하고, React와의 통신을 통해 GET과 POST 요청을 처리하는 방법입니다.

해당 프로젝트는 웹 서버와 클라이언트(React)를 분리하여 구성하며, 각 요청에 대한 응답 처리를 구축합니다.

1. 프로젝트 설정

먼저, Express 모듈을 사용하여 서버를 만들고 React 클라이언트와 통신할 준비를 합니다.

const express = require('express'); 
const app = express(); const port = 3000; 
const path = require('path'); 
const cors = require('cors'); // CORS 정책을 해결하기 위한 패키지
app.use(cors()); //cors활성화

express는 서버를 구축하기 위한 프레임워크이며,

cors는 클라이언트와 서버가 다른 출처에 있을 때 발생하는 CORS 문제를 해결하는 데 사용됩니다.

2. 클라이언트 파일 제공

React 프로젝트에서 빌드된 파일을 제공하기 위해 static 파일을 설정합니다.

buildDir 변수를 통해 React의 빌드 파일을 지정합니다.

const buildDir = path.join(__dirname, "build"); 
app.use(express.static(buildDir));

 

이 코드는 express.static()을 사용해 정적 파일을 제공하며, 클라이언트에서 React 앱을 서버에서 로드할 수 있도록 설정합니다.

3. JSON 파싱 미들웨어 추가

app.use(express.json()); // JSON 파싱 미들웨어 추가

 

express.json()은 JSON 형식의 요청 데이터를 자동으로 파싱하는 미들웨어입니다.

이 미들웨어는 클라이언트가 전송한 JSON 데이터를 Express 서버에서 자동으로 파싱하여, req.body로 접근할 수 있게 해줍니다.

4. Public 폴더에서 정적 파일 제공

app.use(express.static(path.join(__dirname, 'public')));

 

path.join(__dirname, 'public')는 현재 디렉토리에서 public 폴더를 지정합니다.

express.static()은 앞서 설명한 것처럼, 해당 디렉토리의 정적 파일(이미지, CSS, JS 등)을 클라이언트에게 제공할 수 있게 해줍니다.

다음은 사용자의 아이디와 비밀번호를 받아서 서버에 저장하고, 저장된 정보를 사용하여 로그인 처리까지 할 수 있습니다.

1. 사용자 데이터베이스 설정

사용자의 데이터를 저장하기 위해 userDatabase라는 객체를 사용합니다. 이 객체는 users 배열을 가지고 있으며, 사용자 정보(아이디와 비밀번호)를 객체로 저장합니다.

const userDatabase = {
    users: [], // 여러 사용자 정보를 저장하기 위한 배열
};

2. 회원 가입 기능 (POST 요청)

/Join 엔드포인트를 통해 사용자가 아이디와 비밀번호를 입력하면, 이 정보가 userDatabase에 저장됩니다.

app.post("/Join", (req, res) => {
    const {inputIdValue, inputPassValue} = req.body;
    
    // 사용자 데이터를 userDatabase에 추가 (객체로 저장)
    userDatabase.users.push({inputIdValue, inputPassValue});
    
    res.status(200).json({message: "사용자가 성공적으로 등록되었습니다"});
});

 

  • 입력 데이터 처리: req.body에서 사용자가 입력한 아이디와 비밀번호를 가져옵니다.
  • 저장: userDatabase.users 배열에 새로운 사용자 정보를 객체 형태로 추가합니다.
  • 응답: 성공적으로 등록되었음을 클라이언트에 알려줍니다.

3. 로그인 기능 (POST 요청)

/ 엔드포인트에서는 사용자가 입력한 아이디와 비밀번호를 확인하여 로그인 여부를 결정합니다.

app.post("/", (req, res) => {
    const {inputIdValue, inputPassValue} = req.body;

    if (inputIdValue.length === 0 || inputPassValue.length === 0) {
        return res
            .status(400)
            .json({message: "아이디와 비밀번호를 모두 입력해야 합니다."});
    }

    // userDatabase 객체의 users 속성에서 사용자 정보를 검색
    const foundUser = userDatabase
        .users
        .find(
            user => user.inputIdValue === inputIdValue && user.inputPassValue === inputPassValue
        );

    if (foundUser) {
        res.json({message: "로그인 성공"});
    } else {
        return res
            .status(400)
            .json({message: "아이디 또는 비밀번호가 잘못되었습니다."});
    }
});

 

  • 빈 입력 확인: 사용자가 아이디나 비밀번호를 입력하지 않은 경우, 에러 메시지를 반환합니다.
  • 데이터베이스 조회: 입력된 아이디와 비밀번호가 userDatabase.users 배열에 있는지 확인합니다.
  • 로그인 성공/실패 처리: 사용자가 입력한 정보와 일치하는 데이터가 있으면 로그인 성공, 없으면 실패 메시지를 반환합니다.

4. 서버 실행 및 콘솔 메시지

마지막으로, 서버가 실행되었을 때 콘솔에 다양한 메시지를 출력합니다.

app.listen(3000, () => {
    console.log(
        `
  "Server is running..."
  "Library is operational..."
  "Executing login and registration logic..."
  "Server address: http://localhost:${port}"
    `
    );
});