React-Bootstrap 모달 안에서 react-switch-input의 Switch를 클릭할 때 "Blocked aria-hidden on an element because its descendant retained focus" 오류가 발생하였다(그림 2 참조).🔍 원인 분석React-Bootstrap의 Modal은 aria-hidden="true"를 자동으로 설정모달이 열리면 배경 요소를 비활성화하기 위해 aria-hidden="true"를 설정함.하지만 react-switch-input의 Switch는 내부적으로 focus()를 사용할 가능성이 있음.이때, aria-hidden="true"가 설정된 요소 내에서 포커스를 가지는 컴포넌트가 있으면 오류 발생Switch가 포커스를 요청하는 경우Sw..

배열과 객체 변환 성능 비교 실험1. 실험 개요JavaScript에서 배열과 객체 간의 변환 성능(수행 속도)을 비교하여, 두 가지 데이터 구조 간의 변환 작업이 성능에 어떤 영향을 미치는지 분석하였다.2. 실험 방법2.1 테스트 환경JavaScript 런타임 환경Lodash 라이브러리 사용100,000개 항목의 데이터셋 사용2.2 테스트 데이터두 가지 유형의 데이터셋을 준비했습니다:객체 배열(raw1): 각 요소가 5개의 속성을 가진 객체인 배열2차원 배열(raw2): 각 요소가 5개의 항목을 가진 배열인 배열2.3 테스트 코드const _ = require("lodash");// 객체 배열 생성const raw1 = Array.from({ length: 100000 }, (_, i) => ({ va..

웹 사이트를 크롤링한 데이터를 DB에 insert하려고 한다. insert할 때 대상 table의 기존 데이터를 모두 삭제하고 새로운 데이터를 저장해야 하는 경우이다. 그런데 새로 크롤링한 데이터가 기존 데이터와 비교해 변경된 부분이 전혀 없다면 기존 테이블 데이터의 삭제와 저장 과정이 낭비가 될 수 있다. 따라서 데이터의 변경이 발생했는지를 확인하는 방법을 정리해 보고자 한다.기존 데이터와 새 데이터의 변경 여부를 감지하는 2가지 방법은 다음과 같다.직접 비교 방식: 기존 데이터를 조회하여 새 데이터와 비교.해시값 비교 방식: 테이블 데이터를 해시로 변환하여 변경 여부를 확인.1. 직접 비교 방식💡 적용 방법기존 데이터 조회SELECT col1, col2, col3 FROM table_name 로 현..

macOS에 nvm(Node Version Manager) 설치 및 node 버전 관리 방법nvm은 node.js의 여러 버전을 쉽게 설치하고 관리할 수 있도록 도와주는 유틸리티이다.1. nvm 설치nvm은 Homebrew를 통해 설치하는 것이 가장 간편하다. Homebrew가 설치되어 있지 않다면 다음 명령어를 터미널에 입력하여 설치한다./bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Homebrew가 설치되었다면 다음 명령어를 입력하여 nvm을 설치한다.brew install nvm2. 환경변수 설정nvm을 사용하기 위해서는 몇 가지 환경변수를 설정해야 한다. 터미널을 열고 다음 ..

여기에서는 리액트 프로젝트를 우분투 서버에서 구동하는 방법을 다루고자 한다. 먼저 프로젝트 빌드부터 해보자!1. 프로젝트 빌드리액트 프로젝트의 package.json에 설정된 빌드 명령어를 사용하더 프로젝트를 빌드한다. 아래는 명령어 예제이다.npm run build 빌드가 완료되면 index.html이 포함된 build 폴더가 생성된다.2. 구동 명령2-1. npx로 구동npx로 간단하게 구동해 볼 수 있다. 프로젝트 경로에서(build 경로로 이동할 필요가 없다.) 아래 명령어를 실행하면 빌드된 프로젝트가 포그라운드에서 구동된다.npx serve -l [실행할 포트 번호] -s build예를 들어 3000번 포트로 프로젝트를 구동하고 싶다면 아래와 같이 명령어를 작성하면 된다.npx serve -l ..

1. 대규모 데이터 렌더링의 도전 과제현재 진행 중인 프로젝트에서 약 5000개의 객체를 가지고 있는 배열을 다루게 되었다. 이 배열 데이터를 테이블로 렌더링하였는데 역시나 성능 이슈가 발생했다. 이번 케이스와 같이 웹 애플리케이션에서 수천 또는 수만 개의 데이터 항목을 한 번에 렌더링하면-스크롤-성능이 크게 저하된다. 모든 항목을 DOM에 동시에 렌더링하면 브라우저 메모리 사용량이 급증하기 때문이다.2. 가상화(Virtualization)란?이 이슈를 해결하기 위해 가상화 기술을 적용하였다. 가상화는 현재 뷰포트에 보이는 항목만 실제로 렌더링하고, 스크롤에 따라 동적으로 항목을 로드하는 기술이다. 이를 통해 대용량 데이터를 매우 효율적으로 처리할 수 있다.3. @tanstack/react-virtual..

github를 사용하다 보면 실수로 API key와 같은 민감한 정보를 push해버리는 경우가 있다. github에서 해당 파일을 삭제하더라도 history에는 여전히 민감한 내용이 노출되고 있다. 해당 project를 private으로 전환할 수도 있겠지만 클라우드에 노출되어 있다는 점은 변함없다. 이 난감한 상황을 해결하기 위한 "민감한 history를 제거하는 방법 두 가지"를 정리해 보았다.1. git filter-branch 명령어를 사용하여 히스토리 삭제1) git filter-branch 명령어 실행git filter-branch --force --index-filter "git rm --cached --ignore-unmatch " --prune-empty --tag-name-filter ..

1. 무한한 깊이(depth)의 체크 박스 구현[그림 1]과 같이 무한한 깊이의 체크 박스를 구현할 필요가 있었다. 목차에 사용되는 데이터는 category 배열인데 이 배열의 요소는 객체이다. 이 객체 하나가 체크 박스 하나를 구성한다. 객체는 subcategory를 가지고 있어서 이를 통해 무한한 깊이의 목차를 만들 수 있다. 구현하고자 하는 기능은 다음과 같다.부모와 자식 체크 박스를 렌더링 할 때 시각적으로 구분이 가능하도록 margin-left 값을 자동으로 부여해야 한다.부모 체크 박스를 체크/해제하면 자식 체크 박스도 부모와 동일하게 체크/해제되어야 한다.자식 체크 박스를 체크/해제할 때는 부모 체크 박스에 영향을 주지 않아야 한다. 2. 구현 코드위 기능을 구현함에 있어 중요한 포인트는 재..