Database없이 JSON파일에 있는 데이터를 서버와 클라이언트에서 같은 uri를 이용해서 통신하여 로그인 기능과 회원가입 시 이메일 유효성 검사하기

파일구성

• Data - users.json
• Server - index.js (express)
• Client - login.js & signup.js (axios)

Data

users.json 파일 내부에 데이터 입력

{
  "status": "OK",
  "data": [
    {
      "email": "tnalsdl2046@gmail.com",
      "pw": "1234",
    },
}

Server

서버는 express의 get( )메서드를 사용하여 클라이언트와 같은 uri에서 클라이언트가 요청한 data에 응답한다.
data가 들어있는 users.json 파일을 node.js에 내장되어 있는 fs모듈을 사용하여 users.json파일의 data를 읽어낸다.

import express from "express"
import fs from "fs"

const app = express()

app.get("/api/users.json", (req, res) => {
  fs.readFile("./server/data/users.json", "utf8", (err, data) => {
    if (err) {
      console.error(err)
      return res.status(500).send({
        status: "Internal Server Error",
        message: err,
        data: null,
      })
    }

    try {
      const jsonData = JSON.parse(data)
      res.json(jsonData)
    } catch (parseErr) {
      console.error("Error parsing JSON file:", parseErr)
      return res.status(500).send({
        status: "Internal Server Error",
        message: parseErr,
        data: null,
      })
    }
  })
})

클라이언트에서 서버에 받은 데이터가 요청되지 않았으면 에러를 반환하고 데이터를 받으면 user.json의 데이터를 반환한다.

Client

Login

사용자가 로그인 시, 입력한 이메일과 비밀번호 input의 값이 async & await 사용하여 서버에서 같은 uri로 받은 데이터, 즉 users.json의 데이터와 같으면 로그인이 성공되도록 한다.

async function login() {
  const email = document.querySelector(".userId").value
  const password = document.querySelector(".userPw").value

  try {
    const res = await axios.get("/api/users.json")
    const users = res.data.data

    let userFound = false
    for (let user of users) {
      if (user.email === email) {
        userFound = true
        if (user.pw === password) {
          alert("로그인 성공!")
        } else {
          alert("비밀번호를 다시 입력해주세요.")
        }
      }
    }
    if (!userFound) {
      alert("회원 정보가 없습니다.")
    }
  } catch (error) {
    console.error(err)
    alert("로그인 중 오류가 발생했습니다.")
  }
}

Sign up

회원가입 페이지에서도 같은 uri로 이메일이 data에 있는 값이면 중복된 이메일이라는 문구가 들어가도록 작성했다.

const checkEmail = async (event) => {
      event.preventDefault()
      if () {
        const res = await axios.get("/api/users.json")
        const users = res.data.data

        for (let user of users) {
          if (user.email === usersEmail.value) {
            emailError.textContent = "중복된 이메일입니다."
            break
          } else {
            emailError.textContent = "이메일이 확인 되었습니다."
          }
        }
      } else {
        alert("이메일 형식을 확인해주세요.")
      }
    }

서버와 클라이언트가 같은 uri로 통신하여 에러없이 users.json파일에 데이터와 비교 할 수 있었다.