hr0513 님의 블로그

안녕하세요, hr0513입니다! 🥰오늘은 React 앱을 GitHub Pages에 배포하고,배포 후 발생할 수 있는 Router 오류를 해결하는 방법에 대해 정리해 보겠습니다.1. React 앱 설치먼저, React 앱을 생성합니다.아래 명령어로 새로운 React 프로젝트를 시작해 보세요.yarn create react-app (프로젝트명) 2. 필요한 라이브러리 설치프로젝트에 필요한 라이브러리를 설치합니다.주로 사용하는 react-router-dom, react-query, styled-components, react-icons, sass 등을 설치합니다.yarn add react-router-dom react-query styled-components react-icons sass 3. 프로젝트 빌..

안녕하세요, hr0513입니다! 🥰 오늘은 html2canvas와 jsPDF 라이브러리를 사용하여HTML 콘텐츠를 PDF 변환하는 방법에 대해 소개해 드릴게요! ✨1. 패키지 설치html2canvas와 jsPDF 패키지를 설치해 주세요.npm install html2canvas jspdf2. HTML 콘텐츠 캡처하기html2canvas를 사용하면 특정 HTML 요소를 캡처해서 이미지로 변환할 수 있어요.이렇게 만들어진 이미지를 jsPDF로 PDF로 변환하고 저장하는 코드예요!"use client";import React from "react";import html2canvas from "html2canvas";import jsPDF from "jspdf";const Page = () => { cons..

안녕하세요, hr0513입니다! 🥰 제가 프론트엔드 포트폴리오를 만드느라 오늘 연속으로 블로그 글을 올리는 중인데요,그중 GSAP를 활용하여  가로/세로 스크롤 애니메이션 구현 방법을 공유하려고 합니다.gsap 설치gsap를 설치해 주세요.npm install gsap애니메이션 적용const horizontal = document.querySelector("#horizontal");const sections = gsap.utils.toArray("#horizontal > section");gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: horizontal, ..

안녕하세요, hr0513입니다! 🥰 Next.js에서 GSAP를 사용할 때 SSR(서버 사이드 렌더링) 때문에 어려움이 좀 있었는데요,구글링으로도 해결방법을 찾지 못해서 직접 해결한 방법을 공유합니다.오류 발생useEffect 밖에 gsap.registerPlugin(ScrollTrigger) 을 넣게 되면 아래와 같은 오류가 발생해요.Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used 문제의 원인Next.js는 초기 페이지를 로드할..

안녕하세요, hr0513입니다! 🥰 React에서 IntersectionObserver를 사용하여 요소가 화면에 보일 때 애니메이션을 실행하는 두 가지 방법을 소개하려고 합니다. IntersectionObserver는 특정 요소가 viewport 내에 들어왔을 때,또는 화면에서 벗어날 때 이를 감지하여 애니메이션 효과 작업을 수행할 때 사용할 수 있어요.1. 애니메이션을 한 번만 실행하는 코드import React, { useEffect, useRef, useState } from 'react';import styles from '../styles/ProjectCard.module.scss';const ProjectCard = ({ title }) => { const [isVisible, setIsV..

안녕하세요, hr0513입니다! 🥰 카테고리 기능을 만들어 보았어요.사용자가 카테고리를 버튼에 마우스를 올렸을 때, 계층적으로 분류된 카테고리 목록을 쉽게 탐색할 수 있도록 도와줍니다. 구현 방식에 대해 의견이나 수정할 부분이 있다면 댓글로 남겨주세요!1. 카테고리 데이터우선 카테고리 데이터를 트리 형태로 구조화했습니다. const categories = [ { name: "의류", subcategories: [ { name: "남성 의류", subcategories: [] }, { name: "여성 의류", subcategories: [] }, ], }, { name: "전자제품", subcategories: [ ..

안녕하세요, hr0513입니다! 😊 오늘은 간단한 탭 기능 구현 방법을 공유하려고 합니다. 구현 방식에 대해 의견이나 수정할 부분이 있다면 댓글로 남겨주세요!1. Tab 컴포넌트 먼저 Tab 컴포넌트를 아래와 같이 작성합니다.tabData라는 props를 받아서 각 탭의 이름과 내용을 구성합니다.const tabData = [ { label: '탭 1', content: 탭 1에 대한 내용 }, { label: '탭 2', content: 탭 2에 대한 내용 }, { label: '탭 3', content: 탭 3에 대한 내용 }, ]; ... 2. useState로 활성 탭 상태 관리하기..

안녕하세요, hr0513입니다! 😊 앞서 블로그에 훅에 대해 정리한 내용을 바탕으로, 해당 훅을 활용한 별점 구현 방법을 공유하려고 합니다.구현 방식에 대해 의견이나 수정할 부분이 있다면 댓글로 남겨주세요!1. 필요한 별점 이미지 제작 별점 구현을 시작하기 전에 필요한 별점 이미지를 먼저 제작합니다.2. StarRating 컴포넌트 먼저 StarRating 컴포넌트를 아래와 같이 작성합니다.count와 isFixed는 props로 전달됩니다. - count: 별점 값- isFixed: 별점이 고정되었는지 여부 (true 일 경우 변경 불가)3. SCSS 스타일 작성 별점 스타일을 scss로 작성합니다..star { &Icon { position: relative; width: 120px; ..

안녕하세요, hr0513입니다! 😊리액트 훅에 대해 정리해보려고 해요목차 ▷ 리액트 훅 살펴보기 - 11. useState2. useEffect3. useContext4. useMemo5. useCallBack ▷ 리액트 훅 살펴보기 - 21. useReducer2. useRef3. useImperativeHandle4. useLayoutEffect5. useDebugValue1. useState 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이에요. import { useSate } from 'react'const [state, setState] = useState(initalState) 여기서 initalState는 초기값을 의미해요. 만약 초기값을 주지 않으면 und..