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

✨ JavaScript 과제

 

📌 과제

직원 사진 관리 서비스

직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들고, 코드 리뷰 후 리팩토링을 진행한다.

 

 

📸 사이트

데모 사이트 : https://elegant-dusk-116a43.netlify.app/

 

완성 모습

 

📝 코드 리뷰

1. 재사용되는 메서드

// 로딩 애니메이션
export function showLoadingAnimation() {
    const loadingAnimation = document.querySelector('.loading-animation');
    loadingAnimation.style.display = 'block';
}
  
export function hideLoadingAnimation() {
    const loadingAnimation = document.querySelector('.loading-animation');
    loadingAnimation.style.display = 'none';
}

// toast message
export function showToast(message) {
    const toast = document.querySelector('.toast-wrap');
    const toastMessage = toast.querySelector('.toast-message');
    toastMessage.textContent = message;
  
    toast.style.display = 'block';
    setTimeout(() => {
      toast.style.display = 'none';
    }, 2000);
}

여러 파일에서 사용되는 토스트 메세지와 로딩 애니메이션 기능을 각각의 파일에서 메서드를 작성하여 사용했다. 재사용되는 메서드들을 한 파일에 분리하여 작성한 다음, 필요한 곳에서 사용하는 방식으로 리팩토링해야겠다.

👉🏻 재사용되는 메서드 분리

 

 

🛠️ 리팩토링

1. utils 파일 생성

 

메서드가 필요한 js 파일에서 import하여 사용

import { showToast, showLoadingAnimation, hideLoadingAnimation } from './utils.js';

중복된 코드 정리로 유지보수 시 관리 용이!

 

 

 

🎀 느낀 점

좋은 코드를 작성하기 위해서는 기능에만 초점을 두지 않고 코드의 가독성, 유지보수 용이성 등을 고려하여 작성해야 한다는 것을 배울 수 있었다. 다음에 프로젝트를 진행할 때에는 중복 코드 없이 더 효율적인 코드를 짤 수 있도록 신경 써야겠다.