[FE 날개달기] event flow, array api, npm, module, webpack

프론트엔드 날개달기

 

 

이 포스팅에서 작성하는 내용은 프론트엔드 날개달기 에서 발췌하였습니다.

https://inf.run/MYzP

[무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의

 

---

Event Flow

• 이벤트의 전체 흐름 : 최상위 영역 → 타겟 영역 → 최상위 영역
  ex) html → body → main → div → span → div → main → body → html
• capturing : 최상위 영역 → 타겟 영역
• bubbling : 타겟 영역 → 최상위 영역
• Javascript의 기본 Event 흐름은 버블링(bubbling)
• Event.eventPhase
  • Event.None(0) : 이 이벤트는 처리 중이 아님
  • Event.CAPTURING_PHASE(1) : 이벤트가 부모 객체를 통해 전파 중
  • Event.AT_TARGET(2) : 이벤트가 이벤트 대상(타겟)에 도착
  • Event.BUBBLING_PHASE(3) : 이벤트가 역순으로 전파 중
• Event.stopPropagation() : 이벤트 전파 중지 method
• Event.preventDefault() : 기본 동작을 방해
  ex) a Tag no action

 

 

Array API

1) map()

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

const numbers = [1,2,3,4,5];
const result = nubmers.map((num) => num * 2);
console.log(result); 	// [2,4,6,8,10];

 

2) some()

배열의 어떤 요소라도 주어진 조건을 통과하는 지 테스트(하나라도 통과하면 true, 아니면 false)

const numbers = [1,2,3,4,5];
const result = nubmers.some((num) => num === 2);
console.log(result); 	// true

 

3) every()

배열의 모든 요소가 주어진 조건을 통과하는 지 테스트(하나라도 통과하지 못하면 false)

const numbers = [1,2,3,4,5];
const result = nubmers.every((num) => num === 2);
console.log(result); 	// false

 

4) filter()

배열의 각 요소에 대해 주어진 조건을 만족하는 요소들을 모아 새로운 배열로 반환

const numbers = [1,2,3,4,5];
const result = nubmers.filter((num) => num % 2 === 1);
console.log(result); 	// [1,3,5]

 

5) reduce()

배열의 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환

• 리듀서 함수 : 아래 4 개의 매개변수를 갖는 함수
  누적 값, 현재 값, 현재 인덱스, 원본 배열 
• 리듀서 함수의 반환 값은 누적 값에 할당되고 최종 결과는 누적 값이 됨

const numbers = [1,2,3,4,5];
const result = nubmers.reduce((acc, cur, idx, src) => {
    console.log("acc: ", acc, " cur: ", cur, " idx: ", idx);
    return acc + cur;
}, 0);
console.log(result); 	// 14

 

 

 

 

Module

• 기존 : <script> 태그를 이용해서 script 파일을 불러옴
  단점) 전역 스코프이기에 변수나 로직들이 스크립트들 사이에서 공유됨.
• module로 불러오면 변수나 로직들이 공유되지 않음
• module로 불러올 js 파일 안에서 export로 데이터를 내보내고 import에서 해당 데이터를 가져올 수 있음
• 같은 코드를 반복하지 않고 module로 분리시켜서 재활용 가능

ES Module 방식의 module 불러오는 방법

- 불러올 js 파일에서는 export를 사용해서 함수 or 변수를 내보낼 수 있음

- export default 를 사용해서 하나의 기본 함수를 내보낼 수 있음

<script type="module" src="module/index.js"></script>
OR
import * as indexJs from './index.js';

 

 

 

 

NPM(Node Package Manager)

• 모듈저장소에서 모듈을 쉽게 받을 수 있게 도와주는 도구
• npm을 사용하기 위해서는 Node.js 설치(npm이 자동으로 설치됨)
• package.json
  • 프로젝트에 대한 정보를 가지는 파일
  • 프로젝트에 의존된 라이브러리를 관리
  • npm init 명령어로 자동 생성 가능
• package-lock.json
  • 프로젝트에 설치된 모듈들의 의존성 트리를 기록하며, package-lock.json 파일을 참고하여 node_modules 디렉토리안에 모듈을 다운
• node_modules
  • package.json에 설치된 모듈 뿐만 아니라, package.json에 명시된 의존된 라이브러리(모듈)들이 설치된 장소

 

 

 

 

Webpack

• 여러 모듈을 하나로 묶는 작업을 번들링 이라고 함
• Webpack : 이러한 번들링을 도와주는 도구
• 여러 모듈을 하나로 묶는 이유?
  여러 모듈이 있으면 사용자의 입장에서 페이지 로드 시마다 여러 파일을 요청하게 되므로 너무 많은 네트워크 요청이 가기 때문.