회원가입 절차 - 아이디 중복 확인
이전 포스팅에서 우린 reduce를 이용해 배열의 중복요소를 제거하는 절차를 진행해보았다. 이것이 실제로 어떻게 쓰이는지 아주 간단히 실용적 예시를 통해 확인해보고자 한다.
( 이전 포스팅 꼭 미리 보고 오길 요망 )
우리는 회원가입을 할 때 사용하고자 하는 아이디를 입력 후 해당 아이디가 다른 유저또한 사용하고 있는지 중복 확인 절차를 가지게 된다.
실제로 데이터베이스와 백엔드 서버를 구현해 확인해보면 아주 좋겠지만 그것은 말하고자 하는 주제와는 거리가 있으므로 아주 간단히 프론트단에서만 해당 로직을 구현해보고자 한다.
간단히 html, css, js로 구성해보았다.
-html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#login {
display: flex;
}
#submit {
margin-left: 3px;
}
</style>
</head>
<body>
<form id="form">
<input id="id" type="text" placeholder="아이디">
<input id="submit" type="submit" value="중복확인">
</form>
<script src="main.js"></script>
</body>
</html>- javascriptconst form = document.querySelector("#form");
const inputId = document.querySelector("#id");
const submit = document.querySelector("submit");
const users = {
id: [],
};
const id = users.id;
form.addEventListener("submit", (e) => {
e.preventDefault();
const newID = inputId.value;
users.id.push(newID);
duplicatedCheck();
});
function duplicatedCheck() {
let checkDucplicated = id.reduce((allIds, id, index) => {
if (allIds.indexOf(id) === -1) {
allIds.push(id);
} else {
alert("중복 아이디입니다.");
}
return allIds;
}, []);
console.log(checkDucplicated);
}아주 간단히 구현해보았다.
해당 코드에 대한 실행을 보고 싶다면 위 코드를 그대로 에디터에 입력해서 확인하길 바란다. 특히 console창을 통해 생성되는 id의 배열을 꼭 확인해보고 id값이 중복이 있을 시 어떻게 처리되는지를 확인해보는 것이 핵심이다.
작성자 본인은 사용자가 생성하고자하는 (입력란에 입력한) id값을 받아와 동적으로 배열을 생성하였고 reduce를 이용하여 중복 확인을 검증하였다. 직접 DB를 생성하긴 오래걸리므로 빈 배열에 동적으로 데이터를 담아주는 로직인 것이다.
별것없는 코드지만 이러한 실용적 코드를 통해서 reduce에 대해 조금 더 입문자들이 다가갔으면 한다.
You better cool it off before you burn it out / 티스토리(Kotlin, Android): https://nemoo-dev.tistory.com