Javascript Data Practical

Import & Export 

자바스크립트에는 두가지 내보내는 옵션이 있다. 

export default ( 기본 통로 )

// getType.js 

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


// main.js

import whatever from './getType'

console.log(whatever([1,2,3]);

기본 통로는 몇가지 특징이 있는데, 하나의 파일(모듈)에서 하나의 데이터만 나갈 수가 있다. 그래서 예를 들면 getType 함수외에 다른 객체라던가 다른 데이터를 넘기려고 하면 에러가 나올 것이다. 그리고 import 할때 가져온 데이터를 원하는 이름으로 변경이 가능하다. 보통은 있는 그래도 쓰겠지만 사용자 마음대로 명명하여 사용 가능하다. 

export named ( 이름 지정 통로 ) 

// namedModule.js

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

export const user = {
  name : jeognmin,
  age : 26
}

// main.js 

import {random, user} from './namedModule.js'
import * as R from './namedModule.js'

console.log(random()); 
console.log(user);

이름 지정 통로는 하나의 파일(모듈)에서 여러 데이터를 내보낼 수 있다. 위 코드를 보면 알겠지만 함수와 객체 하나씩 있다. 

단 import 할때 가져오는 데이터들을 중괄호로 묶어줘야하고, 다른 이름으로 명명을 하고 싶으면 as 라는  키워드를 사용해서 

바꿔줘야합니다. 

 

---

Lodash

자바스크립트 인기 라이브러리 중에 하나이며, 여러가지 메소드를 가지고 있으며 내가 보고 있는 인강에서 사용을 권장해주셨다.

나중에 사용하면서 메소드를 하나하나 알아가야겠지만 실습하면서 사용해본 메소드를 적어보겠다.

 

https://lodash.com/

Lodash

import _ from './node_modules/lodash'

 

위에 접속해서 일단 npm으로 설치하든 Manual로 설치를 해준다음에 Import 를 해주면된다. 여기서 특이 사항은 알다시피 기본 통로로 import를 해왔으니 다른이름으로 사용할 수 있지만  '_'로 지정해서  _.method() 이런식으로 사용하는게 국룰인듯하다 그래서 이름이 'Lodash' 라고하는 것 같다.

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

const usersB = [
  { userId: '1', name: 'HEROPY'},
  { userID: '3', name: 'Amy'}
];

const usersC = usersA.concat(usersB)
console.log('concat', usersC);
console.log('uniqBy', _.uniqBy(usersC, 'userId'));

const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD);

const users = [
  { userId: '1', name: 'HEROPY'},
  { 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)
console.log(foundUserIndex)

_.remove(users, {name:'HEROPY'})
console.log(users)

일단 method하나하나 이름들이 직관적이라서 사용이 싶다. 객체에서 특정 속성이 겹친 key값을 넣어주면 알아서 걸러주고, 교집해주는 메소드 .find .findIndex 같은 메소드는 말안해도 단박에 알 수 있다. 특히 FE field에서 많이 쓰인다고하니 애용하도록 하겠다.

 

---

JSON

JSON(JavaScript Object Notation)은 속성-값 쌍 (attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다

JSON은 하나의 문자 데이터로만 관리가 된다. 자바스크립트 내의 특정데이터를 JSON(문자 데이터)화 시켜주는 메소드가 

const jsonFormat = JSON.stringify(data)

JSON 데이터를 자바스크립트에서 사용할 수 있는 데이터로 분석해서 재조립해주는 메소드가

const jsData = JSON.parse(jsonFormat)

---

Storage

Local Storage

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. 별도의 삭제를 하지않으면 도메인에 종속되어 계속 남아 있습니다. 

const info = {
  name : 'mimi',
  age : 14,
  emails: [
    'mimi@gmail.com',
    'wewontforgetu@naver.com'
  ]
}

localStorage.setItem('myDog', JSON.stringify(info));

const dog = localStorage.getItem('myDog');

console.log(JSON.parse(dog));

localStorage.removeItem('myDog');

localStorage.clear();

메소드는 간단하다. 총 4개 setItem, getItem, removeItem, clear 이렇게 있습니다. 원시데이터 저장시키는건 굉장히 쉬운데, 보다시피 객체를 할때는 그냥 바로 넣어버리면 객체라고는 인식은 하는데, 데이터를 보여주지않는다. 그래서 

객체같은 참조데이터들은 JSON.stringify 로 JSON화 시키고 넣어줘야 인식되고, 또한 다시 뺄때에도 parse()메소드로

자바스크립트화 시켜야한다. 

 

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser

lodash에서 만든(?) 스토리지관련 라이브러리인데 참고하라고 선생님께서 언급하셨다. 나중에 사용해보도록하겠다..

Session Storage

localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션
이 끝날 때 제거되는 차이가 있습니다.

---