call(), apply()의 공통점과 차이점JavaScript의 apply()와 call() 메서드는 함수를 호출할 때 this 컨텍스트를 지정하고 인수를 전달하는 데 사용된다. 두 메서드는 비슷한 기능을 하지만, 인수를 전달하는 방식에서 차이가 있다.1. call() 메서드call() 메서드는 함수를 즉시 호출하면서 첫 번째 인수로 this 컨텍스트를 지정하고, 나머지 인수들을 순서대로 전달한다.문법: function.call(thisArg, arg1, arg2, ...)thisArg: 함수 내부에서 this로 사용할 객체.arg1, arg2, ...: 함수에 전달할 인수들.2. apply() 메서드apply() 메서드도 함수를 즉시 호출하면서 첫 번째 인수로 this 컨텍스트를 지정하지만, 인수들을..

1. 자바에서 Iterator를 사용하는 이유1. 컬렉션 순회 표준화자바의 다양한 컬렉션(List, Set, Map 등)은 내부 구조가 다르기 때문에, 각 컬렉션에 맞는 순회 방식이 필요하다.Iterator는 이러한 다양한 컬렉션을 일관된 방식으로 순회할 수 있도록 표준화된 인터페이스를 제공한다.즉, 컬렉션의 종류에 상관없이 hasNext()와 next() 메서드를 사용하여 요소에 접근할 수 있다.✅ 예제 코드Iterator를 사용하면 List, Set 등 다양한 컬렉션을 일관된 방식으로 순회할 수 있다.import java.util.*;public class IteratorExample1 { public static void main(String[] args) { List list =..

📌 React에서 useRef를 활용한 안정적인 소켓 통신웹 애플리케이션에서 실시간 데이터를 다루려면 WebSocket을 활용하는 경우가 많다.React에서는 보통 useEffect를 사용해 소켓을 관리하지만, 잘못된 방식으로 사용하면 불필요한 소켓 재연결, 이벤트 리스너 중복 등록, 메모리 누수 같은 문제가 발생할 수 있다.이를 해결하기 위해 useRef를 활용하는 것이 효과적이다! 🚀🚨 기존 코드import { useEffect, useState } from "react";import { io } from "socket.io-client";const ComponentName = () => { const [socketState, setSocketState] = useState(null); us..

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 ..