JavaScript Level up
JS Data 실습
가져오기, 내보내기
//main.js
import getType from './getType'
import random from './getRandom'
//getType.js
//기본 통로로 data가 빠져나가는 구조
export default function (data) {
export default function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
}
//getRandom.js
export function random() {
return Math.floor(Math.random()*10);
}
export const user = {
name: 'bang',
age: 26
}
export default 123
- 기본 통로
하나의 파일에서 하나의 데이터만 내보낼 수 있다.
이름이 없어도 된다.
import로 가져오기 할 때 이름이 지정돼있지 않기 때문에 원하는 이름을 지정할 수 있다.
- 이름을 지정해야하는 통로
하나의 파일에서 여러개의 데이터를 내보낼 수 있다.
가져올 때 이름을 {} 로 묶어줘야한다.
import { random } from './getRandom'
여러 개를 가져올 수 있고 as를 사용해서 다른 이름으로 지정할 수 있다.
import { random, user as R } from './getRandom'
와일드카드(*)를 사용해서 전체를 지정한 이름으로 가져올 수 있다.
import * as R from './getRandom'
Lodash 사용법
import _ from 'lodash'
기본 통로 지정
-
_.uniq([배열])
배열에서 중복되는 데이터들은 없애고 새 배열 반환한다. -
_.uniqBy(객체 데이터, 구분할 고유 속성)
하나의 객체 데이터를 고유 속성으로 구분해서 중복 없이 반환한다. -
_.unionBy(객체1, 객체2, 구분할 고유 속성)
객체1과 객체2를 병합할 때 고유 속성을 기준으로 중복 없이 병합하여 반환한다. 병합해야할 객체 데이터가 여러 개일 때 사용한다. -
_.find(배열, { 속성: 값 })
해당 배열 데이터에서속성: 값부분과 일치하는 객체를 반환한다. -
_.findIndex(배열, { 속성: 값 })
해당 배열 데이터에서속성: 값부분과 일치하는 객체의 인덱스를 반환한다. -
_.remove(배열, { 속성: 값 } )
해당 배열 데이터에서속성: 값부분과 일치하는 객체를 삭제해서 반환한다.
JSON
속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 배당형 표준 포맷이다.
컴퓨터 프로그램의 변수값을 표현하는데 적합하다.
{ "attributeName": value, ... }
서버와의 통신에서 데이터를 주고 받는 포맷으로 사용한다.
파일 확장자는 .json이다.
문자 데이터는 큰 따옴표만 가능하다.
속성 명시할 때 꼭 큰 따옴표로 묶어서 활용해야한다.
기본적인 자료형 모두 가능하나 undefined는 사용할 수 없다.
json 파일은 모두 문자 데이터이다.
stringify
JSON.stringify(objectData);
js 파일에서 객체 데이터를 JSON형식(문자 데이터)으로 변환하는 메소드이다.
parse
JSON.parse(objectData)
JSON 형식을 js 파일에서 사용할 수 있게 객체 데이터로 변환하는 메소드이다.
Storage
- localStorage
하나의 사이트에 종속되어 관리되는 저장소이다.
localStroge의 데이터는 만료되지 않는다.
sessionStorage는 페이지를 닫으면 사라진다.
const user = {
name: 'Heropy',
age: 85,
email: 'aaa@naver.com'
};
//js파일에서 JSON형식으로 변환하여 localstorage로 보내기
localStorage.setItem('user', JSON.stringify(user));
//위에서 가져갔던 localstorage에서 다시 객체데이터로 변환해서
//js파일로 가져온 후 콘솔에 출력
console.log(JSON.parse(localStorage.getItem('user')));
-
데이터 저장하기
setItem() -
데이터 가져오기
getItem() -
데이터 삭제
removeItem() -
데이터 수정
const user = {
name: 'Heropy',
age: 85,
email: 'aaa@naver.com'
};
//localStorage에 있는 데이터를 가져와서 js에서 사용할 수 있게 객체 데이터로 변환
const str = localStorage.getItem('user');
const obj = JSON.parse(str);
//가져온 데이터를 수정
obj.age = 22;
//수정한 데이터를 다시 JSON데이터로 변환 후 내보내기
localStorage.setItem('user', JSON.stringify(obj));lowdb
lodash에서 제공하는 JSON 기반의 데이터베이스이다.
OMDB API
Query String
주소?속성=값&속성=값&속성=값
? 로 시작하는 속성=값 부분들이 query string이다.
속성과 속성 사이에 & 기호로 구분한다.
axios
HTTP 요청을 처리해주는 자바스크립트 패키지.
axios 사용해서 api 사용해보기
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();추가 공부
lowdb
lowdb 설치
npm install -s lowdb
사용법
- 선언
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');
const adapter = new FileSync('db.json');
const db = low(adapter);
* write() 까지 해야지 나의 수정사항이 반영된다.
- 기본 데이터 설정
db.defaults ({ posts: [], user: [], count: 0 })
.write()속성을 가진 테이블 생성해준다.
- 생성
db.get('user').push({
id: 11111,
name: 'bang',
age: 26
}).write()
데이터를 테이블에 추가한다.
- 조회
db.get('user')
.find({name: 'bang'})
.value()find() 안의 조건을 만족하는 데이터를 찾는다.
- 수정
db.get('user')
.find({id: 11111})
.assign({name: 'yeseo'})
.write()find() 안의 조건을 만족하는 데이터의 assing() 부분을 수정한다.
- 삭제
db.get('user')
.remove({id: 11111})
.write()remove() 안의 조건을 만족하는 데이터를 지운다.
axios
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다.
get, post 요청 할 수 있다.
