[JavaScript] ✨ 직원 관리 서비스

📍 프로젝트 소개

• 진행 기간 : 2023-08-07~2023-08-18
• 배포 주소 : https://my-employee-management.netlify.app/
• 기술 스택
  

✔ 구현 내용

• 로딩 애니매이션, 직원 리스트
  

• 직원 등록
  

• 직원 상세
  

• 직원 수정
  

• 직원 이름과 이메일로 검색
  

• 직원 삭제
  

• 여러 직원 삭제
  

• 반응형 구현 (모바일)
  
  • checked 직원 없이 삭제 버튼 클릭 시 alert

✨ 유저 플로우

📌 회고

• js로 과제를 구현하면서 dom 조작에 익숙해질 수 있었다.
• 파이어베이스를 처음 사용해보는데 연동하는 것에만 며칠이 걸린 것 같다.
  영상을 따라서 연동에 성공했는데 v8로 연동해서 v9부터 추가된 유용한 메소드들를 사용하지 못해 아쉬웠다.

• 해결한 의문이나 이슈

  1. 직원 상세 모달을 띄우기 위해 직원 데이터 read 했을 때 엘리먼트를 생성하고, click 이벤트를 생성하여 클릭한 직원의 데이터를 가져오려고 했다. click 했을 때 선택자 함수로 직원 데이터를 가져오려고 하니, 엘리먼트가 생성되기 전에 선택자가 먼저 찾으려고 해서 null 값이 저장되는 이슈가 있었다.
     -> click 이벤트가 발생했을 때 선택자 함수로 직원 데이터를 가져오는 방법 대신, 이벤트가 발생했을 때 직원 데이터를 넘겨주는 방법으로 이슈를 해결할 수 있었다.

     img.addEventListener("click", () => {
       setModal(employee);	// 직원 데이터 전달
     });
     		```

  2. DOM 생성 : innerHTML vs createElement() ?

     // innerHTML로 DOM 생성
     const rowData = `<tr>
     					<td><input type='checkbox' class='checkbox'  onclick='checked(checkbox)' /></td>
                         <td><img src=${employee.img} class='employee__img' /></td>
     					<td>${name}</td>
     					<td>${email}</td>
     					<td>${tel}</td>
     					<td>${dateTime}</td>
     				</tr>`
     
     const employeeTable = document.querySelector(".employee-table");
     employeeTable.innerHTML = rowData;

     // createElement()로 DOM 생성
     
      const tr = document.createElement("tr");
     
      const inputTd = document.createElement("td");
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.className = "checkbox";
      checkbox.onclick = checked(checkbox);
      inputTd.append(checkbox);
     
      const imgTd = document.createElement("td");
      const img = document.createElement("img");
      img.src = employee.img;
      img.className = "employee__img";
      imgTd.append(img);
     
      const name = document.createElement("td");
      name.innerText = employee.name;
      const tel = document.createElement("td");
      tel.innerText = employee.tel;
      const email = document.createElement("td");
      email.innerText = employee.email;
      const dateTime = document.createElement("td");
      dateTime.innerText = employee.date;
     
      tr.className = "row-data";
      tr.append(inputTd, imgTd, name, email, tel, dateTime);
     
     const employeeTable = document.querySelector(".employee-table");
      employeeTable.append(tr);
     

     -> innerHTML 로 dom을 생성하면 코드는 더 간결할 수 있으나, dom을 직접적으로 수정하기 때문에 innerHTML이 실행될 때마다 모든 DOM 요소가 전부 재생성된다. 또한 자동으로 이벤트가 등록되지 않고, XSS 공격의 위험이 있다. 따라서 createElement() 가 더 효율적이다.
     

• 발생한 이슈

  • 검색 엘리먼트 중복 이슈 :
    검색 결과에 따라 엘리먼트를 제거하고 생성하는 식으로 구현하였는데 검색 문자열이 공백이 되었을 때, 모든 직원 엘리먼트를 생성하는 과정에서 검색된 직원 엘리먼트와 중복되는 이슈가 랜덤으로 생겼다.
    -> 모든 직원 데이터를 읽어와 생성할 때와 검색 결과에 따라 엘리먼트를 생성할 때 모두 엘리먼트를 제거하는 함수를 작성하였는데 중복이 생겼다. 리팩토링 기간에 어느 부분에서 중복이 생기는지 찾아봐야겠다.
    

  • 직원 중복 수정 이슈 :
    직원을 바로 수정할 때 다른 직원까지 함께 수정되어 데이터가 덮여쓰이는 이슈가 랜덤으로 생겼다. 이것도 어느 부분에서 발생하는 이슈인지 알아봐야겠다.
    

• 추가로 구현하고 싶은 기능
  • 직원 등록 시 default 이미지 추가하기
  • 모달 뒤 배경 클릭 시 모달 닫히게 하기
  • 직원 상세 모달 ux 개선하기 (어디를 클릭해야 모달이 display 될지에 대한 리뷰가 있었다.)
  • 삭제 전 confirm
  • 직원 등록 시 input 에 required 속성 추가하기