[JavaScript] 이벤트 전파(버블링&캡처링), ArrayAPIs, JS 모듈 시스템

2022-09-03

프론트엔드 날개달기 : Vuejs, React 배우기 전에 꼭 알아야하는 지식

섹션 2 (1)

이벤트 전파 (버블링, 캡처링)
JS의 유용한 Array APIs
JavaScript 모듈 시스템

이벤트 전파 (버블링, 캡처링)

캡처링

이벤트가 상위 요소에서 하위 요소로 전달되며 하위 요소의 핸들러가 동작

* addEventListener의 boolean 에 true 설정을 하면 캡처링을 실행할 수 있다

버블링

한 요소에 이벤트가 발생했을 시 이벤트가 하위 요소에서 상위 요소로 전달되며 최상단의 요소를 만날 때까지 모든 요소의 핸들러가 동작

이벤트 전파를 막으려면 ?

//event 객체 내에서
event.stopPropagation(); // 버블링을 막는다
event.stopImmediatePropagation(); // 동일한 요소의 다른 핸들러 실행까지 방지한다

기본 동작을 막으려면 ?

//event 객체 내에서
event.preventDefault();

ex)

a 태그에 onclick 이벤트를 추가한 경우, a 태그의 고유속성인 href와 onclick 이벤트가 동시 동작하여 페이지가 새로고침된다. 이러한 경우, preventDefault를 사용하여 이벤트가 정삭작동하도록 할 수 있다

form에서 submit 행위를 했을 때 기본적으로 일어나는 새로고침을 방지할 수 있다

JS의 유용한 Array APIs

map()

배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환

"use strict";

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

const result = numbers.map(function(number){
    return number*2;
})

console.log(result); // [2, 4, 6, 8, 10]

some()

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는 지 테스트

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

const result = numbers.some((number) => number%2 === 0)

console.log(result); // true

다음과 같이 모든 요소가 판별 함수의 조건을 만족하지 못하면, false 반환

const numbers = [1, 3, 5];

const result = numbers.some((number) => number%2 === 0)

console.log(result); // false

every()

배열 안의 모든 요소가 판별 함수를 통과하는 지 검사 (하나라도 통과하지 못하면 false)

const numbers = [1, 3, 5];

const result = numbers.every(num => num < 10)

console.log(result); // true

filter()

주어진 함수의 판별을 통과하는 모든 요소를 모아 새로운 배열로 반환

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers.filter(num => num % 2 === 1)

console.log(result); // [1, 3, 5, 7 ,9]

reduce()

배열의 각 요소에 대해 주어진 함수를 실행 후 하나의 결과 반환

매개변수 : 누적값 acc, 현재값 cur, 현재 인덱스 idx, 원본 배열 src

reduce 사용하여 중복값 제거

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

const result = numbers.reduce((acc, cur) => {
    if (acc.includes(cur) === false){
        acc.push(cur);
    }
    return acc;
},[])

console.log(result); // [1, 2, 3, 4, 5]

JavaScript 모듈 시스템

script 태그를 사용하여 js 파일을 여러 개 불러올 경우, 여러 개의 문서가 전역 스코프를 공유한다는 문제점이 생긴다. 따라서, 이름이 같은 변수가 있으면 덮어씌워지는 문제가 발생한다. 따라서, 파일을 독립적으로 분리하기 위해서는 모듈 시스템을 사용해야 한다.

기능들이 모듈화가 잘 되어있을 경우, 코드의 의존성이 감소하여 유지보수가 용이하며, 분리된 모듈들은 각각의 네임스페이스를 갖기에, 같은 이름의 변수가 존재해도 문제가 발생하지 않는다. 또한, 같은 코드를 반복하지 않아도 되어, 재사용성이 증가한다.

ES Module

ES6에 도입된 JS 모듈 시스템
script 태그에 type = ‘module’ 을 추가하면 해당 파일을 모듈로 동작하도록 할 수 있다
모듈을 외부에서 사용할 수 있도록 내보낼 때에는 export (default) 를 사용하며, 외부에서 모듈을 불러올 때에는 import를 사용한다.

* node 에서 ES module을 사용하려면 json 파일에 type: module 을 설정해주어야 한다

export

math.js

export const perfectScore = 100;

export const sum = (num1, num2) => {
    return num1 + num2;
};

export const avg = (num1, num2) => {
    return (num1 + num2) / 2;
};

index.js

import {perfectScore, sum, avg} from './math.js'

console.log('perfectScore: ', perfectScore);
console.log('sum: ', sum(80, 10));
console.log('avg: ', avg(80, 90));

index.html

<script type="module" src="index.js"></script>

<!--
perfectScore: 100
sum: 90
avg: 85
-->

export default

const subtrack = (num1, num2) => {
    return num1 - num2;
};

export default subtract;

위와 같이 default 로 설정한 경우, 다음과 같이 import할 때 바로 함수를 받아올 수 있다

import {perfectScore, sum, avg} from './math.js'
import subtract from './math.js'

console.log('perfectScore: ', perfectScore);
console.log('sum: ', sum(80, 10));
console.log('avg: ', avg(80, 90));
console.log('subtract: ', subtract(80, 90));

CommonJS

NodeJS 환경에서 JS 모듈을 사용하기 위해 만들어졌으며, 모듈을 외부에서 사용하도록 내보낼 때에는 exports, module.exports 를 사용하며, 외부에서 모듈을 불러올 때에는 require을 사용한다