JS, TS

1. 이벤트 위임 // 이벤트 위임 // 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우, // 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용 가능 const parentEl = document.querySelector('.parent') const childEls = document.querySelectorAll('.child') // 모든 대상 요소에 이벤트 등록 // nodelist는 foreach 사용 가능 // childEls.forEach(el => { // el.addEventListener('click', event => { // console.log(event.target.textContent) // }) // }) // 조상 요소에 이벤트 위임! // 조상 요소에 이벤..

1. 이벤트 추가 및 제거 // addEventListener() // 대상에 이벤트 청취(listen)를 등록 // 대상에 지정한 이벤트가 발생했을 때 지정한 함수(handler)가 호출 const parentEl = document.querySelector('.parent') const childEl = document.querySelector('.child') parentEl.addEventListener('click', ()=>{ console.log('Parent!') }) childEl.addEventListener('click', ()=>{ console.log('childEl!') }) // removeEventListener() // 대상에 등록했던 이벤트 청취를 제거 // 메모리 관리를..

1. DOM 개념 - DOM(Document Object Model) - HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어 const element = document.querySelector('h1') 2. Node vs Element // 예제2 class N {} class E extends N {} console.dir(E) // 출력결과의 prototype 속성에서 N을 상속했다는 것 확인 가능 console.dir(N) console.dir(E.__proto__) console.dir(Element) console.dir(Node) console.dir(Element.__proto__) 3. 검색과 탐색 // document.getElementById() // HTML 'id' ..

1. 동기(Synchronous)와 비동기(Asynchronous) 개념 - 동기 : 순차적으로 코드 실행 0 - 비동기 : 순차적으로 코드 실행 X - 콜백 패턴 -> 실행의 순서를 보장하기 위해 각각의 함수에 콜백을 추가해야 함 const a = (callback) => { setTimeout(() => { console.log(1) // callback 함수 실행 callback() }, 1000) } const b = () => { setTimeout(() => { console.log(2) // callback 함수 실행 }, 1000) } const c = () => console.log(3) // 추가하는 콜백은 점점 안쪽으로 들여쓰기되어 파고 드는 패턴 생성 == 콜백 지옥 a(() => ..

모듈 - 특정 데이터들의 집합(파일) - 모듈 IMPORT, EXPORT - 파일로 정리하는 것 = 모듈화 1) 기본 내보내기 / 이름 내보내기 main.js // 기본 내보내기는 import 할 때 이름 변경 가능 // 이름 내보내기를 가져올 땐 {} 사용 import number, {str as xyz, arr, hello as h} from './module.js' import * as abc from './module.js' console.log(xyz) console.log(arr) console.log(h) console.log(abc) module.js // 기본 내보내기(default 사용) // 한 모듈에서는 한 데이터만 내보내기 가능 export default 123; // 이름 내보내..

1. 정적 메소드 // Array.from() 정적 메소드 // 유사 배열을 실제 배열로 반환 const arrayLike = { 0:'A', 1: 'B', 2: 'C', length:3 // length를 제거하면 유사 배열의 구조와 맞지 않기에 콘솔에 아무것도 출력 안됨 } console.log(arrayLike.constructor === Array) // false console.log(arrayLike.constructor === Object) // true // Array.from(arrayLike) 객체 데이터가 하나의 실제 배열로 생성 // foreach로 배열 각각의 아이템을 콘솔에 출력 // foreach는 배열에 사용하기 때문에 객체인 arrayLike에 바로 사용하면 에러남 // a..

1. 배열 // at() // 대상 배열 인덱싱 // 음수 값을 사용하면 뒤에서부터 인덱싱함 const arr = ['a', 'b', 'c'] console.log(arr[0]) // a console.log(arr.at(0)) // a console.log(arr[arr.length-1]) // c console.log(arr.at(-1)) // c // concat() // 대상 배열과 주어진 배열을 병합해 새로운 배열 반환 const arr1 = ['A', 'B', 'C'] const arr2 = ['D', 'E', 'F'] const arr3 = arr1.concat(arr2) // 전개연산자 const arr4 = [...arr1, ...arr2] console.log(arr1) console...

1. 문자 const str = 'Hello world!' // .includes() // 대상 문자에 주어진 문자가 포함되어 있는지 확인 // 찾기 시작할 문자 인덱스 설정 가능 console.log(str.includes('Hello', 1)) // false // .indexOf() // 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스 반환 // 일치하는 문자가 없으면 -1 반환 console.log(str.indexOf('Hello')) // 0 // .padEnd() // 대상 문자의 길이를 확인해서 지정된 길이보다 작으면, // 주어진 문자를 지정된 길이까지 끝에 붙여 새로운 문자 반환 console.log(str.padEnd(20, '0')) // Hello world!00000000 c..