나의 기록생활

문제: user-scalable="no" 속성이 뷰포트 메타 태그에 설정되어 있어 페이지에서 확대/축소가 불가능하게 됩니다. 시각장애가 있는 사용자는 화면 확대를 통해 콘텐츠를 제대로 볼 수 있기 때문에 이 설정은 문제가 될 수 있습니다.해결 방법:user-scalable="no" 속성을 제거하거나, maximum-scale 값을 5 이상으로 설정하여 확대/축소를 가능하게 합니다.예시:html코드 복사meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale

문제: ARIA 속성(예: aria-label, aria-hidden 등)이 해당 요소에 지정된 역할(예: role="button", role="navigation" 등)과 일치하지 않을 때 발생하는 경고입니다. 이 경우 ARIA 속성이 무효화됩니다.해결 방법:ARIA 속성이 적절한 요소에 사용되고 있는지 확인합니다.예시: span 요소에 role="button"을 사용했다면, 필요한 경우 aria-label이나 aria-pressed 속성을 함께 사용해야 합니다. ARIA 속성과 역할이 일치하는지 다시 확인하세요.예시 코드:html코드 복사span class="my_edit" role="button" aria-label="편집">편집span>

문제: 텍스트와 배경의 색상 조합이 최소 대비 비율인 4.5:1(일반 텍스트의 경우) 또는 3:1(큰 텍스트의 경우)을 충족하지 못합니다. 낮은 대비는 시각장애가 있는 사용자들이 콘텐츠를 읽기 어렵게 만듭니다.해결 방법:텍스트와 배경 색상 간의 대비 비율이 최소 4.5:1(일반 텍스트) 또는 3:1(큰 텍스트)을 만족하도록 합니다.WebAIM Contrast Checker와 같은 도구를 사용하여 대비 비율을 확인할 수 있습니다.예시 코드:css코드 복사.my-text { color: #333; /* 어두운 색 */ background-color: #fff; /* 밝은 색 */ }

SwiftUI에서 where 구문이란?SwiftUI는 선언형 UI 프레임워크로, iOS 앱 개발을 효율적으로 할 수 있도록 도와준다. SwiftUI에서 조건부 렌더링 및 반복문 처리에 유용한 기능 중 하나는 바로 where 구문이다. 이 글에서는 where 구문의 기본 개념과 SwiftUI에서 어떻게 활용되는지에 대해 살펴본다.1. where 구문 기본 개념Swift에서 where는 주로 조건을 추가하여 특정 로직을 필터링하거나 반복문에서 특정 조건을 만족하는 경우에만 동작하도록 제한하는 데 사용된다. 예를 들어, 배열의 특정 값만을 처리하거나, 조건에 맞는 요소를 선택적으로 출력할 때 유용하다.2. where 구문 사용법1) for-in 루프에서의 where가장 기본적인 사용 사례는 for-in 루프 ..

실무에서 이전 코드 중 react-router-dom의 useLocation을 이용하여 location.state에 데이터를 담아 이동할 페이지에 데이터를 보내는 방식이 있다는 것을 알았다. 이 방법을 보며 든 생각은 이렇다.장점:1. 데이터를 URL등에 보이지 않게 전달할 수 있다.2. 부가적인 라이브러리 사용 없이 가볍게 활용할 수 있다.단점: 1. Query Parameter를 이용하는 것 처럼 데이터가 전달되지 않을 때의 처리가 필요하다(필수 데이터에 대해서는 사용성이 좋지않다) 이 기회에 페이지를 이동할 때 데이터를 전달하는 방법이 어떤것이 있는지 더 정리해보려고 한다.1. useNavigate와 Link를 사용한 location.state 데이터 전달의 장점보안성: URL에 데이터를 노출하지 ..

