728x90 프론트엔드4 [React] Material-UI Popover에서 Popper로 전환한 시행착오 1. 배경 및 요구사항프로젝트에서는 Popover를 사용하여 특정 UI를 구현하고자 하였다. 그러나 팝오버가 열려 있는 동안에도 배경 요소와 상호작용할 수 있도록 하려는 요구사항이 존재하였다.2. 초기 시도: Popover의 ModalProps 활용Material-UI Popover는 내부적으로 Modal을 사용하여 포커스를 팝오버 내부로 강제하는 특성을 지니고 있다. 이에 ModalProps를 이용하여 백드롭 숨김, 스크롤 잠금 해제, 포커스 강제 해제를 시도하였다. 아래 코드는 그 예이다. {/* Popover 내용 */}그러나 이 방법을 사용하면 TypeScript 에러가 발생하였다.오류 메시지는 다음과 같다.Property 'ModalProps' does not exist on type 'Int.. 2025. 3. 14. [React] React와 TypeScript로 구현하는 다양한 텍스트 들여쓰기 기법 이번 포스팅에서는 React 컴포넌트를 활용하여 텍스트 들여쓰기 효과를 다양하게 구현하는 방법을 소개합니다.특히, 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기가 적용되는 "indentDouble" 타입을 포함한 여러 타입의 구현 예제를 제공하여, UI의 가독성을 높이는 데 도움이 될 것입니다.import React from 'react';import { Box, Typography } from '@material-ui/core';interface FaqAnswer { type: 'br' | 'indent' | 'indentAll' | 'indentDouble' | string; text: string;}// 다중 텍스트 들여쓰기 구현 함수const generateAnswer = (co.. 2025. 2. 11. [면접 대비] 브라우저에 google.com을 입력하면 무슨 일이 일어날까? 개요웹 개발자나 네트워크 엔지니어 면접에서 자주 나오는 질문 중 하나가 **"브라우저에 google.com을 입력하면 무슨 일이 일어나는가?"**이다. 이 질문은 웹의 동작 원리, 네트워크 구조, 브라우저 렌더링 과정 등을 얼마나 이해하고 있는지 평가하는 데 사용된다. google.com을 입력하고 엔터를 누르는 순간부터 웹페이지가 표시될 때까지의 전체 흐름에 대하여 정리했다.1. 사용자가 google.com 입력 후 Enter를 누름먼저 사용자가 브라우저의 주소창에 google.com을 입력하고 Enter를 누르면, 브라우저는 이 URL을 처리하기 시작2. DNS(Domain Name System) 조회브라우저는 google.com을 IP 주소로 변환하기 위해 DNS 요청을 보냄.로컬 캐시 확인: 브.. 2025. 2. 10. [React] React 프로젝트마다 다른 버전 설치해도 괜찮을까? 완벽 정리 📌 React 프로젝트마다 다른 버전 설치해도 괜찮을까?React 프로젝트를 여러 개 작업하다 보면 각 프로젝트에서 다른 React 버전을 사용해야 할 때가 있습니다.그런데, 한 폴더에서 React 17을 쓰고, 다른 폴더에서 React 18을 설치해도 괜찮을까요?결론부터 말하면, 각 프로젝트 폴더마다 React 버전을 다르게 설치해도 문제가 없습니다.✅ React 프로젝트별 버전이 충돌하지 않는 이유각 프로젝트는 독립적인 패키지 환경을 가짐다른 프로젝트의 node_modules/ 폴더와 충돌하지 않음package.json과 package-lock.json을 기반으로 버전이 고정됨🔹 현재 프로젝트에서 사용 중인 React 버전 확인하기터미널에서 해당 프로젝트 폴더로 이동 후 아래 명령어를 실행하세요... 2025. 2. 6. 이전 1 다음 728x90
