hr0513 님의 블로그

안녕하세요, hr0513 입니다! 🥰SQLite는 로컬 환경에서 유용하지만, 배포까지 고려한다면 Heroku Postgresa와 같은 데이터베이스를 사용하는 것이 좋습니다.아래는 SQLite를 설정하고 사용하는 방법입니다.1. SQLite 다운로드 페이지SQLite 다운로드 페이지에 접속합니다.https://www.sqlite.org/download.html  SQLite Download PageTemplates (1) and (2) are used for source-code products. Template (1) is used for generic source-code products and templates (2) is used for source-code products that are gen..

안녕하세요, 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; ..