패스트 캠퍼스 MGS 3기 - 4월 27일(JavaScript 데이터 실습)

JY·2022년 4월 27일
0

💡 Keyword




1. 가져오기, 내보내기


  • Default export: 이름을 지정하지 않고도 내보낼 수 있다.
  • Named export: 이름을 지정하여 내보내야 한다.


getType.js, getRandom.js를 통해 내보내고, main.js에서 가져와서 사용하는 예제로 가져오기, 내보내기를 학습해보자.

Default export


export default라는 것은 기본 통로로 데이터가 빠져나갈 수 있는 구조이다. (데이터에 따로 이름을 지정하지 않아도 된다.)
불러와서 사용하는 곳에서 이름을 변경해서 사용할 수 있다. (getType -> checkType)

// getType.js

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

import checkType from './getType'

이름을 지정하지 않아도 되므로 굳이 함수명을 지정하지 않아도 된다.
마찬가지로 main.js에서 이름을 수정해서 사용할 수 있다.

// getRandom.js

export default function () {
  return Math.floor(Math.random() * 10)
}
// main.js

import random from './getRandom'

Named export


Default export는 가져와서 사용할 때 데이터 이름을 명시해서 사용하면 되지만 Named export는 {}로 묶어서 사용해야 한다.

// getRandom.js

export function random () {
  return Math.floor(Math.random() * 10)
}

export const user = {
  name: 'DY'
  age: 27
}

as를 사용해 가져올 때 이름을 수정해서 사용할 수 있다.

// main.js

import { random, user as DY } from './getRandom'
// 다음과 같이 getRandom.js에 있는 데이터를 한번에 가져올 수도 있다.
import * as R from './getRandom'

🤔 하나의 파일에서 하나의 통로만 사용해야 하나?
👉 NO!

하나의 파일에서 이름을 지정해야 하는 내보내기와 기본 내보내기를 함께 사용할 수 있다.
따라서 굳이 한 가지만을 고집할 필요는 없다!


차이점

🤔Default exportNamed export
이름 지정 여부
가져오기import random from './getRandom'import { random } from './getRandom'
하나의 파일에서 내보내기 개수1개이름만 지정한다면 개수 제한 없음

2. Lodash 사용법


ref: https://lodash.com/docs/4.17.15

.concat()

두 개의 배열 합치기

.uniqBy()

합친 배열에서 중복되는 부분을 제거하기
배열이 하나일 때 사용

.unionBy()

두 개의 배열을 고유하게(중복 제거) 합치기
배열이 여러 개일 때 사용

.find()

배열에서 찾아서 데이터 반환

.findIndex()

배열에서 찾아서 인덱스 번호 반환

.remove()

배열에서 찾아서 제거하기

3. JSON


서버와의 통신에서 데이터를 주고받는 하나의 포맷으로 사용된다.
.json이라는 확장자를 가지고 있는 하나의 파일로도 데이터를 만들 수 있다.

.stringify()

자바스크립트 파일에서 특정한 데이터를 JSON의 형태로 문자 데이터화 시켜주는 메소드이다.
인수로 자바스크립트에서 사용하는 모든 데이터를 넣을 수 있다.

.parse()

JSON의 형태로 문자 데이터화 된 데이터를 자바스크립트에서 사용할 수 있도록 재조립하는 메소드이다.

4. Storage


ref: https://developer.mozilla.org/ko/docs/Web/API/Storage

  • localStorage: 데이터가 만료되지 않는다.
  • sessionStorage: 페이지 세션이 끝날 때(브라우저를 닫을 때), 데이터가 만료된다.


👩‍💻 예제1. .setItem()

const user = {
  name: 'DY',
  age: 27,
  emails: [
    'qorhvmek@gmail.com',
    'wlqdprkrhtlvek@naver.com'
  ]
}

localStorage.setItem('user', user)

Value에 우리가 원하는 값이 들어가게 하려면 일반적으로 사용하는 데이터 형태(객체, 배열 등)가 아닌 문자 데이터로 바꿔줘야 한다.

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

실제로 저장된 내용은 json 형태의 문자 데이터지만, 클릭하면 우리가 보기 좋은 자바스크립트 데이터 형태로 출력해준다.

👩‍💻 예제2. .getItem()

다시 데이터를 가져와서 출력하려면

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

👩‍💻 예제3. .removeItem()

로컬 스토리지의 데이터를 삭제하고 싶다면

localStorage.removeItem('user')

👩‍💻 예제4. localStorage 데이터 수정하기

데이터를 가져오기 -> 코드 내에서 수정하기 -> 해당하는 Key의 이름으로 덮어쓰기

const user = {
  name: 'DY',
  age: 27,
  emails: [
    'qorhvmek@gmail.com',
    'wlqdprkrhtlvek@naver.com'
  ]
}

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 24
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj))

🤔 Lowdb
https://github.com/typicode/lowdb

  • 웹브라우저에서 사용할 수 있는 JSON 기반의 데이터베이스이다.
  • lodash 패키지를 기반으로 동작한다.

profile
🙋‍♀️

0개의 댓글