[패스트캠퍼스 X 야놀자 프론트엔드 부트캠프] ✨ 직원 관리 서비스 리팩토링

📍 프로젝트 소개

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

⛏ 리팩토링

• 등록 시 모든 값 입력 위해 input에 required 속성 추가

• label 과 input에 id와 for 속성 추가

  <div class="add-data">
   <label for="name">이름</label>
   <input id="name"
   class="add-data__name"
   type="text"
   placeholder="이름을 입력하세요"
   required
   />
  </div>

• Element.on* 은 핸들러와 옵션 추가에 제한이 있으므로 addEventListener 사용하기

  const checkbox = document.createElement("input");
   checkbox.type = "checkbox";
   checkbox.className = "checkbox";
   checkbox.onclick = checked(checkbox);

  const checkbox = document.createElement("input");
   checkbox.type = "checkbox";
   checkbox.className = "checkbox";
   checkbox.addEventListener("click", () => {
     checked(checkbox);
   });

• 직원 삭제 시 confirm 추가

  deleteBtn.addEventListener("click", () => {
     if (confirm("직원을 삭제하시겠습니까?")) {
       db.collection("직원")
         .get()
         .then(async () => {
           await db.collection("직원").doc(employee.id).delete();
           alert("직원 정보가 삭제되었습니다.");
           window.location.href = "./index.html";
         })
         .catch((error) => {
           console.log(error);
         });
     }
   });

  

• for loop의 조건문은 매 반복마다 실행되기 때문에 매 반복마다 checkedArr의 크기를 확인해야 하기 때문에 checkArr.length를 한 번만 계산하도록 코드 수정

  for (let i = 0; i < checkedArr.length; i++) {

  const arrLength = checkedArr.length;
  for (let i = 0; i < arrLengt; i++) {

• 모달 화면 중앙에 위치

   left: 360px;
   top: 25px;

  margin: 0 auto;

📌 회고

• 비동기 작업에 대한 개념과 관리가 필요할 것 같다.
• promise 에 대한 지식이 부족한 것 같다.
• 반복되는 작업들을 공통화하면 좋을 것 같다.
• 안전한 참조형 변수 관리가 필요해보인다.