도옹건 공부 일기

커스텀 훅이란? 커스텀 훅은 React에서 제공하는 기본 훅들을 기반으로 사용자 정의된 훅을 만들어내는 것을 의미합니다. 이를 통해 코드의 재사용성을 증가시키고, 관련된 로직을 효율적으로 관리할 수 있습니다. 커스텀 훅 사용하는 이유 로직의 중복 제거: 비슷한 로직을 여러 컴포넌트에서 사용해야 할 때, 커스텀 훅을 통해 중복된 코드를 효과적으로 제거할 수 있습니다. 가독성 향상: 특정 기능이나 상태를 훅으로 추상화하면, 컴포넌트 코드가 간결해지고 가독성이 향상됩니다. 재사용성 증가: 커스텀 훅을 사용하면 동일한 로직을 필요로 하는 여러 컴포넌트에서 쉽게 재사용할 수 있습니다. 사용 예시 (useInput 커스텀 훅) 커스텀 훅을 사용하지 않았을 때 import React, { useState } from..

드래그 앤 드롭 드래그 앤 드롭으로 특정 영역에 요소를 드롭하면 요소가 삭제되는 기능입니다. 드래그 기능 함수 // 드래그 이벤트 const handleDragStart = (e, id) => { e.dataTransfer.setData('id', id); // 드래그된 데이터 설정 console.log(id); }; handleDragStart 함수로 드래그된 데이터(매개변수로 받은 id)를 저장합니다. 드롭 기능 함수 const handleDragOver = e => { e.preventDefault(); }; 드래그 오버 이벤트 핸들러입니다. 기본 동작을 방지하고 드롭을 허용합니다. // 롭랍 이벤트 const handleDrop = e => { e.preventDefault(); const dro..

사용 이유 긴 상대 경로를 사용하는 대신 간단한 별칭을 사용하면 코드가 더 간결해지고 가독성이 향상됩니다. ex) // before import SeleniumIcon from "../../../public/svgs/selenium-color.svg"; // after import SeleniumIcon from "@/svgs/selenium-color.svg"; 와 같이 별칭을 사용하면 경로가 더 짧아지고 이해하기 쉬워집니다. 설정 방법 tsconfig.json 또는 jsconfig.json 파일에서 아래와 같이 설정해줍니다. "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@/styles/*": ["src/app/_styles/*..

발생 원인 이 경고는 Next.js 앱에서 서버 측 렌더링과 클라이언트 측 렌더링 간에 일치하지 않는 prop이 발생한 경우에 나타날 수 있습니다. 해결 방법 const [mounted, setMounted] = useState(false); // ssr에서 말고 클라이언트 측에서 렌더링 되고 난 후 코드 실행되도록 작성 useEffect(() => { setMounted(true); }, []); if (!mounted) return null; ... 이 코드를 사용하여 초기 서버 측 렌더링 시에는 렌더링을 하지 않고, 클라이언트에서만 렌더링을 수행하도록 보장할 수 있습니다. useEffect 훅을 사용하여 컴포넌트가 마운트된 후에 setMounted(true)를 호출하므로, 클라이언트에서만 실행되고 ..

SVG 사용방법 Next.js에서 svg를 사용할 수 있는 방법 중 가장 쉬운 방법은 svgr 라이브러리를 사용하는 것입니다. npm install -D @svgr/webpack 그 후 next.config.js에 아래와 같이 추가합니다. next.config.js module.exports = { webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; 그러면 이제 import를 통해 컴포넌트처럼 사용하실 수 있습니다. import HtmlSvg from "../../public/icons/html5-color.svg"; SVG 크기 및 색 수정 svg 크..

next.js 프로젝트를 생성 후 npm run dev를 실행하였을 때 class NextRequest extends Request { ^ ReferenceError: Request is not defined 위와 같은 에러가 나왔습니다. 구글링 해보니 현재 내 node.js 버전이 18버전보다 낮아서 나타나는 현상이였습니다(v16.17.0 사용중이였음) node.js 새로운 버전을 설치하기 위해 next.js 프로젝트 폴더에서 다음과 같이 node.js를 설치하였습니다. npm i node@lts 그러고 나서 npm run dev로 프로젝트를 실행하면 정상적으로 실행이 됩니다.

React.js를 통해 메타마스크 sepolia 테스트넷 트랜잭션 보내는 방법에 대해 글을 작성해보겠습니다. 준비물 - Web3.js 라이브러리 - 메타마스크 계정 - infura infrua란? Infura는 Ethereum 네트워크에 대한 원격 액세스를 제공하는 서비스 제공 업체 중 하나로, Ethereum 블록체인에 연결하고 Ethereum 기반 dApp 및 스마트 계약을 실행하는 개발자 및 프로젝트에 유용합니다. 이 서비스를 사용하면 Ethereum 노드를 직접 설정하거나 운영하지 않고도 Ethereum 네트워크와 상호 작용할 수 있습니다. infura 사용 이유 Local 환경에서 개발할 때는 보통 truffle에서 제공하는 ganache를 이용 Local에서 개발이 완료되면 테스트넷에서 실행 ..