FontFace란?Web API의 FontFace는 CSS에서 사용할 수 있는 외부 글꼴을 로드하고 관리하는 역할을 합니다. FontFace를 사용하면 다음과 같은 상황에서 유용하게 사용할 수 있습니다. 1. 웹사이트에 특정 글꼴을 사용하고 싶은 경우2. 웹사이트에서 지원하지 않는 글꼴을 사용하고 싶은 경우3. 사용자가 웹사이트에서 특정 글꼴을 선택하는 경우 해당 글꼴을 동적으로 로드하는 경우 예제 코드// MyComponent.jsimport React from 'react';const MyComponent = () => { // fonts 배열은 커스텀 폰트 정보를 담고 있습니다. // ex) 서버에서 불러온 font 정보들 const fonts = [ { family: 'Cust..

원인React에서 한글을 입력할 때 두 번 입력되는 오류가 발생하는 경우가 있습니다. 이 오류는 한글이 자음과 모음으로 이루어져 있기 때문에 발생합니다. 자음과 모음을 입력할 때, IME가 입력 중임을 나타내는 isComposing 상태가 됩니다. 이 상태에서 또 다른 키가 입력되면, IME는 해당 키를 모음으로 인식하여 한 글자로 처리합니다. 해결 방법이 오류를 해결하려면, isComposing 상태를 확인하여 이벤트를 처리하는 방법을 사용할 수 있습니다. isComposing 상태가 true인 경우, 이벤트를 무시하거나, 다른 처리를 수행할 수 있습니다. // isComposing 상태를 확인하여 이벤트를 처리하는 예function MyInput(props) { const [value, setVal..

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를 사용하면 다음과 같은 작업을 수행할 수 있습니다.입력 양식의 데이터 변경을 감지..

🌐 웹 접근성이란?웹사이트에서 제공하는 정보를 모든 사람(장애인, 고령자)이 동등하게 접할 수 있도록 보장해주는 것입니다.웹 접근성은 꼭 필요하지만 대기업 페이지를 제외하고 쇼핑몰, 작은 사이트 등을 볼 경우 웬만하면 웹 접근성을 지키지 않은 사이트들이 많습니다.이 페이지에서는 웹 접근성을 지키는 방법에 대해 주로 설명하겠습니다.웹 접근성 설명에 관한 자세한 내용은 안나옵니다...📌 웹 접근성 지키는 방법제가 생각하기에 주로 사용된다고 생각되는 것들을 소개하겠습니다.input, selectinput, select를 사용할 때, label이랑 한 세트처럼 써야 하지만, 보통은 그냥 input만 쓰는 경우가 있습니다.스크린 리더기로 읽을 경우, 어떤 역할의 input인지 알 수 없습니다.이를 해결하려면,..