본문 바로가기
반응형

개발/React175

리액트 - 크롬 확장 프로그램에서 현재 페이지의 URL과 HTML 가져오기 (Retrieve URL and HTML of the Current Page in a Chrome Extension) 리액트 전체 링크 참고- 크롬 확장 프로그램 사이드 패널 만들기 (React Chrome Extension Side Panel Example) 이전 글에 이어 버튼을 클릭할 경우, 다음과 같이 현재 페이지의 URL과 HTML을 출력해 보자.manifest.json 수정 크롬 확장 프로그램이 특정 페이지에서 동작하도록 권한을 추가한다. 아래 옵션은 모든 URL에 접근이 가능하다는 뜻이 된다."host_permissions": [""] 그리고 permissions에서 activeTab을 추가한다. "permissions": ["storage", "scripting", "tabs", "sidePanel", "notifications", "activeTab"],eslintrc 파일 추가 chrome API를 .. 2025. 1. 10.
리액트 - 크롬 확장 프로그램 사이드 패널 만들기 (React Chrome Extension Side Panel Example) 리액트 전체 링크 참고- 크롬 확장 프로그램에서 현재 페이지의 URL과 HTML 가져오기 다음과 같이 리액트 Application을 크롬 확장 프로그램의 사이드 패널로 만들어보자.파일 추가 public 폴더에 manifest.json, background.js를 추가한다. public/manifest.json{ "manifest_version": 3, "name": "React Side Panel Extension", "version": "1.0", "description": "React app in Chrome Side Panel", "permissions": ["storage", "scripting", "tabs", "sidePanel", "notifications"], "action": .. 2025. 1. 6.
리액트 - Vercel로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- gh-pages로 리액트 프로젝트 배포하기- Netlify로 리액트 프로젝트 배포하기- Netlify 배포 에러 해결하기 이번에는 Vercel로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. Vercel 페이지로 이동해 Start Deploying 버튼을 클릭한다. GitHub 프로젝트를 배포할 예정이므로 Continue with GitHub 버튼을 클릭한다. Vercel과 깃허브가 연동되도록 Authorize Vercel 버튼을 클릭하자. 이제 Install 버튼을 누르자. 배포가 필요한 저장소를 연결한다. 깃허브의 저장소가 연결되면 리액트 프로젝트를 Import 하자. Project 이름을 설정한다. ([Project Name]-[random string].vercel.ap.. 2024. 5. 2.
리액트 - Netlify 배포 에러 해결하기 (Netlify Build and Deploy Error) 리액트 전체 링크 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지에 배포했던 프로젝트를 Netlify에 배포하면서 발생했던 에러를 정리하였다. 다음과 같은 경우가 발생하였다. - npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)- CI 설정 (CI= npm run build)- package.json : homepage 설정 npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)  페이지를 배포했을 때 아래 에러가 나온다면 npm install이 잘 설치가 되지 않는 경우다. (Initializaing Failed)Failed during.. 2024. 4. 25.
리액트 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 리액트 전체 링크 참고- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기- 리액트 라우터 react router (최신 node ver) - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 Netlify도 깃허브 페이지와 마찬가지로 라우터 설정을 해야 한다.그렇지 않으면 라우터 페이지에서 새로고침을 할 경우, Page Not Found를 만나게 된다.라우터 설정 먼저 react-router-dom을 설치해서 라우터를 구현해 보자. npm install react-router-dom 링크를 참고하여 라우터를 설정하자. 코드가 완성되면 원격으로 push 한다. Netlify는 깃허브 페이지와는 다르게 pus.. 2024. 4. 25.
리액트 - Netlify로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- 리액트 프로젝트 추가하기- gh-pages로 리액트 프로젝트 배포하기- .env 환경 변수 파일 관리하기- Vercel로 리액트 프로젝트 배포하기 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지처럼 Netlify로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. 먼저 깃허브에 리액트 프로젝트를 추가한다. (npm create react-app react-netlify) Netlify에서 로그인 / 회원가입을 진행한다. (깃허브로 가입) 깃허브 가입 후, repositoroy 접근 권한을 주면 Netlify에서 깃허브 저장소에 접근할 수 있다.overview 화면에서 Add.. 2024. 4. 25.
리액트 - 페이지 가시성 확인하기 (useEffect with Visibility Change Event) 리액트 전체 링크 참고- 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 페이지가 가려졌거나, 보이지 않는 경우에 이벤트를 감지해 보자.구현 페이지 가시성은 document의 visibilityState로 확인할 수 있다.const [visibility, setVisibility] = useState(document.visibilityState); 그리고 visibilitychange 이벤트로 가시성 상태 변경을 감지한다.useEffect에 이벤트를 등록해서 이벤트를 처리하면 된다. (clean-up 함수에서는 이벤트를 제거한다.) useEffect(() => { const handleVisibilityChange = () => { setVisibilit.. 2024. 4. 24.
리액트 - 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 (useEffect with Mouse Move Event) 리액트 전체 링크 참고- 페이지 가시성 확인하기 다음과 같이 마우스가 5초 이상 움직이지 않는 경우, 새로고침을 하도록 해보자.또한 페이지 내에서 마우스가 움직이는 것이 아니라면 여전히 타이머는 증가한다.구현 타이머를 표시할 변수를 useState로 선언한다. const [seconds, setSeconds] = useState(0); 최초 렌더링시 useEffect에서 mousemove 이벤트를 등록한다.5초 이상 시간이 지나는 경우 window.location.reload()로 새로고침을 실행하였다. useEffect(() => { let timer; const handleMouseMove = () => { setSeconds(0); .. 2024. 4. 24.
리액트 Custom Hook - 모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage) 리액트 전체 링크 참고- 로컬 스토리지 사용 방법과 세션 스토리지 비교- 게으른 초기화로 useState 초기화하기 다음과 같이 로컬 스토리지 변경을 감지하는 커스텀 훅을 만들어보자.여기서는 모든 페이지에 대해 이벤트를 감지한다. 예시 코드는 다음과 같다.로컬 스토리지가 변경되면 useEffect에서 storage 변경 이벤트 리스너를 등록하면 된다.import React, { useState, useEffect } from "react";const KEY0 = "MY_DATA_0";const LocalStorageHook = () => { const [localStorageData, setLocalStorageData] = useState( localStorage.. 2024. 4. 15.
반응형

티스토리툴바