[JS]230124 TIL: Chap 19 #1~2

강의 | Chap 19 JS 데이터 실습

#1. 가져오기, 내보내기

JS 파일은:

• 외부에서 다른 JS 데이터를 가져올(import) 수 있는 통로를 1개 가지고 있음.
  • import라는 키워드를 사용해서 가져옴
• 또한 데이터를 내보낼(export) 수 있는 2개의 통로를 가지고 있음
  • default export 기본 내보내기 (이름 설정 불필요)
  • named export

참고: default export를 쓴 예시.
(사실 저 뒤의 getType 이라는 함수(=데이터)명은 쓰지 않아도 된다. 기본 내보내기니까...)

내보내기를 하는 JS 파일은 모듈 module이라고 부른다.
모든 JS 파일은 모듈이 될 수 있다. 참고로 내보내는 통로가 막혀있더라도 모듈이 될 수 있음.

기본 내보내기 vs named 내보내기

1) 가져올 때의 서식

기본 내보내기

• 모듈에서 기본 내보내기된 데이터를 타 JS 파일(이를테면 main.js)로 가져올 때,
  내보내기 당시 함수명이 정해지지 않았기 때문에
  가져오는 파일에서는 해당 데이터의 이름을 뭘로 설정해도 상관이 없다.
  디렉토리만 잘 적어주면 된다.
• 기본 내보내기는 import A from './qwerty' 처럼 A라고만 써도 상관이 없다.
• 위의 getType.js 에서 가져온 데이터를 checkType으로 쓴 예시.
  

named 내보내기

• 모듈에서 named 내보내기된 데이터를 타 JS 파일(이를테면 main.js)로 가져올 때,
  내보내기 당시 함수명이 정해졌기 때문에
  해당 이름으로 불러와야 하고, 바꿔야 할 경우 import {A as B} (A가 원래 이름, B가 바꿀 이름)으로 써야 한다.
  (객체구조분해처럼 추출한 데이터를 A: B <- 이렇게 써서 이름을 변경할 수는 없다.)
• named(기명?) 내보내기는 {A}처럼 중괄호로 감싼 형태로 불러와야지 동작한다.
• 아래에서 차이점 확인하기.
  

2) 횟수

기본 내보내기는 하나의 파일 당 한 번만 내보낼 수 있다.
이름을 지정해야하는 named 내보내기는 같은 파일에서 여러 개 내보낼 수 있다.
여러 개 내보낼 때는 {A, B, C} 이런 식으로 묶을 수 있음.

전체 가져오기

한 문서 내 모든 내보내기 된 내용을 와일드카드 문자를 사용하여 모두! import 할 수 있다.

와일드카드 문자 Wildcard Character:

• 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호.
• * asterisk 기호를 사용한다.
  

#2. Lodash 사용법

현재(23/01/24) 최신 문서(뭐 있나 보기!)
https://lodash.com/docs/4.17.15

.uniq
lodash 내에서 종류별로 하나씩만 골라내는 기능.
.concat 을 사용하여 여러 배열을 합친 뒤,
.uniq로 종류별로 하나씩만 집어내면 중복 없는 하나의 배열 만들기 가능하다. (아래 참고)