[JavaScript] 2_간단한 회원관리 프로그램 만들기...(코드 작성)

전체 코드(js)

class Member {
    constructor(id, pw, name) {
        this.id = id;
        this.pw = pw;
        this.name = name;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const input_userId = document.querySelector('#uid');
    const input_userPw = document.querySelector('#pw');
    const input_userName = document.querySelector('#uname');
    const input_eId = document.querySelector('#eid');
    const input_ePw = document.querySelector('#epw');
    const input_eName = document.querySelector('#ename');
    const regForm = document.querySelector('#regForm');
    const member_list = document.querySelector('#list-mem');
    const editForm = document.querySelector('#editForm');
    const idx = document.querySelector('#idx');

    // 기존 저장된 멤버를 로드
    if (localStorage.getItem('members')) {
        const members = JSON.parse(localStorage.getItem('members'));
        members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
    }

    // 회원 저장 폼 제출 시
    regForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // 빈칸이 있다면 경고
        if (input_userId.value.trim() === '' || input_userPw.value.trim() === '' || input_userName.value.trim() === '') {
            alert("빈칸이 있습니다.");
            return;
        }

        // 새로운 멤버를 저장할 변수 생성
        const new_member = new Member(input_userId.value, input_userPw.value, input_userName.value);

        // localStorage에 저장
        const members = localStorage.getItem('members') ? JSON.parse(localStorage.getItem('members')) : [];
        members.push(new_member);
        localStorage.setItem('members', JSON.stringify(members));

        // 새로운 멤버를 목록에 추가
        addMemberToList(new_member.id, new_member.pw, new_member.name, members.length - 1);

        // 폼 초기화
        regForm.reset();
    });

    // 회원 수정 폼 제출 시
    editForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // 빈칸이 있다면 경고
        if (input_eId.value.trim() === '' || input_ePw.value.trim() === '' || input_eName.value.trim() === '') {
            alert("빈칸이 있습니다.");
            return;
        }

        // 기존 멤버 업데이트
        const key = parseInt(idx.value);
        const members = JSON.parse(localStorage.getItem('members'));

        if (members[key]) {
            members[key].id = input_eId.value;
            members[key].pw = input_ePw.value;
            members[key].name = input_eName.value;
            localStorage.setItem('members', JSON.stringify(members));

            // 화면 업데이트
            member_list.innerHTML = '';
            members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        }

        // 폼 초기화 및 수정 폼 숨기기
        editForm.reset();
        document.querySelector('#edit').style.display = 'none';
        document.querySelector('#reg').style.display = 'block';
    });

    function addMemberToList(id, pw, name, key) {
        const new_member = document.createElement('tr');
        new_member.setAttribute('data-key', key);

        // 각 내용을 저장
        const mem_idx = document.createElement('td');
        mem_idx.textContent = key;
        const mem_id = document.createElement('td');
        mem_id.textContent = id;
        const mem_pw = document.createElement('td');
        mem_pw.textContent = pw;
        const mem_name = document.createElement('td');
        mem_name.textContent = name;

        // 수정 버튼을 생성
        const btn_edit = document.createElement('button');
        btn_edit.textContent = 'edit';
        btn_edit.addEventListener('click', (e) => {
            document.querySelector('#edit').style.display = 'block';
            document.querySelector('#reg').style.display = 'none';

            const members = JSON.parse(localStorage.getItem('members'));
            const member = members[key];

            if (member) {
                idx.value = key;
                input_eId.value = member.id;
                input_ePw.value = member.pw;
                input_eName.value = member.name;
            }
        });

        // 삭제 버튼을 생성
        const btn_del = document.createElement('button');
        btn_del.textContent = "delete";
        btn_del.addEventListener('click', (e) => {
            const del_div = document.querySelector(`[data-key="${key}"]`);
            member_list.removeChild(del_div);

            // localStorage에서 삭제
            const members = JSON.parse(localStorage.getItem('members'));
            const updated_members = members.filter((member, index) => index !== key);
            localStorage.setItem('members', JSON.stringify(updated_members));

            // 화면 업데이트
            member_list.innerHTML = '';
            updated_members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        });

        // 각 내용을 new_member에 저장
        new_member.appendChild(mem_idx);
        new_member.appendChild(mem_id);
        new_member.appendChild(mem_pw);
        new_member.appendChild(mem_name);
        new_member.appendChild(btn_del);
        new_member.appendChild(btn_edit);

        // new_member를 list로 올리기
        member_list.appendChild(new_member);
    }
});

