푸르른 IT월드 푸르른 IT월드

자바스크립트의 싱글 스레드 작업 수행 방식 동기 (Synchronous) JavaScript는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중일 때는 다음 작업을 수행하지 않고 기다린다. 즉, 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 이를 동기 방식으로 처리되었다고 한다. 그림 예제 1은 작업이 수행되는 시간은 총 1초가 걸린다. 1초쯤이야 괜찮을지 몰라도 만약, 그림 예제 2처럼 하나의 작업이 20초 걸린다고 하면? 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 때, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 기다려야하기 때문에, 전반적인 흐림이 느려진다. 비동기 (Asynchronous) 동기적 작업의 단점을 극복하기 위해 여러 개..

브라우저의 렌더링 과정 DOM ➡️ CSSOM ➡️ 렌더트리(Render Tree) ➡️ 레이아웃 ➡️ 페인팅 DOM 브라우저는 HTML을 처리하여 DOM을 만든다. CSSOM DOM 트리를 생성하는 과정과 동일한 과정으로 를 통하여 CSS를 받아들이고 이것을 이용하여 CSSOM을 만든다. 렌더트리(Render Tree) 이제 DOM과 CSSOM을 합쳐서 렌더트리를 만든다. 렌더트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다. 📢 여기서 잠깐 !! display: none 과 visibility: hidden의 차이에 대해 짚어 넘어가보자. display: none은 렌더트리에 포함되지 않는다. 즉, 레이아웃에 포함되지 않는다. (당연히 요소가 보이지도 않는다 !) 그래서 해당 요소가 공간도 차지..

addEventListener()란? addEventListener()는 이벤트를 등록하는 감지장치이다. 대상요소객체에 addEventListener() 감지장치를 붙인 후, 일어난 사건의 종류와 하고 싶은 일(함수)을 파라미터로 넣어 실행하면 감지장치가 작동하기 시작한다. // 대상요소객체.addEventListener(사건의 종류, 하고 싶은 일) btn.addEventListener('click', function() {console.log('클릭 성공!')}) 그러다 사건(이벤트)이 발생할 때(=사건이 감지되었을 때), addEventListener()의 파라미터로 넣었던 함수가 실행되는 것이다. event 객체 사건이 발생할 때는 event 객체가 만들어져서 방금 일어난 사건에 대한 정보가 기록..

# childNodes 속성 특정 노드에서 childNodes속성을 사용하면 자신에게 속해있는 모든 노드 자식들을 배열 형태로 반환해준다. 마치, 자식 노드 리스트같다. 예시를 통해 더 자세히 알아보자. 버튼 button 노드에게 자식노드가 있을까 ? 없을 것 같지만 사실 button 노드는 자식으로 text 노드를 가지고 있다. 이때, text 노드는 '버튼'이라는 글자를 가리킨다. 여기서 text 노드는 조금 더 알아보자면, 공백 또한 text 노드로 만들어진다. 이 점을 유의해보자. # nodeValue 속성 const btn = document.querySelector('button'); console.log(btn.textContent); // 버튼 console.log(btn.childNode..

getAttribute() 태그안의 원하는 속성의 값을 가져와서 문자열로 반환해준다. DOM 연습 const h1El = document.querySelector('h1'); h1El.getAttribute('title'); // 이것은 제목입니다. setAttribute() 원하는 문자열로 속성값을 지정해준다. h1El.setAttribute('title', '이것은 제목입니당'); // 이것은 제목입니당 getAttribute() 문제 li마다 있는 a의 href 속성의 값을 가져와서 반복문을 통해 빈 객체안에 차례대로 담아보자. 구글 네이버 다음 let 검색포털 = {}; const aEls = document.querySelectorAll('a'); aEls.forEach((item) => { 검..

querySelector() document.querySelector('li')와 같이 노드를 선택할 수 있다. ()안에는 유효한 CSS 선택자를 작성하면 된다. 단, 선택한 요소가 여러개일 경우, 첫번째 노드만 반환해준다. querySelectorAll() 해당하는 모든 요소 노드를 배열 형태로 반환해준다. 그렇다고 배열은 ❌❌❌ 배열은 아니지만 querySelectorAll()은 for of문과 forEach()를 사용할 수 있게 만들어진 메소드다. 코코몽 코코몽 코코몽 코코몽 코코몽 // querySelectorAll() 해당하는 모든 요소 노드를 배열 형태로 반환해준다. // 그렇다고 배열은 ❌❌❌ // 반복문을 통해 코코몽 옆에 귀여워와 🥰, ❤️를 넣어보자. const liEls = docum..

trim() 문자열 양 끝의 공백을 제거해준다. let str1 = ' 코코몽 코몽이 코코찌니 '; console.log(str1.trim()); // 코코몽 코몽이 코코찌니 concat() 기존 문자열에 추가하고 싶은 문자열과 결합해서 반환해준다. let str2 = 'Jinhee Lee'; console.log(str2.concat('❤️')); // Jinhee Lee❤️ charAt() 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환해준다. let str2 = 'Jinhee Lee'; console.log(str2.charAt(3)); // h

toUpperCase() 문자열을 대문자로 변환해준다. let str2 = 'Jinhee Lee'; console.log(str2.toUpperCase()); // JINHEE LEE toLowerCase() 문자열을 소문자로 변환해준다. let str2 = 'Jinhee Lee'; console.log(str2.toLowerCase()); // jinhee lee