CodeIt Sprint FS 2nd 12-14일차

클래식 & 모던 js에 관한 내용

---

js를 이용해 dom 요소 선택하기

document.getElementById('id') -> id에 해당하는 첫 요소 반환

document.getElementsByClassName('class') -> class를 가진 요소들의 모음(HTMLCollection, 유사배열)을 반환

document.getElementsByTagName('tag') -> tag에 해당하는 요소들의 모음(HTMLCollection)을 반환

document.querySelector('css') -> css 선택자에 해당하는 첫번째 요소 반환

document.querySelectorAll('css') -> css 선택자에 해당하는 요소 모음(NodeList, 유사배열) 반환

 

DOM?

Document Object Model. 문서 전체를 객체로 표현하는 모델.

dom 이동시 주로 활용하는 프로퍼티들

element.children -> 해당 요소의 자식 요소 모음(HTMLCollection)
element.firstElementChild, element.lastElementChild -> 해당 요소의 첫 자식, 마지막 자식 요소

element.parentElement -> 해당 요소의 부모 요소

element.previousElementSibling -> 해당 요소의 이전 형제 요소

element.nextElementSibling-> 해당 요소의 다음 형제 요소

(요소가 아닌 노드를 접근하는 프로퍼티도 존재한다. 자주 사용하지 않았던 것 같다)

 

element.innerHTML -> 내부의 HTML코드를 반환

element.textContent -> 내부의 텍스트를 반환(HTML 코드 제외)

 

document.createElement('tag') -> tag에 해당하는 요소를 하나 생성함.

element.prepend(ele), element.append(ele) -> ele를 element의 첫 자식 요소/마지막 자식 요소로 추가/이동

element.before(ele), element.after(ele) -> ele를 element의 이전/다음 형제 요소로 추가/이동

element.remove() -> element 요소를 삭제.

 

element.getAttribute('a') -> 표준/비표준을 가리지 않고 element의 a 속성에 접근해 가져옴

element.setAttribute('a', 'b') -> element의 a속성을 b로 세팅함

element.removeAttribute('a') -> element의 a속성을 제거함

 

element.style.styleName = 'value' -> element에 styleName에 해당하는 스타일을 value로 세팅함. 자주 사용하지 않음.

element.className, element.classList를 이용해 클래스를 추가하고, 클래스에 해당하는 스타일을 입히는게 더 일반적이다.

classList.add, classList.remove -> 클래스를 추가/제거한다

classList.toggle -> 클래스가 있으면 제거, 없으면 추가한다.

---

이벤트 관련

Element.addEventListener('type', 'Handler') -> Element에서 type에 해당하는 이벤트가 일어났을 때 Handler에 해당하는 콜백 함수를 실행한다.

콜백 함수 -> 함수의 파라미터로 사용된 함수

Element.removeEventListener('type', 'Handler') -> addEventListener로 등록한 핸들러를 삭제한다. 기명함수가 아니면 작동하지 않음.

 

핸들러의 첫번째 파라미터로는 자동으로 이벤트 객체가 전달된다.

 

이벤트 캡쳐링? 버블링?

어떤 요소에서 이벤트가 발생하려면 최상위 부모요소로부터 내려오면서(캡쳐링) 전파되고, 타깃에서 이벤트가 실행된 뒤(타깃 단계), 다시 부모요소를 통해 최상위로 전파된다.(버블링)

캡쳐링은 자주 사용되지 않지만 버블링은 자주 사용되며, 의도치 않은 동작이나 의도한 동작을 발생시키기 쉬움.

대표적으로 이벤트 위임이 존재한다.

이벤트 위임?

자식 요소 하나하나에 이벤트 핸들러를 등록하지 않고, 공통된 부모요소에 이벤트 핸들러를 등록해 버블링을 통해 자식 요소의 이벤트를 다룰 수 있다. 이를 이벤트 위임이라 한다.

이벤트 버블링은 event 객체의 stopPropagation 메소드로 막을 수 있다.(잘 사용하지 않는다.)

브라우저의 각종 요소에는 기본 동작이 할당된 경우가 있다. 이를 막기 위해선 event.preventDefault() 메소드를 이용하자.

---

마우스 이벤트

MouseEvent.button 프로퍼티

0 -> 마우스 왼쪽 버튼

1 -> 휠 버튼

2 -> 오른쪽 버튼

3 -> X1(엄지 버튼 중 뒤로 가기 버튼. 손목에 가까운 쪽)

4 -> X2(엄지 버튼 중 앞으로 가기 버튼. 손목에서 먼 쪽)

버튼과 관련 없는 이벤트(mouseenter 등)에선 0이 기본값이다.

 

MouseEvent.type 프로퍼티

mousedown -> 버튼이 눌리는 순간

mouseup -> 눌러진 버튼이 떼어지는 순간

click -> 버튼을 클릭한 순간(일반적으로는 down -> click -> up. 환경에 따라 down -> up -> click)

dbclick -> 더블클릭

contextmenu -> 마우스 오른쪽 버튼을 누름