전체코드를 먼저 나타낸 이유는 흐름을 한번 보고 가기 위해서 이다.

이제 부분적으로 알아보자.

 

입력되는 데이터 저장

const input_userId = document.querySelector('#uid');
const input_userPw = document.querySelector('#pw');
const input_userName = document.querySelector('#uname');
const input_eId = document.querySelector('#eid');
const input_ePw = document.querySelector('#epw');
const input_eName = document.querySelector('#ename');
const regForm = document.querySelector('#regForm');
const member_list = document.querySelector('#list-mem');
const editForm = document.querySelector('#editForm');
const idx = document.querySelector('#idx');

해당 부분은 querySelector를 통해 HTML의 해당 부분에 데이터가 입력되면 지정해 둔 변수로 저장하기 위해 나타낸 코드다.

 

기존 저장된 회원을 로드

// 기존 저장된 멤버를 로드
if (localStorage.getItem('members')) {
    const members = JSON.parse(localStorage.getItem('members'));
    members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
}

조건문을 통해 local storage에 members라는 key 값을 가진 데이터가 있다면,

객체로 변환하여 리스트에 나타낸다.

 

회원 저장

// 회원 저장 폼 제출 시
regForm.addEventListener('submit', (event) => {
    event.preventDefault();

    // 빈칸이 있다면 경고
    if (input_userId.value.trim() === '' || input_userPw.value.trim() === '' || input_userName.value.trim() === '') {
        alert("빈칸이 있습니다.");
        return;
    }

    // 새로운 멤버를 저장할 변수 생성
    const new_member = new Member(input_userId.value, input_userPw.value, input_userName.value);

    // localStorage에 저장
    const members = localStorage.getItem('members') ? JSON.parse(localStorage.getItem('members')) : [];
    members.push(new_member);
    localStorage.setItem('members', JSON.stringify(members));

    // 새로운 멤버를 목록에 추가
    addMemberToList(new_member.id, new_member.pw, new_member.name, members.length - 1);

    // 폼 초기화
    regForm.reset();
});

회원 정보를 저장하는 부분이다.

HTML은 form형식으로 구성했고, 해당 form에서 submit이 일어날 경우,

우선 조건문을 통해 input에 빈칸이 있는지 확인합니다.

이후 new_member 변수를  생성하여 입력된 데이터를 파라미터로 한 객체를 생성합니다.

local storage에서 members라는 key값을 가진 데이터가 있는지 확인하고 있다면 객체형식으로 바꾸어서 members 변수에 저장합니다. local storage에 없다면 빈 배열을 넣어줍니다.

이후 생성했던 객체(new_member)를 push해주고 local storage에 문자열 형태로 변환하여 저장합니다.

이후 회원 리스트에 추가합니다.

 

회원 수정

    // 회원 수정 폼 제출 시
    editForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // 빈칸이 있다면 경고
        if (input_eId.value.trim() === '' || input_ePw.value.trim() === '' || input_eName.value.trim() === '') {
            alert("빈칸이 있습니다.");
            return;
        }

        // 기존 멤버 업데이트
        const key = parseInt(idx.value);
        const members = JSON.parse(localStorage.getItem('members'));

        if (members[key]) {
            members[key].id = input_eId.value;
            members[key].pw = input_ePw.value;
            members[key].name = input_eName.value;
            localStorage.setItem('members', JSON.stringify(members));

            // 화면 업데이트
            member_list.innerHTML = '';
            members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        }

        // 폼 초기화 및 수정 폼 숨기기
        editForm.reset();
        document.querySelector('#edit').style.display = 'none';
        document.querySelector('#reg').style.display = 'block';
    });

회원 수정 폼 입니다.

회원 저장과 비슷합니다. 

