KDT0_JiHongKyu 직원 관리 시스템 #43
Conversation
|
오...회원 정보에 주소찾기를 통해 주소 정보를 넣는 거 꼭 도전해보고 싶네요!! |
|
와 아니 검색기능 하신거 대단하시네요 저도 이번에 코드 참고하여 검색기능 구현해보도록 하겠습니다.! |
|
write.js에서 valid함수들을 보면 메시지들의 클래스에 active를 추가하는 코드가 지속적으로 반복되는 것 같습니다. html에서 미리 각 메시지에 대한 영역을 만들어두고 클래스를 컨트롤 함으로써 display를 변경시키는 방식을 사용하신 것 같은데, 하나의 message 영역만을 만들어두고 자바스크립트로 동적으로 결과를 출력해주는 방식은 어떨까요? 어떤 영역에 대한 메시지인지, 성공인지 실패인지를 인수로 받는 함수를 만들어 이벤트에 적용시키면 중복되는 코드들의 가독성이 좋아질 것 같습니다. |
|
전체적인 UI가 너무 깔끔한 것 같아요! |
|
Debounce를 활용한 검색 기능, 주소 API등 저도 활용하고 싶은게 많네요! UI도 깔끔하고, 모바일 화면도 매끄럽고 좋습니다👍👍 |
| getItem.forEach((item) => { | ||
| createStaffList(item); | ||
| }); |
There was a problem hiding this comment.
작성해주신 forEach 코드가 중복되어보입니다 동일한 동작을 하는 코드이기에 아래처럼 개선할수있을꺼같습니다~
if(!getItem){
...
localStorage.setItem('infos', JSON.stringify(data));
getItem = data;
}
getItem.forEach((item) => {
createStaffList(item);
});
| tr.addEventListener('click', function () { | ||
| const data = JSON.stringify(item); | ||
| localStorage.setItem('lately-info', data); | ||
| modal.classList.add('active'); | ||
| modalSelect.classList.add('active'); |
There was a problem hiding this comment.
createStaffList 함수가 싱행될떄 마다 tr 에 이벤트 리스너가 등록되고있습니다
만약 데이터가 100개가 넘는다면 이벤트 리스너가 100개 넘게 등록되는 구조여서 성능이 좋지가 않습니다
이럴땐 tr 에 부모 엘리먼트에 이벤트를 추가 하는 이벤트 위임 방식을 사용해주시면 좋습니다~
| email: write['email'].value, | ||
| phone: write['phone'].value, | ||
| address: write['address'].value, | ||
| imageUrl: `https://hong-upload-image.s3.ap-northeast-2.amazonaws.com/${uploadFile.name ?? uploadFile}` |
There was a problem hiding this comment.
이러한 https://hong-upload-image.s3.ap-northeast-2.amazonaws.com 주소 문자열 같은경우는 상수로 선언하여 관리해주시면 추후 유지보수가 쉬워집니다~
| const profileAddress = document.querySelector('.address'); | ||
| const profileImage = document.querySelector('.image'); | ||
| const staffInfoEdit = document.querySelector('.staff-info-edit'); | ||
| const data = JSON.parse(localStorage.getItem('lately-info')); |
There was a problem hiding this comment.
로컬 스토리지에서 데이터를 가져올때는 데이터가 있는지 없는지에 대한 예외처리를 해주시는게 좋습니다~
| const phone1 = data['phone'].slice(0, 3); | ||
| const phone2 = data['phone'].slice(3, 7); | ||
| const phone3 = data['phone'].slice(7); |
There was a problem hiding this comment.
핸드폰 관련한 코드가 다른 파일에서도 반복적으로 나오고있는거같습니다 이럴경우 아래처럼 함수로 만들어서 재사용하시는걸 추천드립니다~
function formatPhone(phoneNumber) {
const phone1 = phoneNumber.slice(0, 3);
const phone2 = phoneNumber.slice(3, 7);
const phone3 = phoneNumber.slice(7);
return `${phone1}-${phone2}-${phone3}`;
}
| write['name'].value = latelyInfo['name']; | ||
| write['email'].value = latelyInfo['email']; | ||
| write['phone'].value = latelyInfo['phone']; | ||
| write['address'].value = latelyInfo['address']; |
There was a problem hiding this comment.
이 코드를 element 상랑 같이 사용하면 코드가 아래처럼 개선될꺼같습니다~
element.forEach((el) => {
write[el].value = latelyInfo[el];
});
🙍♂️ 직원 관리 시스템
HTML, CSS, Javascript로 만든 직원 관리 시스템
➡️ 직원 관리 시스템 둘러보기
🖥️ 프로젝트 소개
직원 등록, 수정, 삭제가 가능한 직원 관리 시스템입니다.
목적: Vanilla JS 실력 향상을 위해 CRUD 구현
특이점: LocalStorage를 이용한 데이터 저장
📆 제작 기간
2023년 08월 08일 ~ 2023년 08월 18일
필수 요구사항
✅“AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현
✅프로필 페이지를 개발
✅스크롤이 가능한 형태의 리스팅 페이지를 개발
✅전체 페이지 데스크탑-모바일 반응형 페이지를 개발
✅사진을 등록, 수정, 삭제가 가능
✅유저 플로우를 제작하여 리드미에 추가
✅CSS - 애니메이션 구현, 상대수치 사용(rem, em)
✅JavaScript - DOM event 조작
🚀 기술스택
📝 기능 구현
1. 리스트 페이지
table태그로 리스트 구현hover시 구분가능하도록 리스트 색 변경2. 직원 등록 페이지
3. 직원 상세 페이지
4. 직원 수정 페이지
5. 모바일 반응형
@media를 사용하여 모바일 UI 구현🙄 User Flow
✍ 개선 사항