반응형 리액트193 리액트 - Netlify 배포 에러 해결하기 (Netlify Build and Deploy Error) 리액트 전체 링크 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지에 배포했던 프로젝트를 Netlify에 배포하면서 발생했던 에러를 정리하였다.(배포 페이지 : https://react-project-bloodstrawberry.netlify.app/) 다음과 같은 경우가 발생하였다. - npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)- CI 설정 (CI= npm run build)- package.json : homepage 설정 npm install 에 옵션이 필요한 경우 (--legacy-peer-deps) 페이지를 배포했을 때 아래 에러가 나온다면 np.. 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 한다. Net.. 2024. 4. 25. 리액트 - Netlify로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- 리액트 프로젝트 추가하기- gh-pages로 리액트 프로젝트 배포하기- .env 환경 변수 파일 관리하기 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지처럼 Netlify로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. 먼저 깃허브에 리액트 프로젝트를 추가한다. (npm create react-app react-netlify) Netlify에서 로그인 / 회원가입을 진행한다. (깃허브로 가입) 깃허브 가입 후, repositoroy 접근 권한을 주면 Netlify에서 깃허브 저장소에 접근할 수 있다.overview 화면에서 Add new .. 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. 리액트 Custom Hook - input 입력 유효값 검사하기 (useInput) 리액트 전체 링크 다음과 같이 이 있다. 리액트에서는 아래와 같이 input state를 관리한다. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }; export default MyInput; (빈 문자열을 포함하여) 숫자만 입력 가능하도록 코드를 수정해 보자. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); const handleChange = (val.. 2024. 4. 15. 리액트 Custom Hook - useRef로 useState 이전 값 저장하기 (usePrevious) 리액트 전체 링크 다음과 같이 바로 직전의 값을 저장하는 커스텀 훅을 만들어보자. useRef는 값이 바뀌어도 렌더링을 발생시키지 않고 현재 상태를 저장할 수 있다.const usePrevious = (value) => { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current;}; 예를 들어, setCount로 count 값이 변경된다면, usePrevious는 count 값이 변경되기 전 값을 가지게 된다. const [count, setCount] = useState(0); const prevCount = usePrevious(count);.. 2024. 4. 15. 리액트, Node JS - 다른 클라이언트가 선택한 셀 표시하기 (Highlighting Cells Selected by Another Client) 리액트 전체 링크 Node JS 전체 링크 참고 - https://reactgrid.com/features - Socket.IO로 로그인 유저 관리하기 - module.css로 CSS 스타일 관리하기 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 react-grid에는 공동 작업에 대한 셀 하이라이팅 기능을 제공한다. 아쉽게도 handsontable에는 해당 기능을 제공하지 않는다. 따라서 기존 기능을 이용해서 비슷하게 구현해 보자. 하이라이트 + 툴팁 만들기 먼저 임의의 셀의 테두리 색을 변경하고, toolt.. 2024. 4. 13. 이전 1 2 3 4 ··· 22 다음 반응형
