🌲 개발자도구의 Local Storage와 Session Storage

...저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는sessionStorage와 비슷하지만,localStorage의 데이터는 만료되지 않고sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. (출처 MDN)

✅ 다음의 객체 데이터를 Local Storage에 넣어보자.

const user = { 
  name : 'kim', 
  age : 99, 
  email : [
    'siot@mail.com',
    'second@mail.com'
  ]
}

📍 Local Storage에 keyvalue값을 넣는 메소드 setItem()

*작은 따옴표 주의

localStorage.setItem('user', user)

아래와 같이 object로 입력된다.

📍 JS데이터를 문자데이터화 시켜주는 명령 JSON.stringify()을 사용하면

localStorage.setItem('user', JSON.stringify(user))

value값이 JSON형태의 문자데이터로 저장되고 목록을 클릭하면 아래부분에 js데이터로 출력된다.

📍 Local Storage에서 값을 가져와보자 getItem()

console.log(localStorage.getItem('user'))

문자데이터로 저장되었기 때문에 console에도 JSON형태의 문자데이터로 출력된다.

📍 JSON형태의 문자데이터를 JS형태의 데이터로 JSON.parse()

console.log(JSON.parse(localStorage.getItem('user')))

📍 LocalStorage에 있는 데이터 지우기 removeItem()

*removeItem을 하지 않는 이상 코드에서 삭제해도 Application의 local Storage에는 데이터가 남아있다.

📍 LocalStorage 데이터 변경하기

로컬스토리지에서 데이터를 가져온 다음, 새로운 값을 주고 다시 로컬스토리지에 데이터를 넣는다.

const str = localStorage.getItem('user') // 로컬스토리지에서 가져오기
const obj = JSON.parse(str) // 로컬스토리지에서 js데이터로 가져오기
user.age = 100 // age에 값 100 할당
localStorage.setItem('user', JSON.stringify(user)) // 로컬스토리지에 JSON형태로 넣기

📍 lodash 패키지 lowdb 이용해 데이터를 변경하는 방법

🌲 모듈 내보내기 & 불러오기

export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

• default export
• named export

🚨 default export

이름을 지정하지 않거나 변경해도 되는 이유는 하나의 데이터만 담겨 있기 때문이다.

📍 기본 통로로 나가는 데이터는 이름을 지정할 필요가 없다.

📍  import시 이름을 마음대로 지정 가능

🚨 named export

📍 불러올 때 정확한 함수이름과 중괄호 안에 적어야 한다.

import {random} from '경로'

📍 여러 개의 데이터 불러오기

import {random, user} from '경로'

📍 이름 변경하는 방법

(as 키워드를 사용)

📍 모든 데이터 불러오기

*와일드카드 Wildcard Character, * aesterisk : 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호

*deault export와 named export는 하나의 파일에서 함께 사용할 수도 있다.

🌲 Lodash 메소드

🚨 고유 값 찾기

📍 합쳐진 데이터에서 고유 값을 찾을 때

  _.uniqBy(데이터, '속성')  

✅ .concat()으로 병합 후 _.uniqBy()에서 내부 중복데이터를 제거하고 고유한 값만 남겨 새로운 데이터를 반환

import _ from 'lodash'

const userA = [
  { userId: '1', name: 'rose'},
  { userId: '2', name: 'vanilla'}
]
const userB = [
  { userId: '1', name: 'rose'},
  { userId: '3', name: 'coffee'}
]
const userC = userA.concat(userB) // 두 개의 배열 데이터 병합
console.log('concat', userC)
console.log('uniqBy', _.uniqBy(userC, 'userId')) // 중복 데이터 제거

📍 데이터를 합친 후 고유 값을 찾을 때

  _.unionBy(데이터, 데이터, '속성')  

import _ from 'lodash'

