KDT0_ParkSuYeon 직원 정보 관리 서비스 #50
Conversation
|
와! 리드미가 엄청 잘 정리되어 있어서 한번에 읽혔습니다!!👍👍 |
|
모바일 UI를 깔끔하게 구현하신 거 같아요! |
|
모바일 UI 를 깔끔하게 구현하셔서 반응형으로 변경하였을때도 사용자기 보기 편하네요ㅠㅠㅠㅠ저도 이렇게 수정하도록 해야겠습니다. |
|
코드 잘봤습니다! |
|
crud 기능구현, 상세 프로필, 반응형 등 깔끔하게 구현을 잘 하신 것 같아요! |
| document.querySelector("#profile_edit").addEventListener('click', function() { | ||
| const updatedImageURL = document.getElementById('edit-image-preview').src; | ||
| db.collection('employee').doc(docId).update({ | ||
| name: document.querySelector("#edit_name").value, |
There was a problem hiding this comment.
document.getElementById('edit_name') 같은 엘리먼트 조회부분이 중복되고있습니다 이럴때는 상수로 따로 선언해주시는게 좋습니다~
| let modal = document.querySelector('.modal--delete'); | ||
| modal.classList.remove('hidden'); |
There was a problem hiding this comment.
특정 모달을 보이게하는 코드가 동일해보입니다 이런 코드는 별로의 함수로 관리해주시면 좋습니다~
function showModal(modalClass) {
let modal = document.querySelector(modalClass);
modal.classList.remove('hidden');
}
| document.addEventListener('DOMContentLoaded', function() { | ||
| // URL의 쿼리 스트링에서 docId를 추출 | ||
| const queryString = new URLSearchParams(window.location.search); | ||
| const docId = queryString.get('id'); |
There was a problem hiding this comment.
만약 쿼리 스트링에 id 값이 없는경우에 대한 예외처리를 추가해주시면 좋을꺼같습니다~
| table tr { | ||
| background-color: #f8f8f8; | ||
| border: 1px solid #ddd; | ||
| padding: .35em; |
There was a problem hiding this comment.
em 과 rem은 폰트단위입니다 따라서 폰트외에 속성에서 em 과 rem 에 사용은 최대한 지양 해주시는게 좋습니다~
| <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script> | ||
| <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> | ||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> |
There was a problem hiding this comment.
현재 작성해주신 스크립트내에 jquery 관련한 코드는 없는거같아서 jquery는 빼주셔도 될꺼같습니다
이러한 불필요한 리소스가 많아지면 성능에 바로 직결이 되어서 적절하게 관리해주시는게 좋습니다~
| snapshot.ref.getDownloadURL().then((url) => { | ||
| document.getElementById('edit-image-preview').src = url; | ||
| }); |
There was a problem hiding this comment.
then 을 사용하실때는 무조건 catch를 사용해서 에러 핸들링을 해주시는게 좋으시며
then/catch 보다는 아래와 같이 try/catch 와 async/await을 같이 사용하시는걸 추천드립니다~
try{
const url = await shapshot.ref.getDownloadURL()
document.getElementById('edit-image-preview').src = url;
}catch(error){
console.log(error)
}
📷 직원 정보 관리 서비스
패스트캠퍼스 X 야놀자: 프론트엔드 개발 부트캠프의 JAVASCRIPT 과제입니다.
직원들의 정보를 관리할 수 있는 서비스입니다.
주소 : https://employee-management-d1bad.web.app/
[프로젝트 개요]
프로젝트 기간
[필수 요구 사항]
“AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
프로필 페이지를 개발하세요.
스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
사진을 등록, 수정, 삭제가 가능해야 합니다.
유저 플로우를 제작하여 리드미에 추가하세요.
CSS
JavaScript
[화면]
메인 화면
프로필 화면
메인페이지의 이름 클릭 시 프로필 페이지로 이동.
[주요 기능]
CRUD
메인페이지의 등록 버튼 클릭 후 모달창에서 정보 등록
직원 정보 조회
메인페이지 수정 버튼 클릭 후 수정
수정 페이지의 삭제 버튼 클릭시 확인 경고창 생성 후 삭제
데스크탑, 모바일 반응형 페이지
CSS 애니메이션
임직원 등록 모달창 Fade-in 효과
[흐름]
유저플로우
[개선사항]