key 변수에 index를, members에는 로컬 스토리지의 members 키값에 대한 데이터를 파싱 해서 넣어줍니다.

이후 members에 key값에 해당하는 정보가 있는 겨우 데이터를 수정하는 과정을 거치고 다시 저장해 줍니다.

화면에 나타내기 위해서 members를 foreach를 활용하여 각각에 대해 addMemberToList 함수를 적용합니다.

 

회원 리스트

function addMemberToList(id, pw, name, key) {
        const new_member = document.createElement('tr');
        new_member.setAttribute('data-key', key);

        // 각 내용을 저장
        const mem_idx = document.createElement('td');
        mem_idx.textContent = key;
        const mem_id = document.createElement('td');
        mem_id.textContent = id;
        const mem_pw = document.createElement('td');
        mem_pw.textContent = pw;
        const mem_name = document.createElement('td');
        mem_name.textContent = name;

        // 수정 버튼을 생성
        const btn_edit = document.createElement('button');
        btn_edit.textContent = 'edit';
        btn_edit.addEventListener('click', (e) => {
            document.querySelector('#edit').style.display = 'block';
            document.querySelector('#reg').style.display = 'none';

            const members = JSON.parse(localStorage.getItem('members'));
            const member = members[key];

            if (member) {
                idx.value = key;
                input_eId.value = member.id;
                input_ePw.value = member.pw;
                input_eName.value = member.name;
            }
        });

        // 삭제 버튼을 생성
        const btn_del = document.createElement('button');
        btn_del.textContent = "delete";
        btn_del.addEventListener('click', (e) => {
            const del_div = document.querySelector(`[data-key="${key}"]`);
            member_list.removeChild(del_div);

            // localStorage에서 삭제
            const members = JSON.parse(localStorage.getItem('members'));
            const updated_members = members.filter((member, index) => index !== key);
            localStorage.setItem('members', JSON.stringify(updated_members));

            // 화면 업데이트
            member_list.innerHTML = '';
            updated_members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        });

        // 각 내용을 new_member에 저장
        new_member.appendChild(mem_idx);
        new_member.appendChild(mem_id);
        new_member.appendChild(mem_pw);
        new_member.appendChild(mem_name);
        new_member.appendChild(btn_del);
        new_member.appendChild(btn_edit);

        // new_member를 list로 올리기
        member_list.appendChild(new_member);
    }

저장 및 수정된 회원을 리스트로 올리기 위한 함수입니다.

createElement를 사용하여 생성할 요소에 태그를 지정합니다.

textContent를 사용하여 각 변수에 데이터를 저장합니다.

이후

// 각 내용을 new_member에 저장
new_member.appendChild(mem_idx);
new_member.appendChild(mem_id);
new_member.appendChild(mem_pw);
new_member.appendChild(mem_name);
new_member.appendChild(btn_del);
new_member.appendChild(btn_edit);

// new_member를 list로 올리기
member_list.appendChild(new_member);

이 부분을 통해 new_member에 appendChild를 사용하여 저장한 데이터를 부모 노드에 추가해 줍니다.

초기화된 new_member를 member_list에 자식노드로 올려줍니다.

// 수정 버튼을 생성
const btn_edit = document.createElement('button');
btn_edit.textContent = 'edit';
btn_edit.addEventListener('click', (e) => {
    document.querySelector('#edit').style.display = 'block';
    document.querySelector('#reg').style.display = 'none';

    const members = JSON.parse(localStorage.getItem('members'));
    const member = members[key];

    if (member) {
        idx.value = key;
        input_eId.value = member.id;
        input_ePw.value = member.pw;
        input_eName.value = member.name;
    }
});

// 삭제 버튼을 생성
const btn_del = document.createElement('button');
btn_del.textContent = "delete";
btn_del.addEventListener('click', (e) => {
    const del_div = document.querySelector(`[data-key="${key}"]`);
    member_list.removeChild(del_div);

    // localStorage에서 삭제
    const members = JSON.parse(localStorage.getItem('members'));
    const updated_members = members.filter((member, index) => index !== key);
    localStorage.setItem('members', JSON.stringify(updated_members));

    // 화면 업데이트
    member_list.innerHTML = '';
    updated_members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
});

