React + webpack5 + TypeScript는 React 개발을 위한 강력한 조합입니다. webpack5는 React 애플리케이션을 빌드하고 배포하는 데 필요한 모든 도구를 제공하며, TypeScript를 사용하여 React 애플리케이션의 코드를 더 안전하고 유지 관리하기 쉽게 만들 수 있습니다. 이 글에서는 React + webpack5 + TypeScript를 빠르고 쉽게 세팅하는 방법을 소개합니다. CRA(Create React App)를 사용하지 않고, 직접 세팅을 진행하므로, React 개발에 대한 기본적인 이해가 있는 경우 누구나 따라 할 수 있습니다.여러 블로그 글에서 세팅 방법을 찾아볼 수 있지만, 버전 차이 등 다양한 이유로 잘 안될 때가 있어서, 내가 직접 작성해 보려고 합니다..

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

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

🤔 Addon-controls 란?공식문서를 해석해보면, 따로 코드화 작성 없이 동적으로 상호 작용할 수 있는 그래픽 UI를 제공한다고 정의되어 있습니다.현재 최신 storybook을 설치하면 예제에는 있지만 사용하려면 다운을 받아야 합니다.해당 글은 react + typescript 기준으로 작성됩니다.🔨 설치하기npm i -D @storybook/addon-controls설치가 끝나면 .storybook/main.js에 addon을 추가해줍니다.//main.jsmodule.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/ad..

💉 react에 storybook 적용하기react + typescript + storybook 프로젝트를 만들어보려고 합니다.React 설치먼저, 타입 스크립트가 적용된 리액트 프로젝트를 생성해보겠습니다.npx create-react-app 프로젝트명 --typescript생성된 프로젝트의 src 폴더 에서 안 쓰는 파일들을 지워줍니다.(필수로 지워야 하는 것은 아닙니다.)// 삭제 후 목록src├── App.tsx├── index.tsx├── react-app-env.d.ts├── reportWebVitals.ts└── setupTests.tsstorybook 적용콘솔 창에 아래 명령어를 쳐줍니다.npx -p @storybook/cli sb init --type react_scripts위 명령어를 ..

🤔 SCSS의 핵심...이라고 생각하는 것3 중첩은 개인적인 기준입니다.저는 SCSS의 핵심은 중첩이라고 생각합니다. 보통 3 중첩 기준으로, MAX 4중첩으로 작성합니다.3중첩을3 중첩을 기준으로 하는 이유는 3 중첩을 지키지 않고 작성하다 보면 코드 길이가 엄청 늘어나고, 컴파일된 CSS에도 엄청나게 많이 중첩된 클래스를 볼 수 있습니다.4 중첩 이상 필요할 경우 아래와 같이 작성합니다.#wrap { .A .B { color: red; }}📄 SCSS 문법이번 글에서는 SCSS를 작성할 때, 기본적으로 많이 사용되는 문법을 위주로 써보겠습니다.UTF-8 설정코드 내에서 한글을 사용하려면 설정해야 합니다.@charset "UTF-8";상위 선택자&을 사용하면 부모 선택자를 참조(치환)할 수..