JS DOM( Document Object Model ): 문서 객체 모델

DOM: 문서 객체 모델 문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 구조에서 최상위 객체로는 이 있으며, 그 하위 객체로는 와 가 있습니다. 모든 HTML 태그는 객체 또는 노드라 합니다. Document는 document 노드라 하고 태그들도 모두 노드입니다. HTML 태그 내의 텍스트 역시 텍스트 노드라 하고 주석도 주석 노드라 합니다. 위 그림 처럼 노드들은 트리 구조를 구성기 때문에 태그를 루트 노드가 되고, 태그와 태그는 루트 노드의 자식 노드가 됩니다. 이 같은 노드들은 모두 JS를 통해 접근할 수 있고 조작할 수 있습니다. 예를 들어 태그는 document.body로 접근할 수 있고 텍스트 노드는 innerHTML속성으로 접근할 수 있습니다. DOM 노드 탐색..

• format_list_bulleted Front-End/JS
• · 2023. 4. 28.
• textsms

JS async & await

async & await async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다. async function 함수명() { await 비동기_처리_메서드명(); } async는 함수가 Promise를 반환하도록 하는 키워드입니다. await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. async async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다. 만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다. 아래 예시를 보면 "..

• format_list_bulleted Front-End/JS
• · 2023. 4. 28.
• textsms

JS Promise를 사용한 비동기 처리

비동기 처리 비동기 처리란 코드가 끝나기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다. 비동기 처리 예제 setTimeout(function(), ms) console.log("first"); setTimeout(function () { console.log("second"); }, 3000); console.log("third"); 위 예제 코드에 대한 결과는 다음과 같습니다. "first" 출력 "third" 출력 "second" 출력 setTimeout은 지정한 초(예제에서는 3초) 만큼 기다린 후에 코드가 실행됩니다. 하지만 비동기 방식으로 실행되기 때문에 기다리는 동안 다음 코드가 실행됩니다. Promise 사용 전 비동기를 위한 방법: 콜백 함수 JS에서 비동기 처리에 대한 글을 보면 ..

• format_list_bulleted Front-End/JS
• · 2023. 4. 27.
• textsms

JS addEventListener 사용법 ( + capturing, bubbling )

addEventListener() addEventListener()는 지정된 요소에 하나 이상의 이벤트 핸들러를 등록할 수 있습니다. removeEventListener() removeEventListener()는 addEventListener()로 연결된 이벤트 핸들러를 제거합니다. 이때 주의할 점은 반드시 addEventListener()를 사용했을 때와 마찬가지로 매개 변수를 설정해주어야 한다는 점과 addEventListener()과 같은 단계에 있어야 한다는 점입니다. element.addEventListener(event, function, useCapture) 1. element document, window 같이 이벤트를 적용할 요소입니다. 2. event 첫 번째 매개변수로 이벤트 유형을..

• format_list_bulleted Front-End/JS
• · 2023. 4. 27.
• textsms

JS 정규식

정규식 정규식은 문자열에서 특정 내용을 찾거나 대체할 때 사용됩니다. 문장이 필터링 되어야 하는 경우 정규표현식을 이용하면 간편하게 처리할 수 있어 유용합니다. JS에서 주로 search(), replace(), match(), split() 등과 같은 메서드에 쓰입니다. 문자열.search(정규표현식) 문자열.replace(정규표현식, 치환문자열) 문자열.match(정규표현식) 문자열.split(정규표현식) 정규표현식.exec(문자열): 패턴과 일치하는 문자열을 배열로 반환 정규표현식.test(문자열): 패턴과 일치하는 문자열이 있는지 여부를 반환 정규식 규칙: /패턴/수정자 패턴 패턴 부분 정규식 규칙을 대부분 비슷합니다. 정규식 규칙 정규식 규칙 기호 | OR a|b [문자] 대괄호 내에 지정된 문..

• format_list_bulleted Front-End/JS
• · 2023. 4. 26.
• textsms

JS Map과 Set

Map Key(키)와 Value(값)을 쌍으로 이루어진 컬렉션입니다. // Map 생성 및 선언 const map = new Map(); const map = new Map([ ['Apple', 1200], ['Banan', 1500], ['Orange', 2500] ]); // Map 값 추가 map.set('Apple', 1200); map.set('Banana', 1500); map.set('Orange', 2500); // Map 값 삭제 map.delete('Apple') // Map 값 가져오기 map.get('Apple'); // Map 값 존재하는지 확인 map.has('Apple'); // true or false // Map 크기 map.size; // Map 모든 값 삭제 map.cl..

• format_list_bulleted Front-End/JS
• · 2023. 4. 26.
• textsms