본문 바로가기

전체 글

 (171)
[매일메일] 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이미지, 차트 등에 대한 설명(+ 비시맨틱 태그: 콘텐츠의 의미보다는 스타일링이나 ..
React 알잘딱깔쎈 (개발자 강화/CS 개념) 2025. 1. 13. 20:46 면접 공부용이라서줄글 줄줄줄입니다.... 뭐부터 봐야 할까  리액트란 무엇인가요?"React is the best"https://www.youtube.com/watch?v=pVQPfTleC_4 농담입니다React란 무엇인가개요Facebook에서 개발한 JavaScript 라이브러리로 사용자 인터페이스를 효율적으로 구축하기 위해 사용React의 핵심은 컴포넌트 기반 아키텍처를 사용해 UI를 재사용 가능한 작은 컴포넌트 단위로 나누는 것컴포넌트화로 코드의 유지보수성과 재사용성을 높일 수 있다가상DOM실제 DOM을 조작하기 전 변경 사항을 메모리 내에서 계산하고 필요한 부분만 실제 DOM에 업데이트한다브라우저 렌더링 비용을 줄일 수 있다단방향 데이터 바인딩상태관리와 데이터 흐름을 단순화 하기 위해 단방향 데이..

티스토리툴바