수정 버튼과 삭제 버튼을 생성합니다.

 

이와 같이 큰 틀을 잡고 기능별로 구현해 주면 회원관리폼의 js파일이 완성됩니다.

 

모든 코드

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원관리 프로그램</title>

    <link href="./style/member.css" rel="stylesheet">
    <script src="./member.js"></script>
</head>

<body>
    <header>
        <h1>회원관리 프로그램</h1>
    </header>
    <div id="content">
        <div id="reg">
            <h2 class="title">회원 저장</h2>
            <form id="regForm">
                <table>
                    <tr>
                        <td>
                            <label>아이디</label>
                            <input type="text" id="uid" placeholder="아이디" required>
                        </td>
                        <td>
                            <label>비밀번호</label>
                            <input type="password" id="pw" placeholder="비밀번호" required>
                        </td>
                        <td>
                            <label>이름</label>
                            <input type="text" id="uname" placeholder="이름" required>
                        </td>
                        <td>
                            <input type="submit" value="저장">
                        </td>
                    </tr>
                </table>
            </form>
        </div>


        <div id="edit">
            <h2 class="title">회원 수정</h2>
            <form id="editForm">
                <input type="hidden" id="idx" required>
                <table>
                    <tr>
                        <td>
                            <label>아이디</label>
                            <input type="text" id="eid" placeholder="아이디" required>
                        </td>
                        <td>
                            <label>비밀번호</label>
                            <input type="password" id="epw" placeholder="비밀번호" required>
                        </td>
                        <td>
                            <label>이름</label>
                            <input type="text" id="ename" placeholder="이름" required>
                        </td>
                        <td>
                            <input type="submit" value="수정">
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <div class="listarea">
            <h2 class="title">회원 리스트</h2>
            <table id="list">
                <thead class="listtable">
                    <tr>
                        <th>NO</th>
                        <th>아이디</th>
                        <th>비밀번호</th>
                        <th>이름</th>
                        <th>수정/삭제</th>
                    </tr>
                </thead>
                <tbody id="list-mem">
                    <!-- 회원 리스트가 여기에 추가됩니다. -->
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

CSS

div,
h1,
form,
header,
body {
    margin: 0;
    padding: 0;
}

header {
    margin-bottom: 15px;
    border-bottom: 1px solid #DDD;
}

header>h1 {
    margin: 20px;
    ;
}

#reg,
#edit {
    padding: 20px;
}

#reg td,
#edit td {
    width: 150px;
}

#reg input,
#edit input {
    width: 130px;
}

#reg label,
#edit label {
    display: block;
    background-color: black;
    color: floralwhite;
    padding: 5px;
}

#reg input[type=submit],
#edit input[type=submit] {
    font-size: 1.2em;
    font-weight: bold;
    height: 70px;
}

#reg input,
#edit input {
    padding: 10px;
}


h2.title {
    border-bottom: 1px solid #DDD;
    padding: 5px;
    margin: 10px 0;
}

#list {
    width: 100%;
}

div.listarea {
    padding: 20px;
}


.listtable {
    width: 100%;
    border: 1px solid lightgray;
    border-collapse: collapse;
    /* 
    attribute 
    + separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 유지.
    + collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 삭제. 
                 겹치는 부분은 한 줄로 나타냅니다.
                 !! 테이블의 보더를 한줄포 표기 가능
    + initial : 기본값으로 설정합니다.
    + inherit : 부모 요소의 속성값을 상속받습니다. 
    */
}

.listtable tr,
.listtable th {
    border: 1px solid lightgray;
    padding: 5px;
}

.listtable th {
    background-color: black;
    color: cornsilk;
}

.listtable tr {
    text-align: center;
}

#edit {
    display: none;
}

JavaScript

