📕데이터 실습하기

1. import

default로 나가는 경우에는 이름을 지정하지 않아도 된다.
그래서 import할때 이름을 맘대로 할 수 있다.

getRrandom.js를 import

default 지우면 이름을 명시해줘야 한다.

getRandom.js에 함수 추가

❗default는 1번만 사용 가능하다.

함수를 만들때 이름을 지정해주지 않으면 이름 변경 가능
console.log(hoseon);

*를 사용하면 모든 내용을 불러온다.

2. lodash 사용법

1. uniq

_.uniqBy(데이터, 기준값)
_.unionBy(데이터, 기준값)

먼저 concat을 이용해서 합친다.

userId를 기준으로 중복된 데이터 지우기

중복된 hoseon이 지워진다.

중복을 비교할 대상이 1개일때는 uniq를 사용
중복을 비교할 대상이 2개 이상일 때는 unionBy를 사용

2. find

특정 값을 찾아준다.

_.find(collection, [찾을 조건])
_.findIndex(collection, {찾을 조건})	

3. json

json이라는 파일은 문자 데이터이다

1. JSON.stringify

문자데이터로 변경해주는 것

console.log(JSON.stringify({ x: 5, y: 6 }));

2. JSON.parse

다시 json 형식으로 변경해주는 것 이다.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

4. Storage

❗스토리지에는 로컬 스토리지와, 세션 스토리지가 있다

무슨 차이가 있을까?

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.

Local Storage

일반적인 방법으로 저장하면 안된다.
문자형으로 넣어줘야한다.

local storage에 있는 데이터를 가지고 오기

• 수정하기

• 삭제하기

5. OMDb API

다음은 OMDb API를 이용해 영화정보를 가지고 오는 페이지를 만들어 보자.

❗uery String이란?

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

먼저 MDb API를 검색한다.

고유한 키를 사용하니 각자 키를 받도록한다.

JSON 데이터로 이루어져 있다.

• axios 사용

axios를 설치해준다.

package.json에서 잘 설치 됐는지 확인

axios import 하기

axios를 이용해 OMDb API에서 겨울왕국 영화 정보를 가지고 온다.

간단하게 html을 작성하고

잘 출력되는지 확인.