패스트캠프 X 야놀자 프론트엔드 개발 JavaScript 과제

✅ 프로젝트 명: 직원 사진 관리 서비스

개발 기간: 2023.08.08 ~ 2023.08.18

리팩터링 기간: 2023.08.28

---

깃헙 주소: https://github.com/Eojoonhyuk/fastcampus1/tree/KDT0_EoJoonHyuk

GitHub - Eojoonhyuk/fastcampus1

배포 주소: https://peppy-dango-21536f.netlify.app

직원관리서비스

 

Stacks: JavaScript, CSS3, HTML5

---

🖥️ 주요 화면 구성

로그인 페이지	메인페이지
등록 페이지	상세 페이지
수정 페이지	검색 페이지

---

✅ 리팩터링

✔️ 주요 작업

• 이미지 미리보기
• 직원 검색 로직 수정(멘토님 코드 리뷰 사항)

---

이미지 미리보기

- 구현 코드(추가)

    window.onload = function () {
      const fileDOM = document.querySelector("#workerImg");
      const preview = document.querySelector("#detail-img");

      fileDOM.addEventListener("change", () => {
        const reader = new FileReader();
        reader.onload = ({ target }) => {
          preview.src = target.result;
        };
        reader.readAsDataURL(fileDOM.files[0]);
      });
    };

- 작동 화면

---

검색 기능 설정 변경

- 구현 코드

const fetchWorkersData = async () => {
      const querySnapshot = await getDocs(collection(db, "board"));
      const workerItemsContainer = document.querySelector(".worker-items");

      querySnapshot.forEach((doc) => {
        this.state.workers.push(doc.data());
      });

      workerItemsContainer.append(
        ...this.state.workers.map(
          (worker) =>
            new Worker({
              props: {
                ...worker,
              },
            }).el
        )
      );
    };

    fetchWorkersData();
    const inputEl = this.el.querySelector("#search-worker");
    inputEl.addEventListener("keyup", (event) => {
      if (event.keyCode === 13) searchWorker();
    });

    async function searchWorker() {
      const searchKeyword = inputEl.value.trim();
      const workerItemsContainer = document.querySelector(".worker-items");
      if (searchKeyword === "") {
        workerItemsContainer.innerHTML = "";
        fetchWorkersData();
      } else {
        workerItemsContainer.innerHTML = "";

        const q = query(
          collection(db, "board"),
          where("name", "==", searchKeyword)
        );
        const querySnapshot = await getDocs(q);

        const searchedWorkers = [];
        querySnapshot.forEach((doc) => {
          searchedWorkers.push(doc.data());
        });

        workerItemsContainer.append(
          ...searchedWorkers.map(
            (worker) =>
              new Worker({
                props: {
                  ...worker,
                },
              }).el
          )
        );
      }
    }

- 작동 화면

---

✅ 느낀점

바닐라 JS로 코드를 처음 작성해보았습니다.  초반에는 많은 어려움을 겪었습니다. 그래서 패스트캠퍼스의 온라인 강의를 통해 여러 강의를 듣고 구현 방법을 익히는 데 많은 도움이 되었습니다. 사진 및 직원 정보를 저장하기 위해 파이어베이스를 활용했는데, 파이어베이스의 공식 문서가 잘 정리되어 있어 참고하기가 편리했습다. 이번 과제를 마치며 느낀 점은 프레임워크에만 익숙해지는 것이 아니라 바닐라 JS도 꾸준히 학습하여 JavaScript 실력을 더 향상시켜야겠다는 생각을 하게 되었습니다.