해시테이블
- 연관배열구조 자료구조입니다.
- 키를 이용하여 값을 알 수 있다.
장점
- 빠른 데이터 읽기, 삽입, 삭제 = 0(1)
- 해쉬 함수를 통하혀 공간을 호율적으로 사용
단점
- 메모리를 많이 차지하고 충돌 위험이 존재한다
해시
단방향 암호화 기법으로 해시함수를 이요해서 고정된 길이의 암호화된 문자열로 바꿔버리는 것
해시값
매핑 후 데이터의 값
해시 함수
- 키를 해시(hash)로 바꿔주는 역할을 한다. 여러 키를 분할하기 위해 키를 해시값으로 매칭시키는 역할을 한다.
- 다양한 길이를 가지고 있는 키를 일정한 길이를 가지는 해시로 바꿔서 저장소를 효율적으로 운영할수 있도록 한다.
해시 충돌
서로 다른 키가 같은 해시가 되는 경우를 해시 충돌(hash collision)이라고 한다.
- 해시 함수를 이용해서 키값을 구했는데 동일시 되는 것이 두개가 있으면 충돌이 일어나게 된다.
이때 같은 인덱스에 저장하고 데이터는 연결리스트 방식으로 저장된다.
충돌 해결 방법
- 체이닝 : 충돌이 발생하면 연결 리스트에 추가하는 방식
- 개방 주소법 : 충돌이 발생하면 다른 버킷에 데이터를 삽입하는 방식
- 선형 탐색 : 충돌시 바로 다음 버킷에 저장- 제곱 탐색 : 충돌시 제곱만큼 건너뛴 버킷에 데이터를 저장
- 이중 해시 : 해시 충돌시 다른 해시함수를 한번더 적용한 결과를 저장
셋
- 데이터의 중복을 허용하지 않는 자료구조
특징
- 해시 테이블을 사용한다 해서 hash set이라고 부른다.
- 자료 접근시 인덱스 값은 사용하지 않고 키만 사용한다
- 인덱스가 존재하지 않음
장점
- 충돌이 날 경우가 없다
- 빠른 속도로 검색이 가능하다
Object vs Map
| 구분 | Object | Map |
|---|---|---|
| 키의 타입 | string,symbol | 모든 값 |
| 크기 | 수동 추적 | 내부 프로퍼티 |
| 사용 경우 | 적용해야하는 로직이 있는 경우 | 실행히 키를 모르고 모든키와 값들이 동일한 경우 |
- Object는 size가 존재하지않지만 Map은 size를 통해서 크기를 얻을수 있다.
- 각 개별요소에 대해 적용해야하는 로직이 있을 경우에는 Object를 사용해야하고, Object.defineProperty 메서드를 사용해야한다.
- Map의 경우는 이터러블 객체가 반환되어 for ..of 함수를 사용할수 있고, 배열 스프레드 오퍼레이터와, 배열 비구조화 할당이 사용가능하다.
Set vs Array
| 구분 | Set | Array |
|---|---|---|
| 중복허용 | O | X |
| 인덱스 참조 | 불가능 | 가능 |
-
length 프로퍼티에 대해 수정할 수 있으며, Array.prototype.length는 Setter를 가지고 있고, 이를 수정해서 요소의 개수와 배열의 길이가 다른 희소배열이 생긴다.
-
Set 생성자를 가지고 생성한 이터러블 객체는 getter 만을 가지고 있어서 읽기 전용이다.
Javascript
Throttle
일정시간 간격으로 함수를 실행
window.addEventListener('scroll', throttle(event => {
console.log(event)
}, 400))Debound
일정 시간동한 함수가 실행되지 않으면 함수를 실행합니다.
window.addEventListener('scroll', debounce(event => {
console.log(event)
}, 400))계속 스크롤을 오르락 내리락 하다가 0.4초간 안하고 있으면 그때 event를 콘솔 로그로 출력한다.
DOM
Node vs Element
노드(Node): HTML 요소, 텍스트 주석 등 모든 것을 의미
요소(Element): HTML 요소를 뜻한다.
<div class="parent">
<!-- 주석 -->
<div class="child">1</div>
텍스트1
<div class="child">2</div>
텍스트2
</div>const parentEl = document.querySelector('.parent')
// 부모 요소의 모든 자식 노드 확인!
console.log(parentEl.childNodes)
// NodeList(7) [text, comment, text, div.child, text, div.child, text]
// 부모 요소의 모든 자식 요소 확인!
console.log(parentEl.children)
// HTMLCollection(2) [div.child, div.child]N.parentElement
노드의 부모 요소를 반환한다.
const el = document.querySelector('.child')
console.log(el.parentElement) // <div class="parent">...</div>E.closest()
자신을 포함한 요소중 'CSS 선택자'와 일치하는 가장 가까운 요소를 반환한다. 요소를 찾지 못하면, null을 반환한다.
const el = document.querySelector('.child')
console.log(el.closest('div')) // <div class="child">1</div>
console.log(el.closest('body')) // <body>...</body>
console.log(el.closest('.hello')) // nullE.previousElementSibling / E.nextElementSibling
요소의 이전 형제 혹은 다음 형제 요소를 반환한다.
const el = document.querySelector('.child')
console.log(el.previousSibling) // '\n '
console.log(el.nextSibling) // '텍스트1'E.children
요소의 모든 자식 요소를 반환한다.
const el = document.querySelector('.parent')
console.log(el.children) // HTMLCollection(2) [div.child, div.child]E.firstElementChild / E.lastElementChild
요소의 첫번째 자식 혹은 마지막 자식요소를 반환한다.
const el = document.querySelector('.parent')
console.log(el.firstElementChild) // <div class="child">1</div>
console.log(el.lastElementChild) // <div id="child2" class="child">2</div>
생성 조회 수정
<div class="parent">
<!-- 주석 -->
<div class="child">햄버거1</div>
치즈버거
<div id="child2" class="child">감자튀김2</div>
양념감자
</div>document.createElement()
메모리에만 존재하는 새로운 html요소를 생성해 반환한다
const divEl = document.createElement('div')
console.log(divEl) // <div></div>
const inputEl = document.createElement('input')
console.log(inputEl) // <input>E.prepend()/ E.append()
지정된 여러 노드를 대상 요소의 첫번째 혹은 마지막 자식으로 삽입한다.
요소.prepend(노드1, 노드2)
요소.append(노드1, 노드2)const parentEl = document.querySelector('.parent')
const el = document.createElement('div')
el.textContent = '싸이버거3'
parentEl.prepend(new Comment(' 주석 '))
parentEl.append(el, '맛있어요!')
//햄버거1
//치즈버거
//감자튀김2
//양념감자
//싸이버거3
//맛있어요!E.remove()
요소를 제거합니다.
const el = document.querySelector('.child')
el.remove()
//치즈버거
//감자튀김2
//양념감자E.insertAdjacentElement()
'대상 요소'의 지정한 위치에 '새로운 요소'를 삽입한다.
대상_요소.insertAdjacentElement(위치, 새로운_요소)각 위치는 다음과 같다
<!-- 'beforebegin' -->
<div class="target">
<!-- 'afterbegin' -->
Content!
<!-- 'beforeend' -->
</div>
<!-- 'afterend' -->const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = '주문할게요~'
childEl.insertAdjacentElement('beforebegin', newEl)
/*
주문할게요~
햄버거1
치즈버거
감자튀김2
양념감자
*/.child는 햄버거1이고 해당 요소의 beforebegin 에 생성하기 때문에 위쪽에 '주문할게요~'가 생기는 것이다!
N.containes()
'주어진 노드' 가 '노드'의 자신을 포함한 후손인지 확인한다.
노드.contains(주어진_노드)const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
console.log(parentEl.contains(childEl)) // parentEl 에 childEl이 있니? true
console.log(document.body.contains(parentEl)) // body 내부에 parentEL이 있니? true
console.log(document.body.contains(childEl)) // body 내부에 childEl이 있니? true
console.log(document.body.contains(document.body)) // body 에 body가 있니? true
console.log(parentEl.contains(parentEl)) // parentEl 에 parentEl이 있니? true
console.log(parentEl.contains(document.body)) // parentEl에 body가 있니? false
console.log(childEl.contains(document.body)) // childEl에 body가 있니? falseN.textContent
노드의 모든 텍스트를 얻거나 변경한다
const el = document.querySelector('.child')
console.log(el.textContent) // '햄버거1'
el.textContent = '싸이버거'
console.log(el.textContent) // '싸이버거'E.innerHTML
요소의 모든 HTML 구조를 하나의 문자로 얻거나, 새로운 HTML구조를 삽입한다
const el = document.querySelector('.parent')
console.log(el.innerHTML)
el.innerHTML = '<span style="color: red;">햄버거~</span>'
내용이 전부 지워지고 '햄버거~'만 남는다
E.dataset
요소의 각 data-속성 값을 얻거나 지정한다.
const el = document.querySelector('.child')
const str = '엄청 맛있는 햄버거'
const obj = {a: 1, b: 2 }
el.dataset.helloWorld = str
el.dataset.object = JSON.stringify(obj)
console.log(el.dataset.helloWorld) // '엄청 맛있는 햄버거'
console.log(el.dataset.object) // '{"a":1,"b":2}'
console.log(JSON.parse(el.dataset.object)) // { a: 1, b: 2 }E.tagName
요소의 태그 이름을 반환한다
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const el = document.createElement('span')
console.log(parentEl.tagName) // 'DIV'
console.log(childEl.tagName) // 'DIV'
console.log(el.tagName) // 'SPAN'
console.log(document.body.tagName) // 'BODY'E.id
요소의 di속성 값을 얻거나 지정한다
const el = document.querySelector('.child')
console.log(el.id) // ''
el.id = 'child1'
console.log(el.id) // 'child1'
console.log(el) // <div class="child" id="child1">1</div>E.className
요소의 class 속성 값을 얻거나 지정한다.
const el = document.querySelector('.child')
console.log(el.className) // 'child'
el.className += ' child1 active'
console.log(el.className) // 'child child1 active'
console.log(el) // <div class="child child1 active">1</div>E.classList
요소의 class속성 값을 제어한다
.add(): 새로운 값을 추가
.remove(): 기존 값을 제거
.toggle(): 값을 토글
.contains(): 값을 확인
const el = document.querySelector('.child')
el.classList.add('hamburger')
console.log(el.classList.contains('hamburger')) // true
el.classList.remove('hamburger')
console.log(el.classList.contains('hamburger')) // false
el.addEventListener('click', () => {
el.classList.toggle('hamburger')
console.log(el.classList.contains('hamburger'))
})
개발자 꿈나무