삼이의 개발 블로그

보안 문제로 인해 모든 코드는 실제와 다릅니다🧨 문제동적으로 파일이 추가 된 뒤 파일 리스트가 삭제 되지 않는다. 🔧 과제파일이 추가 된 이후에도 리스트 파일에 대한 이벤트가 작동되게 만든다.🪄해결1. MutationObserver를 이용해 Dom 변화 감지하기파일 리스트가 추가 될 때마다 감지하여 이벤트가 활성화 될 수 있게 하였다.// 1. 주기적으로 감지할 대상 요소 선정let list = document.querySelector('.fileName__list')// 2. 옵저버 콜백 생성const callback = (mutationList, observer) => { for(const mutation of mutationList){ let listItems = mutation.ta..

보안 문제로 인해 모든 코드는 실제와 다릅니다🧨 문제옵션에 따른 선택지를 약 50개의 개별 팝업을 사용하여 UI를 제공하여 사용자 경험이 저하된다. 🔧 과제팝업 구조 개선옵션 조합에 따라 동적으로 정보가 업데이트 되는 기능 구현타이틀 클릭시 설정된 옵션값이 뜨는 기능 구현🪄해결1. 팝업 구조 통합50개의 개별 팝업을 옵션으로 분류하여 2개의 공통 팝업으로 통합했다. 2.데이터 매핑 최적화정보를 키-값 기반의 매핑 구조로 설계하여 옵션 조합을 효율적으로 처리하였다function getData(param){ let selectOption = {}; let dataMapping ={}; selectOption = { opt01: $(input[name="opt01"]:checked)..