KDT0_JeongSeoHyeon 직원 사진 관리 페이지 #48
Conversation
✅ Deploy Preview for elegant-dusk-116a43 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
증명사진 비율로 크게 프로필이미지가 있으니 시원하고 보기 좋네요! |
| profileImage.style.border = 'none'; | ||
|
|
||
| modalWrap.style.display = 'none'; | ||
| window.parent.postMessage('modalClosed', '*'); |
There was a problem hiding this comment.
postMessage() 메소드가 뭔지 찾아봤는데 iframe이란 기술이 있군요. 저는 팝업도 display조작으로 껐다켰는데, 다른 html을 보여주는 기술이 있다는걸 처음 알았네요. 좋은 거 배워갑니다!
There was a problem hiding this comment.
저도 iframe이 뭔지 궁금했었는데 덕분에 알고가네요 html 안에 html을 삽입하는 사기적인 기술..!
| profileImage.style.border = 'none'; | ||
|
|
||
| modalWrap.style.display = 'none'; | ||
| window.parent.postMessage('modalClosed', '*'); |
There was a problem hiding this comment.
저도 iframe이 뭔지 궁금했었는데 덕분에 알고가네요 html 안에 html을 삽입하는 사기적인 기술..!
| import { getDatabase, ref as dbRef, set, push } from 'https://www.gstatic.com/firebasejs/9.6.4/firebase-database.js'; | ||
| import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from 'https://www.gstatic.com/firebasejs/9.6.4/firebase-storage.js'; | ||
|
|
||
| const firebaseConfig = { |
js/modal.js
Outdated
| const loadingAnimation = document.querySelector('.loading-animation'); | ||
|
|
||
| function showLoadingAnimation() { | ||
| loadingAnimation.style.display = 'block'; | ||
| } | ||
|
|
||
| function hideLoadingAnimation() { | ||
| loadingAnimation.style.display = 'none'; | ||
| } |
There was a problem hiding this comment.
loading-animation 이나 toast 같은 부분은 util 파일이나 다른 곳에서 공동으로 관리하면 유지보수하기 편해 보입니다..!
There was a problem hiding this comment.
재사용 되는 코드 한번에 관리할 수 있도록 리팩토링 해보겠습니다! 좋은 의견 감사합니다 😊
|
저도 모달을 사용했었는데 postMessage() 이런 기능도 있었군요 잘 보고갑니다~! |
There was a problem hiding this comment.
트러블 슈팅 작성에 감명받았습니다!
개발자도구 콘솔에서 뜨는 에러를 자세히 찾아보고 대응하는 거에서 많은 걸 배우게 되더라고요,
모바일 반응형 화면도 깔끔한 것 같구요 한가지 팁은 태블릿 사이즈 부터 모바일 반응형으로 처리 하기도 합니다. 그래서 769~780 근처 부터 모바일 사이즈로 보여줘도 좋아요. 어디서부터 모바일로 해야할지 고민될 수 있는데요, 디바이스별 width 값을 검색해보면 도움이 되실거에요.
고생하셨습니다 👍🏼
*커밋에 피처별/ fix/ 문서(docs) 등 말머리 달아서 커밋히스토리 남기는 것도 너무 좋네요! 이런 컨벤션 연습을 미리 하면 실무에서 도움이 될 거예요~
| try { | ||
| console.log(user.name); | ||
|
|
||
| const imageRef = storageRef(storage, `images/${user.name}-profile`); | ||
| const userRef = dbRef(database, `users/${userId}`); | ||
|
|
||
| showLoadingAnimation(); | ||
|
|
||
| const response = await fetch(imageUrl); | ||
| const blob = await response.blob(); | ||
|
|
||
| await uploadBytes(imageRef, blob); | ||
|
|
||
| const photoUrl = await getDownloadURL(imageRef); | ||
| const userData = { | ||
| "photo": photoUrl | ||
| }; | ||
|
|
||
| await update(userRef, userData); | ||
|
|
||
| console.log(`유저 업데이트 성공 ID ${userRef.key}`); | ||
| showToast(`사진이 변경되었습니다!`); | ||
| } catch (error) { | ||
| console.error('[ERROR]:', error); |
There was a problem hiding this comment.
디바이스 width 찾아보면서 모바일 반응형에 대해 더 공부해보도록 하겠습니다! 리뷰 감사합니다!!😊
|
DOM 조작하는 코드나 firebase 관련 함수들이 많아서 저는 정말 코드가 보기 힘든데, 많은 부분에서 깔끔한 코드라고 느꼈습니다. 또 저는 로딩 이벤트를 어떻게 해야할지 몰랐었는데 잘 배우고 갑니다 !! |
JSH99
force-pushed
the
KDT0_JeongSeoHyeon
branch
from
f420a07 to
f053668
Compare
👩🏻💻 JavaScript 과제
📌 개요
📸 사이트
✨ 구현 내용
직원 등록
사진 수정
직원 삭제
전체 모습
웹
모바일
🙋🏻♀️ 유저 플로우
🚀 트러블 슈팅
✅ 직원 삭제 오류 이슈
✅ callback hell 발생
📝 배운 점
🛠️ Stack