본문 바로가기

반응형

전체 글

(27)
[Error] EPERM: operation not permitted, scandir 해결 방법 문제 발생 오랫만에 vscode로 확인할게 있어서 평소처럼 `yarn dev` 명령어를 통해 작업 중이던 프로젝트를 실행했다. 그런데 다음과 같은 에러가 발생하고 동작하지 않았다. `[Error] EPERM: operation not permitted, scandir ... ` 원인 Mac으로 금융 업무를 보려는 시도로 인하여 시스템 설정을 잘못 건드렸었다. 해결 방법 1. 시스템 설정 > 개인정보 보호 및 보안 > 전체 디스크 접근 권한 2. Visual Studio Code 접근 허용 vscode를 찾아서 스위치를 on으로 켜주고 프로그램 재실행을 한다. 결론 시스템에서 막은 파일 스캔 에러라는 문구를 보고 바로 이런 간단한 문제였단걸 알 수 있지 않았을까... 조금씩 성장 중
[React] 웹 페이지 복귀, 이탈 탐지 (가시성) 웹 페이지 복귀와 이탈 이벤트 설정 방법 배경 React 프로젝트를 하던 중 웹 페이지 이탈과 복귀 시점에 특정 작업을 수행해야하는 상황이 있었다. 해결 방법 웹 페이지 이탈, 복귀에 대한 이벤트는 `window`객체에 내장된 `visibilityState`를 활용하여 구현할 수 있다. React 프로젝트에서는 `useEffect` Hook을 사용해서 컴포넌트 생명 주기에 따른 이벤트 처리가 필요하다. 자세한 방법은 다음과 같다. useEffect(() => { function handleVisibilityChange() { // 페이지 복귀 if (document.visibilityState === 'visible') { console.log('복귀'); } // 페이지 이탈 if (document.v..
React 앱을 Vite + gh-pages로 빌드 및 배포하기 요즘 속도가 빠르고 가벼운 느낌이 드는 Vite를 프로젝트에 자주 활용한다. 그러던 중 간단한 프로젝트를 gh-pages를 이용하여 배포하려고 했는데 여러 난관이 있었다. 이번 일을 계기로 Vite로 생성한 react.js 프로젝트를 gh-pages 위에 배포하는 방법을 정리하였다. 배포 환경 yarn, react, vite, gh-pages 배포 방법 1. gh-pages 라이브러리 설치 yarn add gh-pages 2. 파일 설정 vite.config.js base 추가 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ base: '/repo-name',..