삼이의 개발 블로그

📖 프로젝트 설명공급망 관리 페이지의 사용성을 개편하고자 하는 프로젝트기간: 2024.06 ~ 2025. 05 🛠️ 기술스택퍼블리싱: HTML5, CSS3, Sass스크립트: Javascript(ES6), jQuery빌드 및 번들링: Rollup버전 관리 및 패키징 관리: Git,npm,pnpm📢 협업툴FigmaTeamsJiraBigBucket🖥️ 구현 기능파일 업로드 퍼블리싱 및 기능 구현아이콘 컴포넌트 퍼블리싱모달 컴포넌트 퍼블리싱🔖 KPT 회고👍 KEEP1. 신입들끼리 운영한 스터디방이번 프로젝트를 위해 모인 인원 중 신입들을 모아 스터디방을 만들었다. IBSheet라는 새로운 api를 다룰 때 생기는 궁금증을 한 번에 질문하고 공유해서 일의 효율을 높였다.그 외에도 JS와 Sass에 관..

보안 문제로 인해 모든 코드는 실제와 다릅니다🧨 문제동적으로 파일이 추가 된 뒤 파일 리스트가 삭제 되지 않는다. 🔧 과제파일이 추가 된 이후에도 리스트 파일에 대한 이벤트가 작동되게 만든다.🪄해결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)..