JS DATA

내보내기, 가져오기

Default export

내보내기

export default function test(num){console.log('test'+num+'번')};

한파일에 한번만 할 수 있다.

가져오기 다른 js 파일에서 사용하기

import 'test' from 'test.js';

test(2); // test2번

이름은 정하고 싶은데로 정해서 import 하여 사용할 수 있다.

Named export

내보내기

export function test(num){console.log('test'+num+'번')};
export const testNum = 12;

여러번 변수, 함수 등을 export 할 수 있다.

가져오기

import { test, testNum } from 'test.js';

test(testNum); // test12번

중괄호 안에 내보내기 된 함수 혹은 변수명을 적어 import 할 수 있다.

• 표기를 사용하여 한번에 전부 import 할 수 있다.

import * from 'test.js';

default, named export

named export 를 여러개 사용하고 default export 를 한번 사용하는 형식으로 함께 사용 가능하다.

lodash

설치

npm i lodash

설정

import _ from 'lodash';

사용

_.uniqBy(객체배열, 객체의 중복키값)

: 배열안의 객체 중 중복된 객체를 제거해준다.

_.unionBy(객체배열A, 객체배열B, 객체의 중복키값)

: 두개의 배열을 합치고 중복된 객체를 제거해준다.

_.find(객체배열, {name: 'Amy'})

: 조건을 갖은 객체를 찾아서 리턴. ( 가장 먼저 찾은 하나만 리턴한다. )

_.findIndex(객체배열, {name: 'Amy'})

: 조건에 맞는 객체의 index를 리턴한다. ( 가장 먼저 찾은 하나의 index 만 리턴한다. )

_.remove(객체배열, {name: 'Amy'})

: 조건에 맞는 객체를 제거한다.( 조건에 해당하는 모든 객체를 제거한다. )

json

json

data를 가져오는 형식

{ "name" : "lee",
  "age" : 20,
  "todo" : [
    "운동하기",
    "코딩하기"
	]
}

json 형태로 받아와 변수에 넣고 사용.

변환해서 사용하기

받아온 json을 data라는 변수에 담고

const str = JSON.stringify(data);

: JSON을 string 으로 변환

const obj = JSON.parse(str);

: string으로 바뀐 json data를 obj(객체)로 바꾸어 js에서 객체로 사용.

Storage

local storage

데이터를 저장하고 브라우저 세션간에 공유한다.

session storage

데이터를 저장했다가 페이지 세션이 종료될 때, 즉 페이지를 닫을 때 사라진다.

storage 사용

localStorage.setItem(key값, value값);

: storage에 key:value 형태로 저장

localStorage.getItem(key값);

: storage에서 key값으로 value값 출력

localStorage.removeItem(key값);

: storage에서 key값으로 제거하기

☝🏽 storage에 value 값으로 저장하기 위해서는 문자화 시켜서 저장해야한다.

: 문자화 -> JSON.stringify(value)

☝🏽 storage에서 가져온 객체 value 값은 객체화 시켜서 사용한다.

: 객체화 -> JSON.parse(value)

lowdb 활용하기

OMDb API

Query String

기본구성

주소?속성=값&속성=값&속성=값

axios

http 요청을 처리해주는 js 패키지

npm i axios

import axios from 'axios';

요청해서 json 데이터 받고 출력하기

const url = "https://www.omdbapi.com/?apikey=7035c60c&s=frozen";
function fetchData(url){
  axios
    .get(url)
    .then((res)=>{
    const dataArr = res.data.search;
    console.log(dataArr[0].title); //frozen
  })
}

fetchData(url);