JavaScript 로 사용자 권한 관리 구현

소개

이 프로젝트에서는 JavaScript 와 jQuery 를 사용하여 사용자 권한 관리 시스템을 구현하는 방법을 배우게 됩니다. 이 프로젝트는 사용자 데이터를 비동기적으로 가져와 사용자 권한 테이블에 렌더링하고, 사용자를 사용자 목록과 관리자 목록 간에 이동시키는 기능과 그에 따른 사용자 권한 업데이트 기능을 제공하는 것을 포함합니다.

👀 미리보기

User permission management demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

JSON 파일에서 사용자 데이터를 비동기적으로 가져와 사용자 권한 테이블에 렌더링하는 방법
개별적으로 또는 한 번에 모든 사용자를 사용자 목록과 관리자 목록 간에 이동시키는 기능을 구현하는 방법
왼쪽 및 오른쪽 목록의 사용자를 기반으로 사용자 권한 테이블에서 사용자 권한을 업데이트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

AJAX 를 사용하여 데이터를 비동기적으로 가져오기 (fetch)
jQuery 를 사용하여 DOM 을 조작하여 사용자 인터페이스 업데이트
웹 애플리케이션에서 권한 관리 기능 구현

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
├── js
│    ├── index.js
│    ├── jquery-3.6.0.min.js
│    └── userList.json
└── index.html

그 중:

css는 스타일 폴더입니다.
js/index.js는 코드를 완성해야 하는 JS 파일입니다.
js/jquery-3.6.0.min.js는 jQuery 파일입니다.
js/userList.json은 요청할 데이터 파일입니다.
index.html은 메인 페이지입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

Initial Effect

비동기 데이터 가져오기 및 렌더링

이 단계에서는 사용자 데이터를 비동기적으로 가져와 사용자 권한 테이블에 렌더링하는 방법을 배웁니다.

js/index.js 파일을 엽니다.

AJAX 를 사용하여 js/userList.json 파일에서 사용자 데이터를 가져오는 getData() 함수를 구현합니다.

function getData() {
  // TODO
  $.ajax("./js/userList.json").then((res) => {
    res.forEach((item) => {
      $("#userList tbody").html(
        $("#userList tbody").html() +
          ` <tr name=${item.name}>
               <td>${item.name}</td>
               <td>${item.right ? "Administrator" : "User"}</td> 
           </tr>`
      );
    });
  });
}

사용자 권한 테이블을 초기화하기 위해 $(function () { ... }) 블록의 시작 부분에서 getData() 함수를 호출합니다.
```
$(function () {
  getData();
  // Adding events to buttons
  // ...
});
```

이 단계를 완료하면 페이지가 로드될 때 js/userList.json 파일의 데이터로 사용자 권한 테이블이 채워집니다. 효과는 다음과 같습니다.

Effect after obtaining data through AJAX

사용자 목록 간 이동

이 단계에서는 왼쪽 및 오른쪽 목록 간에 사용자를 이동하고 모든 사용자를 반대편으로 이동하는 기능을 구현합니다.

js/index.js 파일을 열고 $(function () { ... }) 블록 안에 코드를 추가합니다.

선택한 사용자를 왼쪽 목록에서 오른쪽 목록으로 이동하는 $("#add") 클릭 이벤트 핸들러를 구현합니다.

$("#add").click(function () {
  // TODO
  let option = $("#leftSelect option:selected");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

모든 사용자를 왼쪽 목록에서 오른쪽 목록으로 이동하는 $("#addAll") 클릭 이벤트 핸들러를 구현합니다.

$("#addAll").click(function () {
  // TODO
  let option = $("#leftSelect option");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

선택한 사용자를 오른쪽 목록에서 왼쪽 목록으로 이동하는 $("#remove") 클릭 이벤트 핸들러를 구현합니다.

$("#remove").click(function () {
  // TODO
  let option = $("#rightSelect option:selected");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

모든 사용자를 오른쪽 목록에서 왼쪽 목록으로 이동하는 $("#removeAll") 클릭 이벤트 핸들러를 구현합니다.

$("#removeAll").click(function () {
  // TODO
  let option = $("#rightSelect option");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

이 단계를 완료하면 왼쪽 및 오른쪽 목록 간에 사용자를 이동하고 모든 사용자를 반대편으로 이동할 수 있습니다.

사용자 권한 업데이트

이 단계에서는 왼쪽 및 오른쪽 목록의 사용자를 기반으로 사용자 권한 테이블에서 사용자 권한을 업데이트하는 기능을 구현합니다.

js/index.js에서 changeAccess 함수를 찾습니다.

사용자 권한 테이블에서 권한을 업데이트하는 changeAccess() 함수를 구현합니다.

function changeAccess(right, changeList) {
  changeList.each((index, item) => {
    $(`#userList tr[name=${item.value}] td:last`).html(right);
  });
}

changeAccess() 함수는 사용자를 목록 간에 이동하는 버튼 클릭에 대한 이벤트 핸들러의 끝에서 호출됩니다.

$("#add").click(function () {
  // TODO
  // ...
  changeAccess("Administrator", option);
});

$("#addAll").click(function () {
  // TODO
  // ...
  changeAccess("Administrator", option);
});

$("#remove").click(function () {
  // TODO
  // ...
  changeAccess("User", option);
});

$("#removeAll").click(function () {
  // TODO
  // ...
  changeAccess("User", option);
});

이 단계를 완료하면 사용자가 왼쪽 및 오른쪽 목록 간에 이동할 때 사용자 권한 테이블의 사용자 권한이 자동으로 업데이트됩니다. 효과는 다음과 같습니다.

User permissions update demo