class Member {
    constructor(id, pw, name) {
        this.id = id;
        this.pw = pw;
        this.name = name;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const input_userId = document.querySelector('#uid');
    const input_userPw = document.querySelector('#pw');
    const input_userName = document.querySelector('#uname');
    const input_eId = document.querySelector('#eid');
    const input_ePw = document.querySelector('#epw');
    const input_eName = document.querySelector('#ename');
    const regForm = document.querySelector('#regForm');
    const member_list = document.querySelector('#list-mem');
    const editForm = document.querySelector('#editForm');
    const idx = document.querySelector('#idx');

    // 기존 저장된 멤버를 로드
    if (localStorage.getItem('members')) {
        const members = JSON.parse(localStorage.getItem('members'));
        members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
    }

    // 회원 저장 폼 제출 시
    regForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // 빈칸이 있다면 경고
        if (input_userId.value.trim() === '' || input_userPw.value.trim() === '' || input_userName.value.trim() === '') {
            alert("빈칸이 있습니다.");
            return;
        }

        // 새로운 멤버를 저장할 변수 생성
        const new_member = new Member(input_userId.value, input_userPw.value, input_userName.value);

        // localStorage에 저장
        const members = localStorage.getItem('members') ? JSON.parse(localStorage.getItem('members')) : [];
        members.push(new_member);
        localStorage.setItem('members', JSON.stringify(members));

        // 새로운 멤버를 목록에 추가
        addMemberToList(new_member.id, new_member.pw, new_member.name, members.length - 1);

        // 폼 초기화
        regForm.reset();
    });

    // 회원 수정 폼 제출 시
    editForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // 빈칸이 있다면 경고
        if (input_eId.value.trim() === '' || input_ePw.value.trim() === '' || input_eName.value.trim() === '') {
            alert("빈칸이 있습니다.");
            return;
        }

        // 기존 멤버 업데이트
        const key = parseInt(idx.value);
        const members = JSON.parse(localStorage.getItem('members'));

        if (members[key]) {
            members[key].id = input_eId.value;
            members[key].pw = input_ePw.value;
            members[key].name = input_eName.value;
            localStorage.setItem('members', JSON.stringify(members));

            // 화면 업데이트
            member_list.innerHTML = '';
            members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        }

        // 폼 초기화 및 수정 폼 숨기기
        editForm.reset();
        document.querySelector('#edit').style.display = 'none';
        document.querySelector('#reg').style.display = 'block';
    });

    function addMemberToList(id, pw, name, key) {
        const new_member = document.createElement('tr');
        new_member.setAttribute('data-key', key);

        // 각 내용을 저장
        const mem_idx = document.createElement('td');
        mem_idx.textContent = key;
        const mem_id = document.createElement('td');
        mem_id.textContent = id;
        const mem_pw = document.createElement('td');
        mem_pw.textContent = pw;
        const mem_name = document.createElement('td');
        mem_name.textContent = name;

        // 수정 버튼을 생성
        const btn_edit = document.createElement('button');
        btn_edit.textContent = 'edit';
        btn_edit.addEventListener('click', (e) => {
            document.querySelector('#edit').style.display = 'block';
            document.querySelector('#reg').style.display = 'none';

            const members = JSON.parse(localStorage.getItem('members'));
            const member = members[key];

            if (member) {
                idx.value = key;
                input_eId.value = member.id;
                input_ePw.value = member.pw;
                input_eName.value = member.name;
            }
        });

        // 삭제 버튼을 생성
        const btn_del = document.createElement('button');
        btn_del.textContent = "delete";
        btn_del.addEventListener('click', (e) => {
            const del_div = document.querySelector(`[data-key="${key}"]`);
            member_list.removeChild(del_div);

            // localStorage에서 삭제
            const members = JSON.parse(localStorage.getItem('members'));
            const updated_members = members.filter((member, index) => index !== key);
            localStorage.setItem('members', JSON.stringify(updated_members));

            // 화면 업데이트
            member_list.innerHTML = '';
            updated_members.forEach((member, index) => addMemberToList(member.id, member.pw, member.name, index));
        });

        // 각 내용을 new_member에 저장
        new_member.appendChild(mem_idx);
        new_member.appendChild(mem_id);
        new_member.appendChild(mem_pw);
        new_member.appendChild(mem_name);
        new_member.appendChild(btn_del);
        new_member.appendChild(btn_edit);

        // new_member를 list로 올리기
        member_list.appendChild(new_member);
    }
});