mousemove -> 커서가 움직임

mouseover -> 커서가 요소 위로 올라옴

mouseout -> 커서가 요소를 벗어남

mouseenter -> 커서가 요소로 위로 올라옴(버블링 없음)

mouseleave -> 커서가 요소를 벗어남(버블링 없음)

 

mouseover ~ mouseleave 이벤트에는 relatedTarget이라는 프로퍼티가 존재한다.

이 프로퍼티는 이벤트가 일어나기 직전/직후에 마우스가 위치하는 요소를 담고 있다.

 

마우스 위치에 대한 프로퍼티

MouseEvent.clientX, MouseEvent.clientY -> 커서의 브라우저 표시 영역 내에서의 위치

MouseEvent.pageX, MouseEvent.pageY -> 커서의 문서 영역 내에서의 위치

MouseEvent.offsetX, MouseEvent.offsetY -> 이벤트 발생 영역 내에서의 커서 위치

MouseEvent.screenX, MouseEvent.screenY -> 커서의 모니터 영역 내에서의 위치

---

키보드 이벤트

KeyBoardEvent.type 프로퍼티

keydown -> 버튼이 눌러진 순간

keyup -> 버튼이 떼어진 순간

keypress -> 버튼이 눌러진 순간(출력이 가능한 문자키에만 동작한다.)

 

.key vs .code

key 프로퍼티는 눌러진 키의 값, code는 눌러진 키의 '물리적인 값'을 가진다.

---

기타 이벤트

input

input.type 프로퍼티

focusin -> input 요소에 포커스 된 순간

focusout -> 포커스가 나간 순간

focus -> focusin, 버블링 없음

blur -> focusout, 버블링 없음

change -> 값이 변경됨

input -> 값이 입력됨

select -> 입력 양식 중 하나가 선택됨

submit -> 폼이 전송됨

 

스크롤 이벤트
주로 window 객체에 핸들러를 달아서 사용함. scrollY 프로퍼티를 기준으로 삼는 경우가 많고, 스크롤 방향을 캐치해서 작동하는 경우도 있음

---

.자바스크립트의 데이터 타입

1. number
2. string
3. boolean
4. undefined
5. null
6. object
7. symbol
8. bigint

이중 7, 8은 비교적 최근에 생겼으며, 자주 사용되지 않는다.

 

Falsy

논리값으로 평가할때 false로 평가되는 값을 말한다. Falsy가 아닌 모든 값을 Truthy로 본다.

false, null, undefined, 0, NaN, ''

 

AND, OR

js에서 && 연산자는 왼쪽이 falsy이면 왼쪽을, 아니면 오른쪽을 반환한다. // 왼쪽이 거짓이면 반드시 거짓이므로.

|| 연산자는 왼쪽이 truthy이면 왼쪽을, 아니면 오른쪽을 반환한다. // 왼쪽이 참이면 반드시 참이므로

 

var? let? const?

var - 호이스팅, 함수 스코프, 중복선언 가능 등의 여러 이유로 현재는 사용하지 않는 것을 권장한다.

호이스팅?

선언 이전에 사용 가능한 특성

let - 블록 스코프, 일반적으로 생각하는 '변수'의 특징을 가짐

const - 상수의 특징을 가진다.

js는 특별한 경우가 아니면 변수도 const로 선언하는 것을 권장하는 듯 하다. 진짜 상수로 사용될 경우 대문자와 _를 사용해 나타낸다.

---

js에서 함수는 값으로 취급 가능하다. 즉, 변수에 할당이 가능하다.

 

함수 선언시 파라미터에 기본값을 지정할 수 있다.

function testFunc(para = 'default') {

  ...

}

 

이와 같은 형태로 지정 가능하며, 파라미터가 여러개여도 앞에서부터 채워지는 특성 상 기본값이 지정된 파라미터는 뒤쪽으로 밀어주는게 좋다.

 

js 함수에선 기본적으로 arguments라는 객체가 존재한다. 함수 호출 시 전달된 인자들을 유사배열로 모아둔 객체이다.

하지만 arguments 객체는 애로우펑션에서 사용할 수 없다던가, 유사배열이라 배열메소드를 사용할 수 없다는 단점이 존재한다. 따라서 rest parameter를 사용하는 것을 권장한다.

function testFunc(first, second, ...rest) {

  ...

}

이와 같이 사용하며, first와 second를 제외한 다른 모든 인자는 rest라는 배열에 담기게 된다.

 

익명 함수를 간결하게 표현하기 위해 애로우 펑션이 존재한다.

(first, second, ...rest) => { ... }

와 같은 형태로 사용한다.

 

파라미터가 하나 뿐일 경우

first => { ... }

로 축약이 가능하다.

 

동작이 return문 하나뿐일 경우

(first, second, ...rest) => first + second

와 같이 축약이 가능하다.

 

애로우 펑션에는 arguments 객체가 존재하지 않는다.

애로우 펑션에서 this를 사용 시 가장 최근에 사용된 this값이 출력된다.

 

this?

