모듈

초기 자바스크립트는 기능도 작고 단순했기때문에 모듈이란 개념이 없었습니다.
하지만 규모가 커지고 복잡해지면서 여러개로 분리해야할 시점이 오면서 모듈이란 개념이 생겼습니다.

과거에는 AMD , CommonJS , UMD 와 같은 모듈 시스템이 있었지만 현재 모던 자바스크립트 에선
그 기능들이 표준으로 등재되었습니다.
즉 자바스크립트파일은 그 자체로 모듈이고 언제든지 다른 JS파일로 내보내고 불러올수 있습니다.

내보내기

Named export

우선 내보내는 방법은 Named 와 default 가 있습니다.
Named 는 말 그대로 이름을 붙여서 내보내는 겁니다.

내보내기는 함수, 객체, 원시값 모두 사용이 가능합니다.

export {sayHi,sayBye}

function sayHi(){
  console.log('hi');
}

function sayBye(){
  console.log('Bye');
}

// export {sayHi,sayBye}      // 맨 아래에 선언할수도 있음

기본적으로는 export {} 방식으로 보냅니다.
또한 as 키워드를 사용해 이름을 바꿔 export 할수도 있고 import 때도 사용이 가능합니다.

{sayHi as hi,sayBye}   //sayHi 를 hi 로 바꿔서 내보냄

원하는 코드마다 export 할수도 있죠

export function sayHi(){                
  console.log('hi');
}				// export 는 여러번 쓸수 있다.

export function sayBye(){
  console.log('bye');
}

Default export

Default export는 한가지의 데이터를 내보냅니다. 즉 정확히 무엇을 내보낼지 정해져있기때문에 이름을 정할 필요도 없고 정해져있어도 import 단에서 바꿔 쓸수 있습니다.

export default             

 function sayHi(){                   // 가장 처음 만나는 함수 지정
  console.log('hi');
}
 function sayBye(){
  console.log('bye');
}

export default 가 선언되고 제일 먼저 만나는 데이터를 내보냅니다.
단 export default 는 함수나 클래스 만 인식하며 다른 데이터를 만나면 오류가 발생합니다.

export default      

let month =[1,2,3,4,5,6,7,8,9];      // 오류 발생
 function sayHi(){                  
  console.log('hi');
}
 function sayBye(){
  console.log('bye');
}

보통 export default 는 함수나 클래스가 한개만 존재하는 JS 파일에서 사용되며
import 할때 이름을 자유롭게 정할수 있다는 장점이 있습니다.
하지만 반대로 말하면 내보내기 와 가져오기 의 이름이 달라 혼란이 생길수도 있기 때문에
팀원과의 규칙을 잘 정하거나 Named export 만 사용하는것도 한 방법입니다.

가져오기

무언가를 가져오려면 export 된 값들을 import 해줘야합니다.

import {sayHi} from './sayhi.js'
sayHi();       // hi

Named export 를 가져올때는 해당하는 이름을 가져와야하며 중괄호를 꼭 써줘야합니다.
만약 export default 를 가져오게 되면 중괄호를 쓰지않고 원하는 이름을 적습니다.

또 가져올것들이 너무 많을때는 import * as <obj> 방법을 쓸수 있는데
export 된 것들을 객체로 만들어서 한번에 import 하는 방법입니다.

lodash

로대쉬는 자바스크립트 외부 라이브러리 입니다.
자바스크립트 엔진에서 지원하지 않는 다양한 메서드를 지원하고 있기때문에
데이터들을 아주 쉽게 다룰수 있습니다.

lodash 를 사용하려면 라이브러리 에서 import 해줘야 합니다.import _ from 'lodash'
그럼 자주 사용하는 함수들을 간단하게 알아보겠습니다.

_.uniqBy(배열,값)

_.uniqBy 는 중복된 배열데이터를 없애는데 사용됩니다.

let arr = [
  {id:1,key:'a'},{id:1,key:'b'},{id:2,key:'b'}]

let result = _.uniqBy(arr,'id');
console.log(result);                      // 0: {id: 1, key: "a"}
					  // 1: {id: 2,key: "b"}
					  // length: 2

만약 중복된 값이 있으면 앞 객체를 살리고 뒤 객체를 지웁니다.

_.unionBy(arrys,기준값)

만약 아직 중복된 객체는 없고 합치기 전이라면 _.unionBy 를 쓸수 있습니다.
중복된 데이터는 지우고 새로운 배열로 반환합니다.

const group1 = [{name:'Elon'},{name:'Tim'}]
const group2 = [{name:'Lisa'},{name:'Elon'}]
const regroup= _.unionBy(group1,group2,'name');
console.log(regroup);               //0: {name: "Elon"}
				    //1: {name: "Tim"}
				    //2: {name: "Lisa"}		

.find(arr,property) , .findidex(arr,property)

배열 안의 있는 객체를 찾을떄 유용합니다.

const user = [
  {id:1, name:'Elon'},
  {id:2, name:'Tim'},
  {id:3, name:'Lisa'},
  {id:4, name:'Mark'},
  {id:5, name:'Tim'},
]
console.log(_.find(user,{name:'Lisa'}));        // {id: 3, name: "Lisa"}
console.log(_.findIndex(user,{name:'Lisa'}));  //  2

JSON

• JSON (JavaScript Object Notation)이란 프로그램언어와 플랫폼에 종속되지않는
  키 : 값을 전송할수 있는 표준포맷 입니다.
• 자바스크립트의 문법을 기준으로 만들어 졌습니다.
• 모든 값을 문자화 하고 가볍기 때문에 통신에 사용됩니다.
  JSON.stringify - 객체를 JSON으로 바꿔줍니다.
  JSON.parse - JSON을 객체로 바꿔줍니다.