전체 글15 컴포넌트 분리 기준 1️⃣ UI 단위 기준으로 분리화면에서 독립적인 UI 블록이면 컴포넌트로 분리하는 방식 예를 들어 쇼핑 페이지라면ProductPage ├ ProductImage ├ ProductInfo ├ ReviewList └ RelatedProducts 이유각 영역이 독립적으로 재사용 가능코드 가독성 좋아짐function ProductPage() { return ( )} 화면에서 박스 하나 단위면 보통 컴포넌트 2️⃣ 재사용 가능 여부 여러 곳에서 쓰이면 분리 예ButtonModalCardInput 예 코드확인취소 이런 컴포넌트는 보통 2번 이상 쓰이면 분리components ├ Button ├ Modal └ Input 3️⃣ 로직 분리UI는 같지만 데이터 처리.. 2026. 3. 13. 웹접근성 정리 1 1. aria-hidden="true" 사용 시기단순 장식 요소: 의미 없는 아이콘, 배경 이미지, 단순 구분선 등 사용자에게 정보를 전달하지 않는 요소에 사용합니다. 중복 정보: 이미지 바로 옆에 동일한 내용의 텍스트가 이미 있어, 스크린 리더가 같은 내용을 두 번 읽을 필요가 없을 때 사용합니다. 시각적으로는 보이지만 숨겨야 할 때: 모달창(레이어 팝업)이 떴을 때, 배경이 된 본문 영역을 일시적으로 읽지 못하게 막는 용도로 사용합니다. * 주의사항 (중요!)초점(Focus) 방지: aria-hidden="true"를 설정하더라도 해당 요소가 버튼(button)이나 링크(a)라면 키보드 Tab 키로 초점은 여전히 잡힐 수 있습니다. 이 경우 스크린 리더는 아무것도 읽지 않는데 초점만 가기 때문에 .. 2026. 1. 22. 한국형 웹 콘텐츠 접근성 지침(KWCAG) 정리 1. 인식의 용이성 (Perceivability)모든 사용자가 콘텐츠를 인지할 수 있어야 합니다. ① 대체 텍스트 제공이미지를 볼 수 없는 사용자를 위해 이미지의 의미를 설명하는 텍스트(alt 속성)를 넣어야 합니다.alt 속성을 아예 쓰지 않으면 스크린 리더는 파일명(예: IMG_1234.jpg)을 그대로 읽어주거나 "이미지"라고만 안내하여 사용자에게 혼란을 줍니다. 단순한 배경 장식, 구분선, 아이콘 옆에 동일한 내용의 텍스트가 이미 있는 경우에는 alt="" 만 써줍니다. ② 명도 대비텍스트와 배경의 색상 차이가 뚜렷해야 저시력자나 고령자가 읽기 쉽습니다. (최소 4.5:1 권장)(디자이너 영역) 2. 운용의 용이성 (Operability)① 키보드 사용 보장마우스 없이 키보드(Tab 키, Ente.. 2026. 1. 21. 웹접근성이란 웹접근성 인증은 장애인 및 고령자도 비장애인과 동등하게 웹사이트를 이용할 수 있도록 웹 접근성 표준 지침을 준수했는지 심사하고 우수한 사이트에 인증 마크를 부여하는 제도이며, 이는 법적 의무 사항으로 과학기술정보통신부 지정 기관에서 심사합니다. 인증 절차는 자가진단, 서류 제출, 기술 심사 등으로 이루어지며, 웹와치, 한국정보접근성인증평가원 등이 대표적인 인증 기관입니다. 1. 웹접근성 인증 개요 - 목적: 모든 사용자가 웹사이트 정보에 동등하게 접근하고 이용하도록 보장. - 법적 근거: 「지능정보화 기본법」 및 「장애인차별금지법」에 의거. - 인증 대상: 국가기관, 공공기관 등 모든 웹사이트. - 인증 마크: 표준 준수 사이트에 부여하는 품질 마크. 2. 주요 인증 기관 - 웹와치 (WebW.. 2026. 1. 21. Vue3 : Composition API(생명주기 훅) Opitons API => Composition APIbeforeCreate, created => 필요없음beforeMount, mounted => onBeforeMount, onMountedbeforeUpdate, updated => onBeforeUpdate, onUpdatedbeforeUnmount, unmounted => onBeforeUnmount, onUnmounted 2025. 8. 19. Vue3 : Composition API(context, provide, inject) contextcontext란 setup(props, context) 함수의 두 번째 인자로 전달되는 객체로 컴포넌트 내부에서 this 없이 접근해야 하는 추가적인 속성들과 메서드를 제공한다. 1. attrs: 부모 컴포넌트로부터 전달받았지만 props로 정의되지 않은 모든 attribute(HTML 속성)를 담는 객체다. 즉, v-bind="$attrs"와 같이 템플릿에 바인딩할 때 사용한다. 기존 Options API의 this.$attrs에 해당한다. 2. emit: 자식 컴포넌트에서 부모로 이벤트를 발생시킬 때 사용하는 함수다. 기존 this.$emit과 동일한 역할을 하며, context.emit('event이름', payload) 형태로 사용한다. 3. slot: 자식 컴포넌트에 전달된 slo.. 2025. 8. 4. 이전 1 2 3 다음