# focus
[웹 접근성] tabindex적용해서 div에 outline 표시하기
웹 접근성 개선을 위해 focus되어있는 요소에 outline을 넣는 작업을 하고있었다.대부분 클릭 가능한 요소들은 button으로 만들게되는데, 재사용 컴포넌트로 만든 chip 컴포넌트가 예외였다.chip컴포넌트는 onClick 프롭을 옵셔널로 전달받는데, 전달받을

1.3
useRef의 특징.state와 비슷하게 저장공간으로 사용된다.1\. ref에 넣으면 state처럼 매번 randering이 되지 않아 불필요한 randering을 줄일 수 있다.2\. state가 변경이 되어 randering이 되더라도 ref의 값은 변하지 않는다.
boardwrite.html
boardwrite.html .ck-editor_editableinline { min-height: 400px; } 제
리액트 autoFocus
새로고침시 useEffect 가 최초 실행 -> autoFocus 실행App 컴포넌트 import 시 return 시작 input 태그에 ref 에서 prop를 받아옴inputRef 는 App 이 호출되면 React.useRef 에서 값 을 넘겨받음 div 마찬가지us
Effect Hook (feat. lifecycle in React)
클래스 컴포넌트의 생명주기와 함수 컴포넌트의 이펙트 훅을 통해서 작동 순서를 비교

[모던JS: 브라우저] 폼과 폼 조작
본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다.중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되
[자바스크립트] 점검 목록 프로그램
여행준비물이나 아니면 간단한 점검 목록을 메모 할 수 있는 프로그램을 DOM과 배열로 구현해 보았다.var 아이템리스트 = \[];var 입력 = document.querySelector('var 버튼 = document.querySelector('var 언리스트 =
[자바스크립트] 야구게임 만들기
배열과 배열관련 메소드를 활용하여 야구게임을 만들어 보았다.DOM을 이용하여 html를 작성하였다.array에 배열을 1~9까지 저장하였다. 이 변수는 나중에 랜덤으로 1~9까지 수를 뽑기 위해 구성하였다.array1에는 빈 배열을 만들었는데 그 이유는 1~9까지 뽑은
[자바스크립트]끝말잇기 구현
자바스크립트를 이용하여 끝말잇기 게임을 구현해 보았다. 이번 토이프로젝트 목표는 문서객체의 활용과 textcontent활용 addEventListener의 활용이다.DOM의 createElement를 통해 element들을 만들었고 노드들을 appendChild를 통해
마우스 포커스와 키보드 포커스를 구분하는 방법
리액트 수업 중에 강사님이 이 코드에 대해 알아봐라 하셔서 적어놨다가 찾아볼 시간이 생겨 올리는 글이자 첫 velog 포스팅. 버튼 요소에 포커스가 갔을 경우 outline에 대한 스타일링을 하지 않으면 다음과 같이 렌더링된다.스타일링을 하지 않았거나 reset.css

기록
스크롤 뷰 초기 위치 문제 한 화면 안에 모든 내용을 보이게 할 수는 없다. 그렇기 때문에 ScrollView를 이용해서 사용자가 현재 화면 밖의 화면을 볼 수 있게 구성한다. 사실 ScrollView 안에 있는 뷰들이 그나마 간단한 구조면 이럴 일은 거의 없다. 하
[JS] eventListener submit and click, focus()
입력창과 버튼이 함께 있는 form은 submit 액션을 받을 수 있다submit은 엔터를 치면 버튼이 눌리며 클릭도 가능하다 버튼은 입력창과 분리되어있기때문에 submit 액션을 받을 수 없다오로지 클릭만 가능하기에 click 액션밖
IOS 모바일 디바이스에서 focus 이슈
https://github.com/JedWatson/react-select/issues/3501정리하자면 페이지 이동 후 어떤 인풋이 있고 해당 인풋이 자동으로 활성화되어 입력 키보드가 나오게 하고 싶은데,IOS에서는 "실질적인 사용자 인터랙션"이 일어나지 않
How to control focus/onblur in Vue TextareaAutosize library
focus나 onblur속성이 어디서든 다 먹는줄 알고 <div>태그에서도 적용될 줄 알았다. 그러나 onblur 나 focus는 '입력요소'(ex.input)에만 적용되는 것이다.Vue.js로 현재 프론트페이지를 만들고 있는데 특정한 곳 외에 다른 곳을 클릭했을