JS LevelUp - Training

- import & export

• default export
  이름을 지어주지 않아도 되고
  import 시에도 원하는 이름으로 사용가능
  한번에 한가지만 export 가능함
• Named export
  이름을 지정해 주어야 하고
  여러개를 한번에 export가 가능함
  as를 이용해서 가져온 이름을 다르게 사용가능

*(와일드카드) 사용시 해당 export의 모든 데이터를 가져옴
as를 이용해서 원하는 이름으로 사용가능

- Lodash

• JacaScript의 대표적인 라이브러리

//concat
import _ from 'lodash' 
import getType from './getType'

const usersA = [
    { userId: '1', name: 'Hun'},
    { userId: '2', name: 'Neo'}
]

const usersB = [
    { userId: '1', name: 'Hun'},
    { userId: '3', name: 'Amy'}
]

const usersC = usersA.concat(usersB)
console.log('concat', usersC)
// 0: {userId: '1', name: 'Hun'}
// 1: {userID: '2', name: 'Neo'}
// 2: {userId: '1', name: 'Hun'}
// 3: {userID: '3', name: 'Amy'}
// 중복 발생

//uniqBy
console.log('uniqBy', _.uniqBy(usersC, 'userId'))
// usersC를 userID로 구분해서 고유한 값만 반환힘
// 0: {userId: '1', name: 'Hun'}
// 1: {userID: '2', name: 'Neo'}
// 2: {userID: '3', name: 'Amy'}

//unionBy
const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)
// 0: {userId: '1', name: 'Hun'}
// 1: {userId: '2', name: 'Neo'}
// 2: {userId: '3', name: 'Amy'}

// uniqBY는 배열이 한개 일때 사용하고
// unionBy는 배열이 여러개 일때 사용함

//find,findIndex
const users = [
    { userId: '1', name: 'Hun'},
    { userId: '2', name: 'Neo'},
    { userId: '3', name: 'Amy'},
    { userId: '4', name: 'Evan'},
    { userId: '5', name: 'Lewis'},
]

const foundUser = _.find(users, { name: 'Amy'})
const foundUserIndex = _.findIndex(users, {name: 'Amy'})
console.log(foundUser) //{userId: '3', name: 'Amy'}
console.log(foundUserIndex) //2

//객체 데이터 제거
_.remove(users, {name: 'Hun'})
console.log(users)
// 0: {userId: '2', name: 'Neo'}
// 1: {userId: '3', name: 'Amy'}
// 2: {userId: '4', name: 'Evan'}
// 3: {userId: '5', name: 'Lewis'}

- JSON

• JavaScript Object Notation
  자바스크립트의 데이터를 표현하는 하나의 포맷
  Object처럼 key:value의 형태이지만 문자 데이터
  사람이 읽을 수 있는 텍스트 사용
  js와 다르게 ""만 사용가능
  import로 가져오면서 일종의 객체 데이터 처럼 사용가능

//myData.json
{
    "string" : "abc",
    "number" : 123,
    "boolean" : true,
    "null" : null,
    "object": {},
    "array": []
}

• stringify, parse

const user = {
    name: 'hun',
    age: 50,
    emails: [
        'abc@gam',
        'asd@ads'
    ]
}

console.log('user', user) //객체로 출력

const str = JSON.stringify(user)//문자 데이터화 시켜줌

console.log('str', str) //{"name":"hun","age":50,"emails":["abc@gam","asd@ads"]}
console.log(typeof str)// string

const obj = JSON.parse(str) // 재조립
console.log('obj',obj) //재조립 하여 객체 형태가 됨
//{age: 50
//emails: (2) ['abc@gam', 'asd@ads']
//name: "hun"
//[[Prototype]]: Object}

- localStorage

const user = {
    name: 'hun',
    age: 50,
    emails: [
        'abc@gam',
        'asd@ads'
    ]
}
//생성
localStorage.setItem('user', user)
//실패
//일반적인 객체와 배열은 저장되지 않으므로 문자 데이터화 시켜서 저장한다

JSON.stringify(user) 
//문자 데이터화

localStorage.setItem('user', JSON.stringify(user))
//성공
//json형태의 문자 데이터

console.log(localStorage.getItem('user'))
// 문자 데이터

console.log(JSON.parse(localStorage.getItem('user')))
//다시 객체 데이터 화

--------------------------------------------------
//제거
localStorage.removeItem('user')

--------------------------------------------------
//수정
const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 200
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj)) 
// 문자데이터화 시켜서 저장