WAI-ARIA 접근성: role

WAI-ARIA 란? WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다. 마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JavaScript, Ajax, Vue, React 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다. ex) 버튼을 클릭하여 페이지를 새로고침이나 링크 이동으로 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바..

2023.01.03

Git pull/push 시 Password 물어보지 않도록 설정하기(credential.helper)

git을 쓰다보면 간혹 config 미스, 환경 변경으로 push/pull 등 기능 실행 시 계정과 패스워드를 물어보는 경우가 발생합니다. credential 설정이 되어있지 않다면 계정정보를 요청하는게 당연하지만 한창 개발하고 있는 과정에서는 굉장히 귀찮고 번거로워집니다. 아래 코드를 터미널에 입력하면 로그인 정보가 캐시에 저장돼 반영구적으로 인증 절차가 생략됩니다. // terminal git config credential.helper store git config credential.helper cache git config credential.helper 'cache --timeout=00000' git config credential.helper store --global 설명 1. Crede..

2022.12.26

input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

mobile font size

html{font-size:calc(100vw*10/360)} @media (min-width:360px) { html{font-size:10px} } /* or */ html{ font-size:calc(100vw*11.66/420); } @media (min-width:420px) { html{font-size:11.66px} } 위 코드처럼 font-size를 주게 되면 브라우저 가로 사이즈에 따라 자동으로 폰트사이즈가 조절되고, rem으로 작성된 스타일의 크기가 자동으로 도절된다. 간단한 모바일 웹 페이지에서 사용하기 용이하다. 계산식은 아래와 같다. 10 : 360 = X : 420 10 : 360 = X : 390

2022.12.21

모바일 디바이스 체크

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }

2022.12.12

느린 컴포넌트 성능 향상 useTransition, useDeferredValue

react 18 버전에서 새롭게 추가된 hook이 있다. useTransition useTransition을 사용하면 동작이 느린 컴포넌트들을 혁신적으로 빠르게 동작시킬 수가 있다. // App.js import { useState } from "react"; function App(){ let [name, setName] = useState(''); let arr = new Array(10000).fill(0);// 0이 10000개 담긴 arr return ( { setName(e.target.value) }} /> { arr.map(()=>{ return {name} }) } ) } input에 유저가 글을 입력하게 되면 그 값을 name 이라는 state에 저장한 후 arr의 갯수(10000개)만..

2022.12.11