이전글MutationObserver란? DOM 변화 감지 방법 MutationObserver란? DOM 변화 감지 방법DOM은 웹페이지의 구조와 내용을 나타내는 트리 구조입니다. 개발자는 DOM을 통해 웹페이지의 요소를 추가, 삭제, 변경할 수 있습니다. 이러한 DOM의 변화는 이벤트를 통해 감지할 수 있습니다. Mutatoby2009.tistory.com 살펴보기MutationObserver는 DOM 변화를 감지하는 API입니다. 이 API를 사용하여 클릭 이벤트 대상 요소가 동적으로 추가되거나 제거되더라도 click 이벤트를 감지할 수 있습니다.예제코드React.useEffect(() => { // 먼저, event 객체에서 타입을 확인하여 클릭 이벤트인지 확인합니다. 클릭 이벤트가 아니면 함수를 리..

살펴보기React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리에는 폼의 상태를 추적하는 데 사용되는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다.useWatch 함수useWatch 함수는 폼의 입력 값이 변경될 때마다 특정 작업을 수행할 수 있는 함수입니다. 이 함수는 다음과 같은 방식으로 사용됩니다.import React, { useState, useEffect, useWatch } from "react";import { Controller, useForm } from "react-hook-form";const MyForm = () => { const { control, register, handleSubmit } =..

문제 정의CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다. 따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다. CSS 컨벤션CSS는 축약형으로 작성합니다.// Goodpadding: 0 20px;// Badpadding-left: 20px;padding-right: 20px;CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면 코드가 간결해..

살펴보기DOM은 웹페이지의 구조와 내용을 나타내는 트리 구조입니다. 개발자는 DOM을 통해 웹페이지의 요소를 추가, 삭제, 변경할 수 있습니다. 이러한 DOM의 변화는 이벤트를 통해 감지할 수 있습니다.MutationObserver는 DOM의 변화를 주기적으로 감시하는 API입니다. 이를 통해 개발자는 DOM의 변경을 실시간으로 감지하고, 그에 따라 동적으로 페이지를 업데이트할 수 있습니다. 특징1. MutationObserver는 다음과 같은 특징을 가지고 있습니다.DOM의 모든 변경을 감지할 수 있습니다.특정 요소의 변경만 감지할 수 있습니다.변경의 종류를 구분하여 감지할 수 있습니다.2. MutationObserver를 사용하면 다음과 같은 작업을 수행할 수 있습니다.입력 양식의 데이터 변경을 감지..

안녕하세요! 👏지난 글에 이어서 Atoms(재료)를 만들어보겠습니다.목차 📋기본 세팅Atoms 생성 - 1Atoms 생성 - 2Molecules 생성Organisms 생성 안녕하세요. 이제 거의 마지막 단계네요. Organisms는 Atoms, Molecules를 조합해서 만드는 형태입니다. 먼저, 카드 그룹을 만들겠습니다.카드 모음(CardGrid)Organisms/CardGrid 폴더를 만들고 index.tsx, style.ts, index.stories.tsx를 만듭니다.// style.tsimport styled from 'styled-components';interface Props { boxWidth?: string; // box 크기}export const GridItem = sty..

안녕하세요! 👏지난 글에 이어서 Atoms(재료)를 만들어보겠습니다.목차 📋기본 세팅Atoms 생성 - 1Atoms 생성 - 2Molecules 생성 Molecules는 Atoms를 조합해서 만드는 형태입니다. 먼저 Atoms를 사용할 수 있게 components 폴더 아래 index.ts를 만들어주세요.src└───components│ └─ atoms│ └─ molecules│ └─ organisms│ └─ index.ts... // index.tsexport { Btn, LinkBtn } from './atoms/Btn';export { EventDate } from './atoms/EventDate';export { Icon } from './atoms/Icon';export { ..