웹 개발 (97) 썸네일형 리스트형 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.. SpringBoot) 파일 다운로드 API 만들기 Controller @GetMapping(value = "") public ResponseEntity fileDownloadApi() throws IOException{ return exampleService.fileDownload(); } Service ... import org.springframework.core.io.InputStreamResource; import org.springframework.core.io.Resource; import org.springframework.http.CacheControl; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; import org.sprin.. TypeScript) 타입스크립트 기초 이 글을 아래 링크를 참고하여 공부하며 정리한 자료입니다. https://www.samsungsds.com/kr/insights/TypeScript.html 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) www.samsungsds.com 타입스크립트란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 타입스크립트의 특징 타입스크립트 : 정적 타입 컴파일 언어 -> 컴파일러 또는 바벨로 자바스크립트 코드로 변환되어 코드 작성 단계에서 오류 확인 가능하여 버그를 사전에 제거할 수 있고, 실행 속도가 매우 빠르다 (자바스크립트 : 동적 타입 인터프리터 언어 -> 런타임에 오류 발견 가능) 자바스.. 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.. CSS) active인 tab 또는 button 아이템 마우스 이벤트 제거 여러개의 nav item들 중 active 상태가 된 아이템은 hover 등의 마우스 이벤트가 안 먹어야 될 때 사용하는 방법! .class-name.active{ pointer-events: none; } 이전 1 2 3 4 5 6 7 ··· 13 다음
