달과 함께하는 IT

개요 정규 표현식은 문자열 검색 및 치환 등의 작업에 사용되는 강력한 도구입니다. 그러나 정규 표현식 내에서는 특정 특수 문자들이 특별한 의미를 가지고 있습니다. 예를 들어: . : 어떤 문자와도 일치합니다. * : 앞의 문자나 그룹이 0번 이상 반복됩니다. + : 앞의 문자나 그룹이 1번 이상 반복됩니다. 그러므로, 이러한 특수 문자들을 문자 그대로 검색하려면 이스케이프 처리가 필요합니다. escapeRegExp 함수 이스케이프 처리는 특수 문자 앞에 역슬래시(\)를 붙여주는 것을 말합니다. /** * 정규 표현식에서 사용되는 특수 문자를 이스케이프합니다. * @param {string} string - 이스케이프 할 문자열. * @returns {string} 이스케이프된 문자열을 반환합니다. */ ..

React에서 스크롤 기반 헤더 최적화하기 스크롤 기반의 동작은 웹 애플리케이션에서 흔히 볼 수 있는 패턴입니다. 이런 패턴은 사용자 경험(UX)을 크게 향상시켜주지만, 잘못 구현될 경우 성능에 문제를 가져올 수 있습니다. 이 글에서는 React Hook을 사용하여 스크롤에 따라 헤더 내용을 바꾸는 작업의 최적화 과정을 함께 살펴보겠습니다. 초기 구현: 이전 코드 우리가 개선 전에 사용하던 코드는 아래와 같습니다: import { useEffect } from "react"; import { Store } from "Helper"; import { CommonHeaderTypePageActions } from "Action"; const useProminentHeader = (ref, title) => ..