웹 개발/React (38) 썸네일형 리스트형 React) 새로고침 감지하기 원래는 window.performance.navigation으로 접근했는데 그건 deprecated 됨. 아래 방법도 임시방편같은데 일단 되긴 하지만....... 다른 방법을 찾아봐야할 듯 useEffect(() => { if (window.performance) { if(window.performance.getEntriesByType("navigation")[0].type==="reload"){ // 새로고침 감지한 뒤 해야할 이벤트 } } },[]) References https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angular React) detect scroll direction | 스크롤 방향 감지하기 스크롤 다운할때는 헤더 메뉴가 안보이고, 업할때 보이게 하는 기능을 만들고 싶어서 찾은 방법! const handleOnWheel = (e) => { if (e.nativeEvent.wheelDelta > 0) { // scroll up event console.log('scroll up'); setHide(false); } else { // scroll down event console.log('scroll down'); setHide(true) } } .. References http://blog.jonathanargentiero.com/detect-scroll-direction-on-react/ React) framer-motion 에러 해결 : ./node_modules/framer-motion/dist/es/index.mjs Error: ENOENT: no such file or directory, open '/Users/seungyunkim/Desktop/repositories/lh-web/node_modules/framer-motion/dist/es/index.mjs' framer-motion이라는 애니메이션 라이브러리를 사용하려고 npm 설치하고 임포트했더니 이런 에러가 떴다. ./node_modules/framer-motion/dist/es/index.mjs Error: ENOENT: no such file or directory, open '/Users/seungyunkim/Desktop/repositories/lh-web/node_modules/framer-motion/dist/es/index.mjs' 해결방법 1. 버전은 4.1.17 로 내린다. // 이미 설치한 상태라면 먼저 삭제 npm uninstall framer-motion // 버전 지정해서 재설치 npm install framer-motion@4.1.17 2. 임포트를 이렇게 한다. import {.. React) 에러 해결 - Warning: Can't perform a React state update on an unmounted component.This is a no-op, but it indicates a memory leak in your application.To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. useRef를 사용해서 특정 컴포넌트들의 offsetTop값을 알아야 해서 useEffect 내에서 ref를 건 컴포넌트들의 값을 useState로 값을 저장했다. 그리고 그 useRef를 사용한 컴포넌트가 포함된 경로에서 다른 경로로 이동하니까 아래와 같은 에러가 떴다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 해석해보자면 마운트되지 않은 .. React) npx create-react-app 오류 : You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오랜만에 react 프로젝트를 시작하려고 npx create-react-app 명령어를 쳤더니 아래와 같은 오류가 뜬다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a.. React) React에서 Bootstrap 사용하기 리액프 프로젝트에서 index.html에 일반적으로 cdn 스크립트를 추가하는 것만으로는 bootstrap을 사용할 수 없다. 리액트 프로젝트에서 아래 명령어로 bootstrap 를 설치한다. -save 옵션을 주면 package.json을 자동으로 업데이트해준다. $ npm install bootstrap -save 그 다음 가장 루트가 되는 index.js 파일에 가서 아래 임포트 구문을 추가해준다. import 'bootstrap/dist/css/bootstrap.min.css'; index.js 예시 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/cs.. React) textarea에 있는 값 클립보드에 복사하는 기능 만들기 import React from 'react'; import FileCopyIcon from '@material-ui/icons/FileCopy'; import { Tooltip, IconButton } from '@material-ui/core'; export default function Example({ resultText }) { const handleClickCopy = (resultJson) => { if (!document.queryCommandSupported("copy")) { return alert("복사하기가 지원되지 않는 브라우저입니다."); } const textarea = document.createElement("textarea"); textarea.value = JSON.st.. React) React에서 jQuery $ 사용하기 1. jQuery 모듈 설치 $ npm install jquery --save 2. $ import 하기 import jQuery from "jquery"; window.$ = window.jQuery = jQuery; // or import $ from 'jquery' 이제 jquery를 임포트한 파일에서 $로 jquery 사용할 수 있다. 나의 경우 import $ from 'jquery' 를 추가해서 사용했다. 이전 1 2 3 4 5 다음