고객 사진 관리 서비스 📷
고객의 사진을 관리할 수 있는 사진 관리자 서비스 만들기
프로젝트 기간 📆
2023.08.08 ~ 2023.08.17
리팩토링: 2023.08.28 (월)
기술 스택 ⛏️
개발 환경
- Visual Studio Code
- Git
- Github
- Netlify
- Parcel
사용 언어
- HTML
- CSS
- JavaScript
사이트 주소 🔗
배포 URL: https://taupe-dusk-008178.netlify.app/
Github URL: https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/pull/11
화면 구성 🖥️
| 헤더 + 메인 페이지 | 고객 등록 페이지 |
|---|---|
| 고객 상세 정보 페이지 | 고객 정보 수정 페이지 |
리팩토링 과정에서 고객 정보 수정 페이지의 '취소하기' 버튼을 없앴습니다.
리팩토링 ♻️
1. 사진 수정/삭제 흐름 수정
회원 정보 수정 페이지에서 삭제 또는 파일 선택을 하면 바로 firebase Store에 이전 프로필 사진을 삭제하고 새로운 프로필 이미지로 변경하도록 흐름을 짰는데 팀원들이 리뷰에서 흐름이 이상하다는 리뷰를 3개나 남셔줘서 수정 완료를 눌러야지만 수정되도록 수정했다.
2. 명시적인 변수 설정
map이나 forEach를 사용할 때 변수를 그냥 습관처럼 i로 썼는데 i는 index, item, input, indonesia, imf 모든 애들이 다 될 수 있기 때문에 맥락에서 파악해야 하는 변수가 되어버려서 변수 자체만으로도 이해가 가능하도록 길더라도 명시적인 변수명을 짓도록 하는 것이 좋다는 리뷰를 통해 개선했다.
전
document.querySelectorAll('.modify-input')
.forEach(i => {
i.disabled
? (i.disabled = false)
: (i.disabled = true);
});후
document.querySelectorAll('.modify-input').forEach(input => {
input.disabled
? (input.disabled = false)
: (input.disabled = true);
});3. await, then 중복 사용
then을 쓰려면 await를 꼭 써야하는 줄 알고 계속 그렇게 사용했는데 await, then이 둘 다 같은 역할인데 중복으로 사용하고 있던 것이었다. 멘토님의 리뷰로는 'await 와 then catch 를 같이 쓰는 건
포크로 스테이크를 찍고 젓가락으로 포크를 잡는거랑 비슷해요' ->ㅋㅋㅋ정말 바보 같은 짓
아래 코드로 수정했다.
전
await getDocs(collection(db, 'customers')).then(customers => {
inquireListFunc(customers);
});후
const customers = await getDocs(collection(db, 'customers'));
inquireListFunc(customers);4. 색상 변수 사용
프로젝트에서 잡다한 색상을 아무렇게나 사용하는게 불편하기도하고 통일성이 없다고 생각했는데 색상 변수를 사용하는 것도 좋다는 리뷰로 수정했다.
전
background-color: #ffffff;후
html {
--color-white: #ffffff;
--color-black: #000000;
...생략
--color-red-hover: #e61919;
--color-blue: #3ea6ff;
}
background-color: var(--color-white);5. 함수 분류
코드를 이해하기 쉽게 한다고 주석을 범벅을 해놨는데 함수 자체를 유연하고 재사용성이 좋게 짠 뒤에 함수명을 잘 구성하면 그것만으로도 코드를 가독성 좋게 할 수 있다는 리뷰를 보고 수정했다.
아래처럼 수정하면 util에 있는 함수를 원하는 이벤트에 달 수도 있어서 재사용성이 높아지고 detail.js 파일에서도 무슨 코드인지 인지하기 좋게 만들어준다.
전
detail.js
// 프로필 이미지 삭제 기능 ('삭제하기' 버튼)
removeAvatar();util.js
// input 파일이 바뀌면 파이어베이스 Storage에 저장하고 화면에 표시
export const changeAvatar = coustomerId => {
const imageInputEl = document.getElementById('profilePic');
const registForm = document.querySelector('.regist-form');
imageInputEl.addEventListener('change', () => {
if (imgTextInput.value) {
deleteData(imgTextInput.value);
}
..생략
});
});
});
};후
detail.js
const imageInputEl = document.getElementById('profilePic');
imageInputEl.addEventListener('change', () => changeAvatar(coustomerId));util.js
export const changeAvatar = ({ edit, coustomerId }) => {
if (imgTextInput.value) {
deleteData(imgTextInput.value);
}
...생략
});
});
};6. 스크롤 이벤트에 throttle 기법 추가
스크롤 할 때마다 이벤트가 발생하면 너무 많은 이벤트가 발생해서 throttle을 이용해서 0.3초 간격으로 이벤트가 발생하도록 조절해주면 성능을 향상 시킬 수 있다.
전
window.addEventListener('scroll', function () {
const headerContainer = document.querySelector('.header-container');
if (window.scrollY !== 0) {
headerContainer.classList.add('shadow');
} else {
headerContainer.classList.remove('shadow');
}
});후
const throttle = (callback, delayTime) => {
let timerId;
return () => {
if (timerId) return;
timerId = setTimeout(() => {
callback();
timerId = null;
}, delayTime);
};
};
const throttleCallback = () => {
const headerContainer = document.querySelector('.header-container');
window.scrollY
? headerContainer.classList.add('shadow')
: headerContainer.classList.remove('shadow');
};
window.addEventListener('scroll', throttle(throttleCallback, 300));아쉬운 점 😥
- 검색
입력받은 값을 여러개로 나눠서 Cloud Firestore에 추가로 저장하면 가능할 것 같은데 이름만 검색하거나 휴대폰 번호의 가운데만 입력하여 검색하는 등의 변수가 너무 많다고 생각되어 검색어를 정확히 입력해야만 결과가 나오도록 구현한 것이 아쉽다. - SPA
자바스크립트만으로 SPA를 구현하려고 하니 까다로워서 구현하지 못한 것이 아쉽다.
느낀점 🧐
리액트로 서비스를 구축할 때는 쉽게 SPA를 구현하고 중복되는 코드를 컴포넌트로 만들어 효율적으로 코드를 짤 수 있었는데 HTML에 직접 입력하고 자바스크립트로 요소를 만들어서 삽입하려니 불편했다.
또한 네트워크가 느릴 때는 자바스크립트를 로드하는데 시간이 걸려서 스켈레톤이 늦게 보이는 것을 HTML에 직접 자바스크립트를 적어주어 해결하면서 네트워크가 느릴 때는 자바스크립트 로드에도 시간이 오래 걸리고 HTML에 인라인으로 적어주면 빠르게 로드할 수 있다는 점을 알 수 있었다.
