[React] 강의 6주차 (3) -JS 데이터 (Javascript)

[국비지원교육]  [패스트캠퍼스] React 강의 6주차 (3) -JS 데이터 (Javascript)

[Javascript] 데이터 data

- 가져오기, 내보내기

- Lodash

- JSON

- Storage

- OMDb API 

---

1. 가져오기, 내보내기

import _ from 'lodash'
import checkType from './getType'
// import {random, user as adlog}  from './getRandom'
import * as R from './getRandom' // 모든것을 내가 지정한 이름으로 불러올 수 있다.

console.log(_.camelCase('the hello world')) //theHelloWorld
console.log(checkType([1,2,3])) //Array
// console.log(random(), random())
// console.log(adlog)
console.log(R) //{default: 123, user: {…}, __esModule: true, random: ƒ}

[getRandom.js]

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

export const user = {
    name: 'ADLOG',
    age: 100
}

export default 123

[getType.js]

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

 

 

2. Lodash 패키지 메소드

1) uniq  : 중복내용 제거하여 새로운 배열 출력

- uniqBy : 배열데이터가 1개일때 사용

- unionBy : 배열 데이터가 여러개 일때 사용

_.uniq([2, 1, 2]);
// => [2, 1]

_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

_.unionBy([2.1], [1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

 

[활용]

import _ from 'lodash'

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

const usersB = [
    {userId: '1', name: 'ADLOG'},
    {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)

 

2) find, findIndex, remove

 

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

 

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

 

 

[활용]

import _ from 'lodash'

const users = [
    {userId: '1', name: 'ADLOG'},
    {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: 'ADLOG'})
console.log(users) //(4) [{…}, {…}, {…}, {…}]

---

3. JSON

JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.

 

JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다.

1) 자료형과 문법 

[myData.json]
{
    "string": "ADLOG",
    "numver": 123,
    "boolean": true,
    "null": null,
    "object": {},
    "array": []
}

import myData from './myData.json'
console.log(myData) //{string: 'ADLOG', numver: 123, boolean: true, null: null, object: {…}, …}

const user = {
    name: 'ADLOG',
    age: 100,
    emails: [
        'adlog@gmail.com',
        'neo@gmail.com'
    ],
    companyName: {}
}
console.log('user', user) //{name: 'ADLOG', age: 100, emails: Array(2), companyName: {…}}

const str = JSON.stringify(user)
console.log('str', str) //str {"name":"ADLOG","age":100,"emails":["adlog@gmail.com","neo@gmail.com"],"companyName":{}}
console.log(typeof str) //string

const obj = JSON.parse(str)
console.log('obj', obj) //obj {name: 'ADLOG', age: 100, emails: Array(2), companyName: {…}}

---

4. Storage

- Local Storage (Window.localStorage)

인터페이스 의 localStorage읽기 전용 속성을 사용하면 의 원본 에 대한 개체에 window액세스할 수 있습니다 . 저장된 데이터는 브라우저 세션 간에 저장됩니다.StorageDocument

localStorage데이터에 만료 시간이 없지만 페이지 세션이 종료되면, 즉 페이지가 닫히면 데이터가 지워진다 는 sessionStorage점을 제외하면 와 유사합니다 . ( "프라이빗 브라우징" 또는 "시크릿" 세션에서 로드된 문서의 데이터는 마지막 "프라이빗" 탭이 닫히면 지워집니다.)localStoragesessionStoragelocalStorage

- Session Storage

// setItem : key, value 지정
localStorage.setItem('myCat', 'Tom');

// getItem : 가져올때 
const cat = localStorage.getItem('myCat');

// removeItem : 항목 을 제거
localStorage.removeItem('myCat');

const user = {
    name: 'ADLOG',
    age: 100,
    emails: [
        'adlog@gmail.com',
        'neo@gmail.com'
    ],
}


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

//console.log(localStorage.getItem('user')) // 문자로 가져오게됨
console.log(JSON.parse(localStorage.getItem('user')))

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 20;
console.log(obj) //{name: 'ADLOG', age: 20, emails: Array(2)}

localStorage.setItem('user', JSON.stringify(obj)) //age 데이터 갱신

 

5. OMDb API 

OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스이며 사이트의 모든 콘텐츠와 이미지는 사용자가 기여하고 유지 관리합니다.

 

1) api key를 받습니다.

 

2) 발급받은 키로 검색

https://www.omdbapi.com/?apikey=7035c60c&s=frozen 

 

3) axios 터미널에 설치

oddm@oddmui-MacBookPro js_test % npm i axios   

 

4) 활용

 

import axios from "axios"
function fetchMovies(){
    axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    .then((res) => {
        console.log(res)
    })
}
fetchMovies();

 

 

[html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main.js"></script>
</head>
<body>
    <h1>hello world!</h1>
    <h2>hello world~</h2>
    <ul></ul>
    <img src="" alt="">
</body>
</html>

import axios from "axios"
function fetchMovies(){
    axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    .then((res) => {
        console.log(res)
        const h1El = document.querySelector('h1')
        const imgEl = document.querySelector('img')
        h1El.textContent = res.data.Search[0].Title
        imgEl.src = res.data.Search[0].Poster

    })
}
fetchMovies();

---

[참고 사이트]

1) lodash 

https://lodash.com/docs/4.17.15#uniq

Lodash Documentation

 

2) JSON

https://ko.wikipedia.org/wiki/JSON

JSON - 위키백과, 우리 모두의 백과사전

 

3) localStorage

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

 

4) lowdb

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. (supports

 

5) OMDb API 

https://www.omdbapi.com/

OMDb API - The Open Movie Database

 

6) axios

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

 

[Javascript] 데이터 data API

- 가져오기, 내보내기

- Lodash

- JSON

- Storage

- OMDb API