728x90 분류 전체보기179 [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 Query 사용법 | 데이터 캐싱과 리페칭 쉽게 정리 React Query란?React Query는 React 애플리케이션에서 서버 상태(데이터)를 효율적으로 관리하기 위한 데이터 패칭 라이브러리이다. API로부터 데이터를 가져오고, 캐싱하고, 업데이트하며, 동기화하는 작업을 간편하게 만들어 준다. 서버와 클라이언트 간의 데이터 통신을 효율적으로 관리하여 사용자 경험을 개선할 수 있다.✅ React Query, 왜 사용해야 할까?자동 캐싱과 데이터 동기화데이터를 자동으로 캐싱하고, 필요한 경우에만 서버로부터 데이터를 다시 가져온다.백그라운드에서 데이터를 자동으로 동기화하여 최신 상태를 유지할 수 있다.서버 상태 관리 간소화API 호출, 로딩 상태, 에러 처리 등을 직접 관리할 필요 없이 간편하게 처리할 수 있다.편리한 리페칭(Refetching)특정 조건(.. 2025. 3. 14. [ssh] GitLab SSH 키 설정 및 문제 해결 시행착오 (MacBook) GitLab SSH 키 설정 및 문제 해결 가이드 (MacBook)GitLab에서 SSH로 원격 저장소에 접근하기 위해 SSH 키를 생성하고 설정하는 과정을 상세히 정리했습니다. 시행착오까지 포함하여 바로 사용할 수 있도록 정리하였으니, 복사해서 사용하세요.✅ 1. SSH 키가 이미 있는지 확인하기ls -al ~/.ssh결과에 id_rsa와 id_rsa.pub 파일이 있다면, 이미 SSH 키가 생성되어 있는 상태입니다.만약 .ssh 폴더가 없다면, 새로 생성하세요.✅ 2. SSH 키 새로 생성하기ssh-keygen -t rsa -b 4096 -C "your_email@example.com"-t rsa: RSA 방식으로 생성.-b 4096: 4096비트 길이로 생성 (더 안전).-C: 이메일 주석 (Git.. 2025. 3. 13. [Git] Semantic Release를 활용한 자동 버전 관리 및 릴리스 자동화 가이드 1. Semantic Release 개요Semantic Release는 커밋 메시지에 포함된 정보를 분석해 Semantic Versioning 규칙에 따라 자동으로 버전을 결정하고, 릴리스 노트를 생성하며, 태깅 및 배포까지 수행하는 도구다. 이 도구는 개발자가 수동으로 버전 번호를 관리하거나 릴리스 노트를 작성하는 번거로움을 줄여주며, CI/CD 환경에서 배포 프로세스를 효율적으로 관리한다.2. 작동 원리커밋 메시지 분석:개발자가 작성한 커밋 메시지가 Conventional Commit 형식을 따르는지 확인한다.버전 결정:커밋 메시지의 키워드에 따라 다음 버전 업데이트 유형을 결정한다.feat: 새로운 기능 추가를 의미하며, 마이너 버전 업데이트가 일어난다.fix: 버그 수정을 의미하며, 패치 버전 업.. 2025. 3. 7. [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. VS Code Tasks와 PowerShell로 백엔드 서비스 Git 업데이트 자동화하기 백엔드 서비스가 여러 개 있어 매번 해당 디렉터리로 이동해 git pull을 실행하는 것이 번거로웠던 경험이 있으실 것입니다. 이번 포스팅에서는 VS Code의 Tasks와 PowerShell 스크립트를 활용하여, 한 번의 커맨드 실행으로 여러 서비스의 Git 업데이트를 자동화하는 방법을 소개합니다.사용 환경 및 목적환경: VS Code, Windows PowerShell목적: 여러 Git 리포지토리를 하나의 명령어로 업데이트구성: VS Code의 tasks.json과 PowerShell 스크립트1. VS Code Tasks 설정 (tasks.json)아래 예시는 프로젝트 루트 또는 .vscode 폴더에 위치시킵니다.여기서는 환경 변수 BASE_DIR를 이용해 현재 워크스페이스 경로를 전달합니다.{ ".. 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. [VSCode] ctrl+enter 단축키 변경 기존 : 다음줄로 이동업데이트 후 : GitHub Copilot Suggestions 열림 -> 다시 기존으로 바꾸는 방법!!! 단축키 설정에서 직접 변경Ctrl + K Ctrl + S를 눌러 키 바인딩 설정을 엽니다.ctrl+enter를 검색합니다.GitHub Copilot: Accept Inline Suggestion 항목이 있다면 우클릭 → 키 바인딩 제거를 선택합니다.여기까지 하면 기존처럼 다음줄로 이동이 작동될 것! 여전히 안된다면 4번을 해보자!!(Insert Line After 항목을 찾아 Ctrl + Enter를 다시 할당합니다.)이제 다시 Ctrl + Enter를 입력하면 자동완성 대신 원래대로 다음 줄로 이동할 갓! 😊 2025. 2. 5. 이전 1 2 3 4 5 ··· 20 다음 728x90
