멈추지 않는 프론트엔드 개발자

✍️들어가기 전... 이번엔 동기와 비동기에 대해서 알아볼 것이다. 동기는 실행된 것이 종료된 이후에 다음 것을 실행하고 비동기는 실행된 것에 딜레이가 생기면 다음 것을 먼저 실행시킨다 정도로만 알고 있었는데 이번 계기를 통해 좀 더 딥하게 알아보도록 해보겠다. 동기 비동기 이벤트 루프와 태스크 큐 💡동기와 비동기 동기 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식이란 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 blocking(작업 중단)이 발생한다. 이러한 코드 순차 실행을 동기라고 부른다. 스레드(Thread)란? 프로세스 내에서 실행되는 흐름의 단위 예를들면 라면을 끓일 때 라면을 끓일..

✍️들어가기 전... 프론트엔드 개발자라면 DOM과 브라우저가 렌더링 되는 과정에 대해 필수적으로 알아야 할 필요가 있다고 생각했다. 그래서 브라우저 렌더링이 뭔지 부터 시작해서 reflow가 뭐고 왜 최소한으로 발생해야 하는지 까지 자세하게 정리하면서 알아가보려고 한다! 💡DOM DOM은 Document Object Model 의 약자로 HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다. html을 구성하는 하나하나의 요소를 Elements라고 부르고 모든 Elements를 담고 있는 문서를 Document라고 부른다. DOM은 웹페이지에 들어가 있는 Elements 들을 트리 형태로 구성한 것이다. 그러므로 DOM은 HTML문서를 브라우저가 이해할 수 있도록 만든 Tre..

이름을 입력하고 출석 버튼을 누르면 출석부에 입력한 이름이 출력되게 하는 로직을 짜는 도중에 조금은 사소한 궁금증이 하나 생기게 되었다. // const target = document.getElementsByClassName(".attend")[0]; const target = document.querySelector(".attend"); const inputName = document.getElementsByName("name")[0]; const attendee = document.getElementById("attendee"); function attend() { const inputValue = inputName.value; attendee.textContent = inputValue; } ta..