[Webpack] Module parse failed: Unexpected character '' (1:2)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

문제 내용: 프로젝트 루트에 있는 엑셀 파일 import가 적용되지 않음 & 엑셀 파일 인식이 제대로 되지 않음 해결 방법: webpack config 에 설정 추가 & 프로젝트 로컬 경로를 입력하여 파일 direct import ExcelRulesUpload.tsx 의 코드는 어땠을까? function logic const downloadExcelTemplate = e => { const link = document.createElement('a') const fileName = 'excel_template_example.xlsx' link.href = fileName document.body.appendChild(link) link.target = '_self' link.download = fileN..

closest() 로 selector에서 가장 가까운 parent Element 선택하기

사용할 method/ function: .closest() 사용 목적: 특정 태그에 active 클래스가 추가될 경우, 해당 태그에 인접한 parent Element 에도 active class를 붙이고자 함 사이드 바를 헤더에 붙여서 디자인을 일관화 하던 작업 중, 하위의 메뉴를 선택해도 상단 메뉴가 색이 변하지 않는 현상을 발견하였다. 타이틀에 active 클래스를 추가하던 스크립트를 정리하다 보니 발생한 현상이었다. 그런데, 기존에는 event 발생 시 해당 클래스를 직접 selector로 선택했었는데, 지금은 하위 메뉴 중에 active인 (위의 이미지와 같이 선택되어 있어서 색상이 바뀌어있는) 메뉴를 인식해서 위의 타이틀 배경 색상도 바꿔야 하는 상황으로 케이스가 바뀌었다. // 2. 이 클래스..

카테고리 별 data 개수 count -> 카테고리 두 개 씩으로 변경(스키마 조건 포함)

기존 useEffect 내부 코드 // targetRulesId 변화에 따른 진단 대상 테이블, 컬럼, 규칙 개수 count React.useEffect(() => { if (targetRulesId) { let selectedRules = [] for (let i = 0; i rules.id == targetRulesId[i])[0] ) } if (selectedRules[0]) { const tableCount = {} const tables = selectedRules.map(rules => { return rules['tableName'] }) tables.fo..