자바스크립트 Nullish Coalescing을 활용한 로그인 처리 로직 구현하기

29 Sep 2023

javascript

로그인 처리는 웹 애플리케이션에서 중요한 부분입니다. 사용자가 안전하고 원활하게 로그인할 수 있도록 구현해야 합니다. 이번에는 자바스크립트의 Nullish Coalescing 연산자를 활용하여 로그인 처리 로직을 구현해보겠습니다.

Nullish Coalescing 연산자란?

Nullish Coalescing 연산자(??)는 왼쪽 피연산자가 null 또는 undefined인 경우 오른쪽 피연산자를 반환하는 연산자입니다. 이 연산자를 활용하면 간결하고 가독성 좋은 코드를 작성할 수 있습니다.

로그인 처리 로직 구현하기

// 사용자가 입력한 아이디와 비밀번호
const userInput = {
  username: 'johnDoe',
  password: 'pa$$word123',
};

// 사용자가 입력한 아이디를 서버에서 검증하는 함수
function verifyUsername(username) {
  // 사용자명이 존재하지 않는다면 null을 반환
  // 실제로는 서버와 통신하여 검증 과정이 이루어져야 합니다.
  if (username === 'johnDoe') {
    return username;
  }
  return null;
}

// 사용자가 입력한 비밀번호를 서버에서 검증하는 함수
function verifyPassword(password) {
  // 비밀번호가 존재하지 않는다면 null을 반환
  // 실제로는 서버와 통신하여 검증 과정이 이루어져야 합니다.
  if (password === 'pa$$word123') {
    return password;
  }
  return null;
}

// 로그인 처리 함수
function login(userInput) {
  const { username, password } = userInput;

  // 아이디와 비밀번호가 null 또는 undefined인 경우 '아이디와 비밀번호를 입력해주세요.' 메시지를 반환
  if (!username ?? !password) {
    return '아이디와 비밀번호를 입력해주세요.';
  }

  // 아이디 검증
  const verifiedUsername = verifyUsername(username);
  if (!verifiedUsername) {
    return '유효한 아이디가 아닙니다.';
  }

  // 비밀번호 검증
  const verifiedPassword = verifyPassword(password);
  if (!verifiedPassword) {
    return '유효한 비밀번호가 아닙니다.';
  }

  // 로그인 성공
  return '로그인 성공';
}

// 로그인 처리 실행
const loginResult = login(userInput);
console.log(loginResult);

위의 코드에서는 verifyUsername() 함수와 verifyPassword() 함수를 이용하여 사용자가 입력한 아이디와 비밀번호를 검증합니다. 이후 login() 함수에서는 Nullish Coalescing 연산자를 사용하여 입력된 아이디와 비밀번호가 null 또는 undefined인 경우 메시지를 반환합니다.

로그인 처리 과정에서는 아이디와 비밀번호 입력 여부를 확인하고, 유효한 아이디와 비밀번호인지 검증합니다. 각 검증 단계에서 사용자에게 적절한 메시지를 반환합니다. 마지막으로 로그인 성공 시 ‘로그인 성공’ 메시지를 반환합니다.

Nullish Coalescing 연산자를 사용하여 로그인 처리를 구현하면 간결하고 가독성 좋은 코드를 작성할 수 있습니다. 이를 통해 사용자가 쉽게 로그인할 수 있고, 개발자는 코드를 관리하기 쉬워집니다.

#javascript #nullishcoalescing