emayom.log

input 태그를 작성하고 해당 태그에 포커스를 주고싶을 때! html 태그에 autofocus를 명시하거나, 자바스크립트에서는 selector 함수를 통해 가져온 엘리먼트에 focus() 메소드를 통해 포커스를 줄 수 있다. 그렇다면 리액트는 ???? 🤔 우선 자바스크립트부터 확인해보자. 그냥주면 심심하니까 화면이 보여지고 3초 뒤부터 포커스를 줘보자. 우선 DOM 셀렉터로 input을 가져오고, setTimeout()으로 3초 뒤에 focus()를 주도록 작성할 것이다. const autoFocusInput = document.getElementById("input"); setTimeout(() => { autoFocusInput.focus(); }, 3000); 이제 리액트로 바꿔보자. 이전과 동일..

태그는 내에 혹은 최하단에 위치할 수 도 있지만 보통 태그의 최하단에 를 위치하는 것이 좋다고 한다. 그렇다면 왜일까? 1. 첫번째 이유를 알아보기 전에 우선 브라우저 동작 과정을 간단하게 다시 한 번 상기시켜보자. HTML parser -> DOM tree CSS parser -> CSSOM DOM + CSSOM => Render tree Layout Paint 일련의 과정 중, HTML 파싱 과정에서 script 요소를 만나게 되면 ? HTML 파서는 파싱을 멈추고 자바스크립트 코드를 로드 후 파싱이 완료되고 나서야 다시 HTML 파싱을 재개한다. => 이렇게 중단되며 화면 표시에 지연이 생기는 것을 방지하기 위해 body 최하단에 작성한다. 2. 두번째 이유는 자바스크립트 코드 내에서 DOM을 조작..