[Node.js] 파일DB로 회원가입 구현

·회원가입 화면에서 id, name, pw, pw확인을 입력한 뒤 SIGN UP 버튼을 누르면 서버에서 입력된 데이터를 파일에 저장하는 로직

 

1. index.js 파일에 "/register" 경로에 post로 요청이 오면 ctrl.process.register 함수가 실행되도록 요청되어 있음

// index.js

router.post('/register', ctrl.process.register);

 

2. home.ctrl.js 파일에서 process내에 register 함수를 보면 user클래스 내의 reigster가 실행되도록 되어 있음

// home.ctrl.js

const process = {
    login: async (req, res) => {
        const user = new User(req.body);
        const response = await user.login();
        return res.json(response);
    },
    
    register: (req, res) => {
        const user = new User(req.body);
        const response = user.register();
        return res.json(response);
    },
};

 

3. User.js 파일의 user 클래스에서 register()함수를 보면 save메서드를 UserStorage 파일에서 save 메서드를 호출하도록 되어 있음

// User.js에서 user클래스 내부

register(){
  const client = this.body;
  const response = UserStorage.save(client); // constructor에서 넘겨준 body를 그대로 저장
  return response;
}

 

4. UserStorage.js에서 save메서드를 "/register"경로에서 입력받은 값을 파일에 저장하는 메서드로 구현

// UserStorage.js


// save 메서드를 실행할 때 users 데이터 전체를 넘겨주기 위해 코드 수정
static getUsers(isAll, ...fields) {
  return fs
    .readFile("./src/databases/users.json") // 해당 경로에서 파일 읽어오기
    .then((data) => {  // 파일 읽어오는 것을 성공하면
      return this.#getUsers(data, isAll, fields);  // 은닉화하여 생성한 함수 #getUsers 실행
    })
    .catch(console.error);  // 파일 읽기에 실패하면 error 반환
}


// getUsers 메서드에서 파일 읽어오는 것에 성공했을 때 시행할 명령 정리
static #getUsers(data, isAll, fields) {
  const users = JSON.parse(data);
  if (isAll) return users; // isAll이 true이면 전체 데이터 바로 반환하기
  
  const userUsers = fields.reduce((newUsers, field) => { // 각각의 id, pw, name 필드 각각 반환
    if (users.hasOwnProperty(field)) {
      newUsers[field] = users[field];
    }
    return newUsers;
  }, {});
  return userUsers;
}


// 데이터를 그냥 추가하면 원래의 데이터가 사라지고 덮어씌워지므로,
// 원래의 데이터를 불러와서 새로운 데이터를 추가하고,
// 새로운 데이터를 추가한 데이터 전체를 파일에 저장해야됨
// users 데이터를 모두 불러오는 메서드(위에 있는 getUsers) 사용하여 getUsers가 반환한 모든 파라미터 다 받아오기

// 데이터를 읽어오는데 시간이 걸리므로 다 읽어올 때 까지 기다리도록 async 함수로 선언하고 getUsers 메서드는 await로 처리
static async save(userInfo) {
  const users = await this.getUsers(true);
  
  if (users.id.includes(userInfo.id)) {
    throw "이미 존재하는 아이디입니다."; // error를 통해 명령하면 object로 반환되므로 문자열 그대로 넘겨주기
  }
  users.id.push(userInfo.id);
  users.name.push(userInfo.name);
  users.pw.push(userInfo.pw);
  fs.writeFile("./src/databases/users.json", JSON.stringify(users));
  return { success: true };
}

 

 

5. 위에서 회원가입을 실행하기 위해 거치는 다른 파일들에도 asynx, awiat를 걸어 파일을 읽어오는 시간동안 기다리도록 명령

// User.js의 user 클래스 내부

async register(){ // async 함수로 변경
  const client = this.body;
  const response = await UserStorage.save(client); // awiat 처리
  return response;
}


// home.ctrl.js

const process = {
    login: async (req, res) => {
        const user = new User(req.body);
        const response = await user.login();
        return res.json(response);
    },
    
    register: async (req, res) => { // async 함수로 변경
        const user = new User(req.body);
        const response = await user.register(); // awiat 처리
        return res.json(response);
    },
};

 

 

6. 또한, User.js 파일에서 register 메서드는 이미 존재하는 아이디에 대한 예외 처리 코드 추가

// User.js의 user 클래스 내부

async register() {
  const client = this.body;
  try {
    const response = await UserStorage.save(client);
    return response;
  } catch (err) { // 에러 발생 시, UserStorage에서 throw해준 메세지, "이미 존재하는 아이디입니다."를 출력
    const a = { success: false, msg: err };
    console.log(a.msg);
    return a;
  }
}

 

 

7. 결과

 -서버 실행 후 "/register" 경로에서 아이디, 이름, 비밀번호, 비밀번호 확인 입력 후 SIGN UP을 누르면, users.json파일에 해당 정보 저장

 

 -원래 users.json

 -회원가입

 -회원가입 후 users.json(회원가입 창에서 새로 입력하고 SIGN UP을 누른 아이디, 이름, 비밀번호가 추가로 저장되어 있음)