[JS Level up][Ch2][데이터 실습] 가져오기, 내보내기

! *(에스터리스크)는 와일드카드(Wildcard Character)라고 부른다.

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

import

• import '사용자 지정 이름' from '설치한 패키지명'
  
  • 경로 없이 이름만 명시하면 node_modules 폴더에서 찾아서 가져옴
  • '사용자 지정 이름'으로 '설치한 패키지명' 활용하여 사용
• import '외부 데이터 이름 or 사용자 지정 이름' from '상대 경로'
  • 상대 경로에 위치한 외부 자바스크립트 파일을 가져와서 활용

// From 'node_modules'
// 경로 없이 이름만 명시하면 node_modules 폴더에서 찾아서 가져옴
import _ from 'lodash'    // lodash install 후 node_modules에서 가져와서 '_'라는 이름으로 main.js에서 활용하겠다.

// 상대경로를 통해서 외부의 특정한 자바스크립트 파일을 가져옴
import getType from './getType'               // 기본 통로를 통해서 가져오는 데이터
// default export : import checkType from './getType'과 같이 이름을 내맘대로 수정할 수 있다.

// 이름을 지정해야되는 통로에서 가져오는 데이터
// import { random, user } from './getRandom'    
// user as search : 꺼내올때는 user라는 이름으로 꺼내오고 활용할 떈 search 사용
// import { random, user as search } from './getRandom'
// * : random, user를 한꺼번에 꺼냄
import * as S from './getRandom'    

console.log(_.camelCase('the hello world'));
console.log(getType([1, 2, 3]));
console.log(S.random(), S.random());
console.log(S.user);

기본 통로에서 가져오는 데이터

이름을 내맘대로 수정할 수 있다.

import getType from './getType'               // 기본 통로를 통해서 가져오는 데이터
// default export : import checkType from './getType'과 같이 이름을 내맘대로 수정할 수 있다.

이름이 지정되어있는 통로에서 가져오는 데이터

// 방법 1
import { random, user } from './getRandom'    
// 방법 2. user as search : 꺼내올때는 user라는 이름으로 꺼내오고 활용할 떈 search 사용
import { random, user as search } from './getRandom'
// 방법 3. * : random, user를 한꺼번에 꺼냄
import * as S from './getRandom'

Export

• default export
  • 기본 통로로 데이터가 빠져나갈 수 있는 구조 -> 하나의 데이터만 내보낼 수 있다.
  • 따로 이름을 활용하지 않기 때문에 함수 이름을 지정하지 않아도 된다.

    export default function (data){     // 타입을 구분해줄 수 있는 함수
    // = export default function getType(data){
      return Object.prototype.toString.call(data).slice(8, -1);
    }

• named export
  • 이름이 지정된 통로로 나와야 하는 구조 -> 이름만 지정되어 있으면 모두 내보낼 수 있다. 

    // 이름이 지정된 통로로 나와야 하는 구조 -> 이름만 지정되어 있으면 모두 내보낼 수 있다.
    export function random() {
      // Math.floor : 소수점 이하 버림
      return Math.floor(Math.random() * 10);    // 랜덤한 정수 리턴
    }
    export const user = {
      name : 'searchkim',
      age : 29
    }
    // 기본 통로 / 이름이 지정된 통로 같이 사용할 수 있다.
    export default 123;