VS Code

[React + Node.js] 모듈화 작업

싱숭셩숭 2024. 11. 24. 15:57
  • Node.js에서는 index.js 또는 app.js 파일을 중심으로 여러 파일을 모듈화하여 작업 및 관리할 수 있다
  • 각 기능별로 컨트롤러와 라우터를 나누어 작성하고, 이를 index.js에서 불러와서 서버를 설정한다

1. 모듈화와 파일 분리

예시 프로젝트 구조

propass/
├── backend/
│   ├── controllers/               # 기능별 컨트롤러 : 비즈니스 로직을 처리하는 파일
│   │   ├── loginController.js        # 로그인 관련 로직
│   │   └── deleteUserController.js   # 회원탈퇴 관련 로직
│   ├── routes/                    # 라우터 : 클라이언트의 요청을 특정 컨트롤러로 전달
│   │   ├── loginRoutes.js         # 로그인 라우터
│   │   └── deleteUserRoutes.js    # 회원탈퇴 라우터
│   ├── index.js                   # 서버 시작 파일
│   ├── models/                    # 데이터 모델 :MySQL 등 DB와 상호작용하는 코드 관리
│   ├── data.js                    # 더미 데이터
│   └── config.js                  # 환경 설정
└── package.json

2. 파일 분리 및 모듈화 방법

1. 더미 데이터 (backend/data.js)

const users = [
  { id: 1, email: "test@example.com", password: "1234" },
  { id: 2, email: "user@example.com", password: "abcd" }
];

module.exports = users;

2. 로그인 기능 컨트롤러 (loginController.js)

  • 로그인 로직을 처리
// controllers/loginController.js

const users = require('../data');

const login = (req, res) => {
  const { email, password } = req.body;
  const user = users.find((u) => u.email === email && u.password === password);

  if (user) {
    return res.json({ success: true, message: "로그인 성공!" });
  } else {
    return res.json({ success: false, message: "이메일 또는 비밀번호가 잘못되었습니다." });
  }
};

module.exports = { login };

3. 회원탈퇴 기능 컨트롤러 (deleteUserController.js)

  • 회원 탈퇴 로직을 처리
// controllers/deleteUserController.js

const users = require("../data");

const deleteUser = (req, res) => {
  const { email } = req.params; // 경로 매개변수에서 이메일 추출
  const userIndex = users.findIndex((u) => u.email === email);

  if (userIndex !== -1) {
    const deletedUser = users.splice(userIndex, 1)[0];
    return res.status(200).json({
      success: true,
      message: `${deletedUser.email} 님의 계정이 성공적으로 삭제되었습니다.`,
    });
  } else {
    return res.status(404).json({
      success: false,
      message: "입력한 이메일에 해당하는 사용자를 찾을 수 없습니다.",
    });
  }
};

module.exports = { deleteUser };

4. 로그인 라우터 (loginRoutes.js)

  • 로그인 요청을 처리하는 라우터를 정의
// routes/loginRoutes.js

const express = require('express');
const router = express.Router();
const loginController = require('../controllers/loginController');

// 로그인 요청 처리
router.post('/login', loginController.login);

module.exports = router;

5. 회원탈퇴 라우터 (deleteUserRoutes.js)

  • 회원탈퇴 요청을 처리하는 라우터를 정의
// routes/deleteUserRoutes.js

const express = require("express");
const router = express.Router();
const deleteUserController = require("../controllers/deleteUserController");

// 회원 탈퇴 요청 처리
router.delete("/:email", deleteUserController.deleteUser);

module.exports = router;

6. 서버 설정 및 실행 (index.js)

  • 모든 라우터를 불러와서 서버를 설정 후 시작
// index.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const loginRoutes = require('./routes/loginRoutes');  // 로그인 라우터
const deleteUserRoutes = require('./routes/deleteUserRoutes');  // 회원탈퇴 라우터

const app = express();
const PORT = process.env.PORT || 5000;

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

app.use('/api/auth', loginRoutes);  // 로그인 관련 API
app.use('/api/account', deleteUserRoutes);  // 회원탈퇴 관련 API

app.listen(PORT, () => {
  console.log(`서버가 ${PORT}번 포트에서 실행 중...`);
});

7. 프론트엔드에서 요청 보내기

  • 프론트엔드에서 로그인과 회원탈퇴를 각각 다른 API로 요청
// frontend/src/componentes/Auth/Login.jsx

const handleLogin = async () => {
  try {
    const response = await fetch("<http://localhost:5000/api/auth/login>", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    const data = await response.json();

    if (data.success) {
      alert("로그인 성공!");
    } else {
      alert("로그인 실패: " + data.message);
    }
  } catch (error) {
    console.error("네트워크 오류 발생:", error);
    alert("로그인 중 오류가 발생했습니다.");
  }
};

// frontend/src/componentes/MyPge/DeleteAccount.jsx

const handleDelete = async () => {
  try {
    const response = await fetch(
      `http://localhost:5000/api/account/${email}`,
      { method: "DELETE" }
    );

    const data = await response.json();

    if (data.success) {
      alert(data.message); // 회원탈퇴 성공 메시지
    } else {
      alert(data.message); // 실패 메시지
    }
  } catch (error) {
    console.error("에러 발생:", error);
    alert("회원탈퇴 중 오류가 발생했습니다.");
  }
};

7. 결과

  • 로그인 기능은 loginController.js에서 처리하며, 라우터는 loginRoutes.js에 정의된다.
  • 회원탈퇴 기능은 deleteUserController.js에서 처리하며, 라우터는 deleteUserRoutes.js에 정의된다.

3. 실행 방법

node index.js

요약

  1. 파일을 기능별로 나눈다
    • 컨트롤러 : 실제 로직 처리
    • 라우터 : URL 경로를 컨트롤러에 연결
    • 모델 : 데이터베이스와의 상호작용 처리 (데이터베이스를 사용하는 경우)
    • 기타 필요한 설정 및 더미 데이터를 별도로 관리
  2. index.js에서 중심 역할 수행
    • 서버 초기화, 미들웨어 설정, 그리고 라우터 연결
    • 실행은 index.js 하나로 관리하여 진입점을 명확히 한다