디자인 시안 확인 sign-up.html 파일
sign-up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 by JS</title>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<!-- 헤더 섹션과 네비게이션 메뉴 영역 -->
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<!-- 회원 가입 제목 영역 -->
<section class="form-title">
<h1>회원가입 by JS</h1>
</section>
<!-- 회원 가입 폼 영역 -->
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
<button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
</td>
</tr>
<tr>
<th>닉네임</th>
<td>
<input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
<tr>
<th>비밀번호확인</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" id="signUpBtn" class="btn">회원가입</button>
</div>
</form>
</section>
</main>
<!-- js 파일은 하단에 두는 것이 일반적입니다.
모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
페이지 로드 속도를 최적화 하는데 도움이 된다.
-->
<script src="../js/header.js"></script>
<script src="../js/signUp.js"></script>
</body>
</html>
common.css
/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 을 적용 */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.content-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
align-content: center;
flex-wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다.
*/
.form-title h1 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* collapse
CSS 에서 테이블에 셀 간 테두리를 어떻게 처리할지 결정하는 속성.
테두라기 중복되는것을 방지하거나 각 셀의 테두리를 따로 유지할지 설정 할 수 있습니다.
*/
table {
width: 100%;
margin: 0;
}
th,
td {
text-align: left;
padding: 10px;
}
section {
width: 100%;
max-width: 800px;
padding: 20px;
}
/* 인풋 스타일 설정 */
.inputs {
width: calc(100% - 22px);
height: 40px;
border: none;
padding: 5px 10px;
}
.btn {
font-size: 14px;
padding: 12px;
border-radius: 8px;
color: white;
background-color: brown;
border: none;
cursor: pointer;
}
.btn-small {
font-size: 10px;
padding: 8px;
border-radius: 4px;
border: none;
color: white;
background-color: green;
margin-top: 10px;
cursor: pointer;
}
.btn-area {
display: flex;
justify-content: right;
margin: 20px 0;
}
header.css
header {
width: 100%;
background-color: gray;
padding: 10px;
box-sizing: border-box;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-link {
color: white;
padding: 5px 10px;
font-size: 18px;
}
.menu-link:hover {
background-color: darkgray;
}
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자.
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString === null) {
return [];
} else {
// 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString);
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
if(inputUsername === "") {
alert('아이디를 입력하세요');
inputs[0].focus();
return ;
}
// 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기
// 같은 값이 있는지 확인
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++ ) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break;
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디입니다.');
inputs[0].focus();
} else {
alert('사용 가능한 아이디 입니다.');
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 회원가입 처리 함수
function registerUser() {
const username = inputs[0];
const nickname = inputs[1];
const password = inputs[2];
const confirmPassword = inputs[3];
// 유효성 검사
if(username.readOnly == false) {
alert('아이디 중복 확인을 해주세요');
username.focus();
return;
}
if(nickname.value.trim() === "") {
alert('닉네임을 입력하세요');
nickname.focus();
return;
}
if(password.value.trim() === "") {
alert('비밀번호를 입력하세요');
password.focus();
return;
}
if(password.value !== confirmPassword.value) {
alert('비밀번호가 일치하지 않습니다');
password.focus();
return;
}
// 새로운 사용자 정보를 객체 리터럴로 생성
const newUser = {
username: username.value,
nickname: nickname.value,
password: password.value,
createdAt: toDay.getFullYear() + "." + (toDay.getMonth() + 1) + "." + toDay.getDate()
};
// [ {...} , {}, {} ] : 자료구조
userInfo.push(newUser);
// 로컬 스토리지에 자료구조 통으로 덮어쓰기 저장
localStorage.setItem('userList', JSON.stringify(userInfo));
window.location.href = "sign-in.html";
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
signUpBtn.addEventListener('click', registerUser);
}
// 이벤트 리스너 함수 실행(호출)
addEventListener();
결과 화면 확인
4. JavaScript 회원 가입 만들기
디자인 시안 확인 sign-up.html 파일임
sign-up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 by JS</title>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<!-- 헤더 섹션과 네비게이션 메뉴 영역 -->
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<!-- 회원 가입 제목 영역 -->
<section class="form-title">
<h1>회원가입 by JS</h1>
</section>
<!-- 회원 가입 폼 영역 -->
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
<button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
</td>
</tr>
<tr>
<th>닉네임</th>
<td>
<input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
<tr>
<th>비밀번호확인</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" id="signUpBtn" class="btn">회원가입</button>
</div>
</form>
</section>
</main>
<!-- js 파일은 하단에 두는 것이 일반적입니다.
모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
페이지 로드 속도를 최적화 하는데 도움이 된다.
-->
<script src="../js/header.js"></script>
<script src="../js/signUp.js"></script>
</body>
</html>
common.css
/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 을 적용 */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.content-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
align-content: center;
flex-wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다.
*/
.form-title h1 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* collapse
CSS 에서 테이블에 셀 간 테두리를 어떻게 처리할지 결정하는 속성.
테두라기 중복되는것을 방지하거나 각 셀의 테두리를 따로 유지할지 설정 할 수 있습니다.
*/
table {
width: 100%;
margin: 0;
}
th,
td {
text-align: left;
padding: 10px;
}
section {
width: 100%;
max-width: 800px;
padding: 20px;
}
/* 인풋 스타일 설정 */
.inputs {
width: calc(100% - 22px);
height: 40px;
border: none;
padding: 5px 10px;
}
.btn {
font-size: 14px;
padding: 12px;
border-radius: 8px;
color: white;
background-color: brown;
border: none;
cursor: pointer;
}
.btn-small {
font-size: 10px;
padding: 8px;
border-radius: 4px;
border: none;
color: white;
background-color: green;
margin-top: 10px;
cursor: pointer;
}
.btn-area {
display: flex;
justify-content: right;
margin: 20px 0;
}
header.css
header {
width: 100%;
background-color: gray;
padding: 10px;
box-sizing: border-box;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-link {
color: white;
padding: 5px 10px;
font-size: 18px;
}
.menu-link:hover {
background-color: darkgray;
}
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자.
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString === null) {
return [];
} else {
// 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString);
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
if(inputUsername === "") {
alert('아이디를 입력하세요');
inputs[0].focus();
return ;
}
// 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기
// 같은 값이 있는지 확인
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++ ) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break;
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디입니다.');
inputs[0].focus();
} else {
alert('사용 가능한 아이디 입니다.');
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 회원가입 처리 함수
function registerUser() {
const username = inputs[0];
const nickname = inputs[1];
const password = inputs[2];
const confirmPassword = inputs[3];
// 유효성 검사
if(username.readOnly == false) {
alert('아이디 중복 확인을 해주세요');
username.focus();
return;
}
if(nickname.value.trim() === "") {
alert('닉네임을 입력하세요');
nickname.focus();
return;
}
if(password.value.trim() === "") {
alert('비밀번호를 입력하세요');
password.focus();
return;
}
if(password.value !== confirmPassword.value) {
alert('비밀번호가 일치하지 않습니다');
password.focus();
return;
}
// 새로운 사용자 정보를 객체 리터럴로 생성
const newUser = {
username: username.value,
nickname: nickname.value,
password: password.value,
createdAt: toDay.getFullYear() + "." + (toDay.getMonth() + 1) + "." + toDay.getDate()
};
// [ {...} , {}, {} ] : 자료구조
userInfo.push(newUser);
// 로컬 스토리지에 자료구조 통으로 덮어쓰기 저장
localStorage.setItem('userList', JSON.stringify(userInfo));
window.location.href = "sign-in.html";
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
signUpBtn.addEventListener('click', registerUser);
}
// 이벤트 리스너 함수 실행(호출)
addEventListener();
결과 화면 확인
4. JavaScript 회원 가입 만들기
디자인 시안 확인 sign-up.html 파일임
sign-up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 by JS</title>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<!-- 헤더 섹션과 네비게이션 메뉴 영역 -->
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<!-- 회원 가입 제목 영역 -->
<section class="form-title">
<h1>회원가입 by JS</h1>
</section>
<!-- 회원 가입 폼 영역 -->
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
<button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
</td>
</tr>
<tr>
<th>닉네임</th>
<td>
<input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
<tr>
<th>비밀번호확인</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" id="signUpBtn" class="btn">회원가입</button>
</div>
</form>
</section>
</main>
<!-- js 파일은 하단에 두는 것이 일반적입니다.
모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
페이지 로드 속도를 최적화 하는데 도움이 된다.
-->
<script src="../js/header.js"></script>
<script src="../js/signUp.js"></script>
</body>
</html>
common.css
/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 을 적용 */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.content-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
align-content: center;
flex-wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다.
*/
.form-title h1 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* collapse
CSS 에서 테이블에 셀 간 테두리를 어떻게 처리할지 결정하는 속성.
테두라기 중복되는것을 방지하거나 각 셀의 테두리를 따로 유지할지 설정 할 수 있습니다.
*/
table {
width: 100%;
margin: 0;
}
th,
td {
text-align: left;
padding: 10px;
}
section {
width: 100%;
max-width: 800px;
padding: 20px;
}
/* 인풋 스타일 설정 */
.inputs {
width: calc(100% - 22px);
height: 40px;
border: none;
padding: 5px 10px;
}
.btn {
font-size: 14px;
padding: 12px;
border-radius: 8px;
color: white;
background-color: brown;
border: none;
cursor: pointer;
}
.btn-small {
font-size: 10px;
padding: 8px;
border-radius: 4px;
border: none;
color: white;
background-color: green;
margin-top: 10px;
cursor: pointer;
}
.btn-area {
display: flex;
justify-content: right;
margin: 20px 0;
}
header.css
header {
width: 100%;
background-color: gray;
padding: 10px;
box-sizing: border-box;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-link {
color: white;
padding: 5px 10px;
font-size: 18px;
}
.menu-link:hover {
background-color: darkgray;
}
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자.
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString === null) {
return [];
} else {
// 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString);
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
if(inputUsername === "") {
alert('아이디를 입력하세요');
inputs[0].focus();
return ;
}
// 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기
// 같은 값이 있는지 확인
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++ ) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break;
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디입니다.');
inputs[0].focus();
} else {
alert('사용 가능한 아이디 입니다.');
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 회원가입 처리 함수
function registerUser() {
const username = inputs[0];
const nickname = inputs[1];
const password = inputs[2];
const confirmPassword = inputs[3];
// 유효성 검사
if(username.readOnly == false) {
alert('아이디 중복 확인을 해주세요');
username.focus();
return;
}
if(nickname.value.trim() === "") {
alert('닉네임을 입력하세요');
nickname.focus();
return;
}
if(password.value.trim() === "") {
alert('비밀번호를 입력하세요');
password.focus();
return;
}
if(password.value !== confirmPassword.value) {
alert('비밀번호가 일치하지 않습니다');
password.focus();
return;
}
// 새로운 사용자 정보를 객체 리터럴로 생성
const newUser = {
username: username.value,
nickname: nickname.value,
password: password.value,
createdAt: toDay.getFullYear() + "." + (toDay.getMonth() + 1) + "." + toDay.getDate()
};
// [ {...} , {}, {} ] : 자료구조
userInfo.push(newUser);
// 로컬 스토리지에 자료구조 통으로 덮어쓰기 저장
localStorage.setItem('userList', JSON.stringify(userInfo));
window.location.href = "sign-in.html";
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
signUpBtn.addEventListener('click', registerUser);
}
// 이벤트 리스너 함수 실행(호출)
addEventListener();
결과 화면 확인
'JavaScript' 카테고리의 다른 글
| 6. JavaScript board-list 기능 만들기 (1) | 2024.12.27 |
|---|---|
| 5. JavaScript 로그인 기능 만들기 (0) | 2024.12.27 |
| 3. 프로젝트 뼈대 만들기 (0) | 2024.12.26 |
| 2. 실행환경 구축 (VS CODE) (0) | 2024.12.26 |
| 게시판 만들어 보기 - Only JavaScript ( 1. 로컬스토리지(localStorage)란? (0) | 2024.12.26 |
