전체 글

1. Symbol, BigInt 데이터 // Symbol // 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용 가능 // Symbol('설명') // 설명은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계가 없음 const sKey = Symbol('hello!') const user = { key: '일반 정보', [sKey]: '민감한 정보' } console.log(user.key) console.log(user['key']) console.log(user[sKey]) console.log(user[Symbol('hello!')]) // undefined console.log(typeof sKey) // Symbol(hello!) // BigInt // BigInt는..

1. Console // console // 콘솔에 메시지나 객체를 출력 // log() : 일반 메시지, warn() : 경고 메시지 // error() : 에러 메시지, dir() : 속성을 볼 수 있는 객체 출력 console.log(document.body) console.warn(document.body) console.error(document.body) console.dir(document.body) // 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화 // console.count('이름') // console.countReset('이름') console.count() // default: 1 console.count('a') console.count('a') console.countR..

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..