일반적으로 객체 내의 메소드를 정의할 때 사용한다. 이 경우 메소드를 호출한 객체를 가리키게 된다.

웹브라우저에서 사용시 전역객체인 window를 기본적으로 가리킨다.

 

삼항 연산자

조건부 연산자라고도 한다.

조건 ? true시 리턴 : false시 리턴 형태로 작성한다.

const msg = count === 1 ? '1입니다.' : '1이 아닙니다.';

 

Spread 구문

배열이나 객체를 풀어쓰거나, 복사할때 사용한다.

const first = [1, 2]

const second = [...first, 3]

// second = [1, 2, 3]

const third = [...first, ...second]

// third = [1,2,1,2,3]

const first = { name: 'jar', age: 14 }

const second = { ...first }

//second = { name: 'jar', age: 14 }

배열을 풀어서 객체에 넣으면 배열의 인덱스가 키로, 값이 값으로 들어간다.

 

객체의 프로퍼티를 만들 때 변수나 함수를 활용할 수 있다. 이 때 프로퍼티 네임과 변수/함수 이름이 같을 경우 축약이 가능하다.

const title = 'abcd'

const age = 14

function test() {

  ...

}

const obj = {

  title,

  age,

  test

}

메소드를 작성시에도 function 키워드를 생략할 수 있다.

const test = {

  getOne() {

    return 1;

  }

}

 

프로퍼티 네임에 대괄호를 이용해 표현식을 사용할 수 있다.

const propertyName = 'title'

const obj = {

  [propertyName]: 'abcd',

  ['a' + 'ge']: 14

}

 

destructuring

const arr = [1,2,3]
const [a, b, c] = arr;
// a=1, b=2, c=3

const obj = {
  title: 'abcd',
  age: 14
}
const {title, age} = obj
//title='abcd', age=14

let a='left'
let b='right'
[a, b] = [b, a]
//a='right', b='left'

destructuring 문법 사용 시 rest parameter와 기본값을 사용할 수 있음.

 

에러 발생 시 기본적으로 프로그램이 중단된다. 이런 에러가 발생할때 js는 에러 객체를 생성한다.

에러 객체에는 name과 message 프로퍼티가 존재한다.

new 키워드로 직접 에러를 만들 수 있다.

 

try ... catch ... finally로 에러를 직접 핸들링 할 수 있다.

try문 내에서 에러가 던져졌을 경우 catch문에서 해당 에러객체를 받아 작업을 한 뒤 finally문을 실행한다.

에러가 없으면 try문 이후 finally문이 실행된다.

---

배열 메소드

arr.forEach -> 첫번째 인자로 콜백함수를 전달한다. 배열의 각 요소를 순회하면서 콜백을 실행한다.

arr.forEach( (element, index, array) => {
  ...
});
// index, array는 생략 가능함.

 

arr.map -> 첫번째 인자로 콜백함수를 전달한다. 배열의 각 요소를 순회하면서 콜백을 실행한 후, 콜백의 리턴값들을 모아 새로운 배열을 만든다. 그 후 해당 배열을 리턴한다.

const arr2 = arr.map( e => e*2 );
//arr2는 arr의 요소에 2배를 한 요소들의 배열이 된다.

 

arr.filter -> 첫번째 인자로 콜백함수를 전달한다. 배열의 각 요소를 순회하면서 콜백함수의 리턴 조건과 일치하는 요소들을 모아 새로운 배열을 만든다. 그 후 해당 배열을 리턴한다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});
// (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

 

arr.find -> filter 함수와 비슷하지만, 조건에 일치하는 첫 요소를 찾으면 해당 요소를 반환한다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

 

arr.some -> find 함수와 비슷하게 작동한다. 조건을 만족하는 요소를 찾으면 true를 리턴하고 종료한다. 아니면 false를 리턴한다.

const numbers = [1, 3, 5, 7, 9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

console.log(someReturn); // true;

 

arr.every -> some과 반대로 작동한다. 조건을 불만족하는 요소를 찾으면 false를 리턴하고 종료한다. 아니면 true를 리턴한다.

const numbers = [1, 3, 5, 7, 9];

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

console.log(everyReturn); // false;

 

arr.reduce -> 첫번째로 콜백함수를, 두번째로 누산기의 초기값을 전달한다. 콜백 함수의 리턴값을 누산기에 전달한다. 모든 요소를 순회한 뒤 누산기의 값을 리턴한다.

const numbers = [1, 2, 3, 4];

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0);

console.log(sumAll); // 10

 

arr.sort -> 배열을 정렬한다. 인자를 전달하지 않으면 유니코드에 정의된 문자열 순서에 따라 정렬한다. 콜백의 리턴값이 음수라면 오름차순으로, 양수라면 내림차순으로, 0이라면 소팅하지 않는다.

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

 

arr.reverse -> 배열을 뒤집는다. 파라미터가 없다. 배열의 요소들의 순서를 역으로 바꾼다.

 

Map과 Set은 생략한다. 자세한 구조나 용도, 사용법에 관해선 mdn을 참조하자.