개발자 강화/프론트엔드 (42) 썸네일형 리스트형 [매일메일] React에서 index를 key값으로 사용하면 안되는 이유(FE.250109) (개발자 강화/프론트엔드) 2025. 1. 14. 21:20 React의 key란 무엇인가?리스트를 랜더링 할 때 엘리먼트를 구분하는 고유 식별자 역할어떤 항목이 변경(추가, 삭제, 정렬 변경)되었는지 효율적으로 파악하고, 필요한 부분만 다시 렌더링함React의 index란?배열을 순회하며 리스트를 랜더링할 때(.map), 현재 요소가 몇 번째인지 나타내는 정수 값const fruits = ['Apple', 'Banana', 'Orange'];const fruitList = fruits.map((fruit, index) => { return ( {fruit} (index: {index}) );});간단하게 구현하는 경우에는 이처럼 key에 index값을 쓰곤 하는데, 사실 이러면 문제가 생길 수 있다. React의 리스트에서 index를.. [매일메일] 웹 접근성과 개선 방법 (FE.250114) (개발자 강화/프론트엔드) 2025. 1. 14. 20:13 웹 접근성이란?- 모든 사용자가 제약없이 웹 페이지에 동등하게 이용할 수 있도록 보장한다- 장애인, 고령자, 네트워크 환경이 약한 지역의 거주자 등에 무관하게 동등한 접근 보장 웹 접근성 개선 방법?1. 시맨틱 태그: HTML에서 콘텐츠의 의미와 구조를 명확히 나타내기 위해 사용 - 웹 페이지 구조와 의미를 명확하게 전달해 스크린 리더가 콘텐츠를 쉽게 이해시맨틱 태그설명시맨틱 태그 설명header문서나 섹션의 머리글nav네비게이션 링크 모음main문서 주요 콘텐츠 영역article독립적이고 완전한 콘텐츠section주제 기반으로 문서 구분asdie별도로 부가적인 정보 제공footer문서나 섹션의 바닥글figcaption이미지, 차트 등에 대한 설명(+ 비시맨틱 태그: 콘텐츠의 의미보다는 스타일링이나 .. 이전 1 2 3 4 5 다음