22일차

🐸

22일차

 

Part 4. JavaScript Level up

Ch 2. JS 데이터 실습

 

---

 

Ch 2. JS 데이터 실습

 

 

내용

 

 🔗 가져오기, 내보내기 

// main.js

import _ from "lodash";
import checkType from "./getType";
// import { random, user as heropy } from "./getRandom";
import * as R from "./getRandom";

console.log(_.camelCase("the hello world"));
console.log(checkType([1, 2, 3]));
// console.group(random(), random());
console.log(R);

 

// getRandom.js
// default 사용 안 했을 때

export function random() {
  return Math.floor(Math.random() * 10);
}
export const user = {
  name: "HEROPY",
  age: 85,
};
export default 123;

 

// getType.js
// default 사용 했을 때
// 2개 이상 정의 불가

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

 

 

 

 🔗 lodash 

https://lodash.com/docs/

Lodash Documentation

 

_.unipBy(): 하나의 배열 데이터를 고유화 (중복 제거)

_.unionBy(): 여러 개의 배열 데이터를 고유화 (중복 제거)

// main.js

import _ from "lodash";

const usersA = [
  { userId: "1", name: "HEROPY" },
  { userId: "2", name: "YUJIN" },
];

const usersB = [
  { userId: "1", name: "HEROPY" },
  { userId: "3", name: "GANG" },
];

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

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

 

 

_.find(): 배열에서 특정한 객체 찾기

_.findIndex(): 배열에서 특정한 객체 인덱스 찾기

_.remove(): 배열에서 특정한 객체 삭제

// main.js

import _ from "lodash";

const users = [
  { userId: "1", name: "one" },
  { userId: "2", name: "two" },
  { userId: "3", name: "three" },
  { userId: "4", name: "four" },
  { userId: "5", name: "five" },
];

const foundUser = _.find(users, { name: "three" });
const foundUserIndex = _.findIndex(users, { name: "three" });
console.log(foundUser);
console.log(foundUserIndex);

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

 

 

 

 🔗 JSON: 자바스크립트의 객체 표기법 

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

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

JSON은 {"키": 값} 형태로 작성해주어야 한다.

 

// main.js

import myData from "./myData.json";

console.log(myData);

const user = {
  name: "YUJIN",
  age: 23,
  emails: ["hyj@gamil.com", "hyj@naver.com"],
};
console.log("user", user);

// 객체를 JSON 형식(문자 데이터)으로
const str = JSON.stringify(user);
console.log("str", str);
console.log(typeof str);

// JSON 형식(문자 데이터)을 객체(실제 데이터)로 재조립
const obj = JSON.parse(str);
console.log("obj", obj);

 

JSON은 문자형이다.

 

 

 🔗 Storage 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

localStorage의 setItem은 문자 형식으로 값을 지정해주어야 한다.

 

// main.js

const user = {
  name: "YUJIN",
  age: 23,
  emails: ["hyj@gmail.com", "hyj@naver.com"],
};

// localStorage.setItem("user", JSON.stringify(user));
// console.log(JSON.parse(localStorage.getItem("user")));
// localStorage.removeItem("user");

const str = localStorage.getItem("user");
const obj = JSON.parse(str);
obj.age = 100;
console.log(obj);
localStorage.setItem("user", JSON.stringify(obj));

 

 

🔗 lowdb

https://github.com/typicode/lowdb

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

 

 

 🔗 OMDb API 

 

http://www.omdbapi.com/

OMDb API - The Open Movie Database

 

🔗 Query String

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

 

🔗 axios

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

axios
  .get() // 요청
  .then() // 응답 처리

 

// main.js

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();