공부50 [web]웹 접근성과 HTML의 tabindex 속성 ✨ 웹 접근성 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것 - 출처 ex. 웹 페이지의 확대 기능을 막아놓는 경우 -> 시력이 나쁜 사람들은 웹 사이트에서 제공하는 정보를 얻기 힘들다. ✨ tabindex란? tabindex가 있는 요소는 포커스 될 수 있고, Tab키를 눌렀을 때 포커스의 이동 순서를 지정한다. tabindex를 사용할 때는 주의해야한다. tabindex를 남용하면 접근성 보조기기(ex. 스크린 리더)를 사용하는 사용자의 페이지 탐색과 조작에 방해가 된다. 0보다 큰 tabindex값을 사용하면 안된다. 접근성 보조기의 페이지 탐색과 조작에 방해가 된다. - tabindex 값을 0보다 큰 값을 쓰지말고, 마크업 순서가 논리적으로 잘 구성되어 자연스럽게 tab이동이 되도.. 2023. 1. 3. [react-redux] 리액트에서 리덕스 사용하기 ✨ 리덕스란? 자바스크립트 어플리케이션을 위한 예측 가능한 상태 관리 라이브러리 리덕스가 생겨난 이유 자바스크립트 싱글 페이지 어플리케이션이 갖추어야하는 요건이 복잡해지면서, 어느때보다 많은 상태를 자바스크립트 코드로 관리할 필요성이 생겨났다. 여기서 상태란, 서버 응답, 캐시 데이터, 지역적으로 생성해 쓰지만 아직 서버에 저장되지 않은 데이터 이외에도 활성화된 라우트, 선택된 탭, 로딩 여부, 페이지네이션 컨트롤 등의 다양한 UI 상태를 의미한다. 리덕스는 이런 복잡한 상태들을 더 편리하게 관리하기 위해서 만들어진 라이브러리이다. 리액트에서만 사용할 수 있는 것이 아니라 자바스크립트 어플리케이션에서는 리덕스를 사용할 수 있다. 리덕스의 3가지 원칙 단일 출처 원칙 상태는 읽기 전용 리듀서는 순수 함수로.. 2022. 12. 28. [react] useState 사용 시, 주의할 사항 ✨ state는 바로 변경되지 않는다. setState를 사용했다고 해서, 바로 state의 값이 변경되는 것은 아니다. setState를 사용하면, 새 state값을 받아서 컴포넌트 리렌더링 큐에 등록한다. - 다음 리렌더링 시, useState가 반환하는 첫번째 값은 갱신된 최신 state가 된다. 즉, 다음 리렌더링 시에 useState가 호출되면서 돌려주는 값이 업데이트된 state값이 된다. setState 사용 시, 바로 업데이트 하지않는 이유는 성능 향상 때문이다. 성능 향상을 위해 state를 setState호출 시마다 계속 업데이트하는 것이 아니라, 모아두고 한 번에 업데이트를 진행한다. 이를 Batching이라고 한다. https://12ahn22.tistory.com/entry/Rea.. 2022. 12. 27. [UXUI] 기본 개념과 프론트엔드 개발자가 알아야하는 UIUX ✨ UI, User Interface 사람들이 상호작용하기 위해 사용하는 시스템을 의미한다. 그래픽 요소 외에도 키보드, 마우스, 마이크 등의 물리적인 요소도 사용자 인터페이스라고 할 수 있다. 현대 사회에서는 GUI(Graphic User Interface)가 많이 중요해졌다. - 터치 스크린 등 기술의 발전으로 많은 분야에서 GUI를 사용하게됨 ✨ UX, User Experimence 사용자가 제품, 서비스를 직간접적으로 이용하고 느끼는 모든 총체적인 경험을 말한다. 사용자가 느끼는 모든 것을 포함한다고 보면 된다. 서비스 자체에 대한 경험, 홍보, 접근성, 사후 처리에 대한 경험 등등.. ✨ UX, UI의 관계 UX 내부에 UI가 들어간다고 생각할 수 있다. UI가 좋다고해서 UX가 반드시 좋다는 .. 2022. 12. 19. [react] 조건부 렌더링에 대한 고민.. 오늘 과제를 진행하면서 조건부로 렌더링을 해야하는 경우, 조건이 너무 많다면 어떻게 렌더링을 해야할까?라는 생각이 들었다. 조건이 적다면 if문을 써서 분기처리를 해주면 되지만 만약 조건이 너무 많은 경우 위 코드에서 if문이 계속 계속 늘어나게 될 것이다. 그렇다면 코드가 너무 길어 보기 싫어질 것이다. 조건이 많다면 어떤 방법을 쓰는 것이 좋을까? ✨ switch-case 방식 switch-case를 사용하면 그래도 if문 보다 코드가 읽기 쉽다고 생각한다. 이런 부분은 주관이라 다를 수 있지만 반복적으로 type === "타입"을 반복적으로 적어주지 않아도된다. const Item= ({type})=>{ switch(type){ case 'png': return case 'jpg': return /.. 2022. 12. 16. [React 18] Batching 배칭 🎉 배칭이란? React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. batch의 의미 자체가 일괄처리다. 🎉 리액트 배치 예시 하나의 클릭 이벤트 안에 두 개의 state 업데이트(setState)를 가지고 있다면 React는 이 작업들을 배칭하여 하나의 리렌더링으로 만든다. 아래 코드는 버튼을 누를 때 마다, count와 flag 상태가 변경되지만 리렌더링은 단 한번만 수행한다. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount((c) => c + 1); // 아직 리.. 2022. 12. 12. 이전 1 2 3 4 5 ··· 9 다음