가끔, 브랜치를 잘못 선택해서 커밋 단위의 작업물들을 다른 브랜치로 이관시키고 싶을 때가 있다. 그럴 때 사용할 수 있는 기능이 cherry-pick이다. Git Cherry-Pick이란?Git cherry-pick은 특정 커밋을 선택하여 현재 브랜치에 적용하는 강력한 명령어이다. 이 명령어는 특정 커밋의 변경 사항을 다른 브랜치에 적용하고자 할 때 유용하다. 예를 들어, 잘못된 브랜치에 커밋된 변경 사항을 올바른 브랜치로 옮기고 싶을 때 사용할 수 있다.Cherry-Pick의 어원"Cherry-pick"이라는 용어는 과일을 따는 행위에서 유래되었다. 체리 나무에서 가장 좋은 체리만 골라 따는 것처럼, Git에서도 원하는 커밋만 선택하여 적용하는 것을 의미한다.Cherry-Pick 사용 시기버그 수정: ..

Ant Design(antd)는 React 생태계에서 가장 널리 사용되는 UI 컴포넌트 라이브러리 중 하나이다. 디자인의 일관성과 개발 효율성을 동시에 추구하는 개발자들에게 큰 사랑을 받고 있다. 이번 글에서는 Ant Design의 특징, 장단점, 설치 방법, 그리고 간단한 사용법을 살펴본다.Ant Design(antd)란 무엇인가?Ant Design(antd)는 알리바바 그룹이 개발한 UI 라이브러리로, 기업용 애플리케이션 개발에 최적화되어 있다. Ant Design은 시각적 일관성과 효율성을 강조하며, 개발자가 보다 빠르고 쉽게 아름다운 UI를 구현할 수 있도록 돕는다.주요 특징풍부한 컴포넌트: 버튼, 테이블, 모달, 폼 등 다양한 UI 컴포넌트를 제공한다.디자인 가이드라인: 일관성 있는 디자인을 유..

데이터 시각화는 웹 개발에서 중요한 요소이다. 데이터를 그래프나 차트로 표현하면 사용자는 정보를 더 쉽게 이해할 수 있다. Chart.js는 이를 가능하게 하는 가벼운 JavaScript 라이브러리로, 다양한 차트 타입을 제공하며 사용법이 간단하다. 이 글에서는 Chart.js의 특징, 장단점, 설치 방법, 그리고 사용 예제를 소개한다.Chart.js란 무엇인가?Chart.js는 HTML5 기반의 캔버스를 활용하여 다양한 차트를 생성할 수 있는 JavaScript 라이브러리이다. Pie, Line, Bar, Radar 등 8가지 이상의 기본 차트를 지원하며, 플러그인을 통해 확장할 수도 있다. 또한, Chart.js는 반응형 디자인을 기본으로 지원하여 다양한 디바이스에서 일관된 사용자 경험을 제공한다.C..

웹 개발에서 폼 관리는 필수적이다. 하지만 복잡한 폼과 밸리데이션 로직을 관리하는 일은 종종 개발자에게 큰 부담이 된다. Formik은 이러한 문제를 해결하기 위해 등장한 라이브러리로, React에서 폼 관리를 쉽고 효율적으로 도와준다.Formik이란?Formik은 React 애플리케이션에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 폼 상태와 밸리데이션, 제출 등을 효율적으로 관리할 수 있는 기능을 제공한다.Formik의 특징1. 간편한 폼 상태 관리Formik은 폼의 상태를 간단하게 관리할 수 있도록 돕는다. 모든 입력 필드의 상태는 자동으로 Formik이 관리해주므로, 개발자는 폼 상태 관리에 신경 쓸 필요가 없다.2. 유연한 밸리데이션 지원Formik은 Yup과 같은 라..

React 생태계에서 많이 사용되는 React DnD 라이브러리를 소개하고, 설치부터 사용법까지 자세히 설명해본다.React DnD란 무엇인가?React DnD는 React 애플리케이션에서 드래그 앤 드롭 기능을 간단하게 구현할 수 있도록 돕는 강력한 라이브러리로, HTML5 Drag and Drop API를 기반으로 하며, 유연한 커스터마이징과 다양한 기능을 제공한다.React DnD의 주요 특징고도로 커스터마이징 가능: 다양한 드래그 앤 드롭 시나리오를 지원하여 원하는 대로 동작을 설정할 수 있다.플러그인 시스템: DragSource와 DropTarget이라는 고차 컴포넌트(HOC)를 활용해 쉽게 드래그 앤 드롭 기능을 추가할 수 있다.Redux와 유사한 패턴: 상태 관리가 Flux 패턴으로 이루어져..