const usersA = [
  { userId: '1', name: 'rose'},
  { userId: '2', name: 'vanilla'}
]
const usersB = [
  { userId: '1', name: 'rose'},
  { userId: '3', name: 'coffee'}
  
const usersD = _.unionBy(usersA, usersB, 'userId') // 합친 후 고유값 내보내기
console.log('unionBy', usersD)

🚨 수많은 데이터 중 원하는 데이터를 찾거나 삭제할 때

_.find(인수1, 인수2)

_.findIndex(인수1, 인수2)

_.remove(인수1, 인수2)

import _ from 'lodash'

const users = [
  { userId: '1', name: 'rose'},
  { userId: '2', name: 'vanilla'},
  { userId: '3', name: 'coffee'},
  { userId: '4', name: 'latte'},
  { userId: '5', name: 'milk'}
]

const foundUser = _.find(users, { name: 'rose' }) //찾기
const founduserIndex = _.findIndex(users, { name: 'rose' }) //찾아서 인덱싱하기
console.log(foundUser)
console.log(founduserIndex)

_.remove(users, { name: 'rose' }) //제거하기
console.log(users)

🌲 데이터 얕은 복사와 깊은 복사 (shallow, deep copy)

🚨 참조형 데이터를 새로운 변수에 할당 시 문제점

const user = { 
  name : 'kim', 
  age : 99, 
  email : 'siot@mail.com' 
}
const copyUser = user // 복사
console.log(copyUser === user) // true

user.age = 22
console.log('user', user.age) // user 22
console.log('copyUser', copyUser.age) // copyUser 22

메모리 주소를 참조하기 때문에 value값이 변경되면 주소를 참조한 데이터 모두 변경된다.

🚨 참조형 데이터 복사 방법

• 새로운 메모리 주소로 복사
• 전개연산자로 복사
• 얕은 복사 시 문제점
• 모든 데이터 복사방법 deep copy

✅ 새로운 메모리 주소로 복사

Object.assign({}, 출처객체)

assign메소드에서 대상객체에 빈 객체를 넣어 새로운 메모리 주소로 복사하는 방법

const user = { 
  name : 'kim', 
  age : 99, 
  emails : 'siot@mail.com' 
}
const copyUser = Object.assign({}, user)
console.log(copyUser === user) // false

user.age = 22
console.log('user', user.age) // 22
console.log('copyUser', copyUser.age) // 99

✅ 전개연산자를 활용

const user = { 
  name : 'kim', 
  age : 99, 
  emails : 'siot@mail.com' 
}
const copyUser = {...user} // 전개 연산자
console.log(copyUser === user) // false

user.age = 22
console.log('user', user) // 22
console.log('copyUser', copyUser) // 33

❎ 참조형 데이터의 얕은 복사 시 문제점

변수 user안에 배열데이터 emails는 복사되지 않는다. 껍데기만 복사되고 내부 내용(가변)은 참조되는 상황 발생

const user = { 
  name : 'kim', 
  age : 99, 
  emails : ['siot@mail.com']
}
const copyUser = {...user}
console.log(copyUser === user) // false

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

user.emails.push(('second@mail.com'))
console.log(user.emails === copyUser.emails) // true
console.log('user', user)
console.log('copyUser', copyUser)

✅ 모든 데이터 복사방법 (lodash패키지)

1. lodash 설치

npm i lodash

2. lodash import

import _ from 'lodash' // js파일은 확장자 생략 가능

3. lodash 재귀함수를 이용한 재귀적 값 복사  재귀링크  lodash의 cloneDeep 링크

*재귀 : 하나의 데이터 안에서 반복적으로 실행하며 모든 값을 복제

import _ from 'lodash'

const user = { 
  name : 'kim', 
  age : 99, 
  emails : ['siot@mail.com']
}
const copyUser = _.cloneDeep(user)
console.log(copyUser === user) // false

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

user.emails.push(('second@mail.com'))
console.log(user.emails === copyUser.emails) // false
console.log('user', user)
console.log('copyUser', copyUser)

🌲 데이터 불변성 Immutability

ㄴ 원시 데이터 Primitive Type : String, Number, Boolean, Null, Undefined

ㄴ 참조형 데이터 Reference Type : Object, Array, Function(콜백)

🚨 원시 데이터

원시데이터가 기존 메모리 주소에 있다면, 새로운 메모리 주소에 할당되지 않는다.

기존의 메모리 데이터는 불변하며 같게 생겼으면 같다고 이해하는 편이 쉬움

let a = 1
let b = 4
console.log(a, b, a === b) // 1, 4, false
b = a
console.log(a, b, a === b) // 1, 1, true
a = 7
console.log(a, b, a === b) // 7, 1, false
let c = 1
console.log(b, c, b === c) // 1, 1, true

🚨 참조형 데이터

같은 메모리 주소라면 값이 같아진다. 할당 연산자(=) 사용 시 복사가 아닌 메모리 주소만 참조하는 것 

데이터를 새로 할당할 때마다 메모리 주소를 새로 생성한다. 값이 같아보여도 같지 않음 

let a = { k: 1 }
let b = { k: 1 }
console.log(a, b, a === b) // { k: 1 }, { k: 1 }, false
a.k = 7
b = a
console.log(a, b, a === b) // { k: 7 }, { k: 7 }, true
a.k = 2
console.log(a, b, a === b) // { k: 2 }, { k: 2 }, true
let c = b
console.log(b, c, b === c) // { k: 2 }, { k: 2 }, true