차근차근 배움터

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를 이..

npm install sass 만 하면 설치되는 줄 알았으나 아래와 같이 두 가지를 설치해야 한다. $ npm install node-sass $ npm install sass-loader node-sass는 "Sass 코드를 CSS 코드로 컴파일(변환)"해주는 역할을 한다 loader webpack loader로서 build 중 SASS 파일을 만나면 node-sass를 내부적으로 실행해준다 (babel-loader와 유사하다)

비슷한 파일을 여러 개 입력해야 할 때, 하드코드 대신에 사용할 수 있는 for문을 scss에서 사용해보자 @for 를 이용해서 변수 $i를 선언하고 무슨 숫자부터 무슨 숫자까지 적용할 것인지 입력한다 생각보다 간단하지만 데이터가 1부터 100까지 있을 때 매우 유용할 부분이다! @for $i from 1 through 3 { .slides:nth-child(#{$i}) { background-image: url("../assets/poland_w#{$i}.jpg"); } }

Parcel-bundler란? Parcel은 웹 애플리케이션을 번들링하기 위한 무료 오픈 소스 JavaScript 번들러입니다. 번들링은 여러 개의 파일을 하나의 파일로 묶는 것을 의미합니다. Parcel은 브라우저 환경에서 자바스크립트, CSS, HTML 등을 포함한 파일들을 번들링하고, 빠르고 간단하며 기능이 풍부한 방식으로 작동합니다. 이러한 이유로 많은 개발자들이 Parcel을 선호하며, 리액트와 같은 프레임워크에서도 기본적으로 사용되는 번들러 중 하나입니다. parcel-bundler 프로젝트 생성 npm 프로젝트 시작 npm init -y → package.json 파일이 생성된다 parcel bundler 설치 npm install -dev parcel-bundler ‘-dev’ 뜻은 개발 ..