차근차근 배움터

Scroll Restoration 이라고 부르는 React에서 스크롤 위로 올라가게 하는 법 https://v5.reactrouter.com/web/guides/scroll-restoration Home v6.14.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com import { useEffect } from "react"; import { useLo..

노트북을 포맷해서 깨끗해졌다 덕분에 다시 새로 필요한 파일들을 (귀찮지만) 설치하는 중이다. 1. Visual Studio (IDE) 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. N..

JS말고 React에서 간단하게 구현 가능하다 ChatGPT한테 물어보니까 간단하게 구현 완료 import React from 'react'; function CopyTextComponent() { const handleCopyClick = (textToCopy) => { navigator.clipboard.writeText(textToCopy) .then(() => { alert('텍스트가 복사되었습니다.'); }) .catch((error) => { console.error('복사 실패:', error); }); }; return ( handleCopyClick('복사할 텍스트')}> 클릭하여 텍스트 복사 ); } export default CopyTextComponent;

리액트에서 이미지 파일을 일반 HTML에서 하듯이 넣으려고 하면 당연히 출력이 되지 않을 것이다 리액트에서는 다른 방법으로 이미지를 삽입해야 하는데 첫 번째 방법은 다음과 같다. 1. 컴포넌트 이용하기 아래와 같이 이미지를 import 해서 src 경로에 따옴표를 이용하는 대신 { } 괄호 안에 import 해온 이름을 작성해 준다. import lesson1 from '../../images/lesson1.jpg'; const FeaturedCard = (props) => { return } export default FeaturedCard; 아주 간단한 방법이지만 절대 경로를 이용해야 하는 상황이 발생할 수 있다. 그럴 때는 또 그냥 html 처럼 사용하면 안되고 비슷하지만 우리는 require를 이..