๐ธ
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
Lodash Documentation
_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti
lodash.com
_.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(์ ์ด์จ[1], JavaScript Object Notation)์ ์์ฑ-๊ฐ ์( attribute–value pairs and array data types (or any other serializable value)) ๋๋ "ํค-๊ฐ ์"์ผ๋ก ์ด๋ฃจ์ด์ง ๋ฐ์ดํฐ ์ค๋ธ์ ํธ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํด ์ธ๊ฐ์ด ์ฝ์ ์ ์
ko.wikipedia.org
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);
๐ Storage
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage ์ฝ๊ธฐ ์ ์ฉ ์์ฑ์ ์ฌ์ฉํ๋ฉด Document ์ถ์ฒ์ Storage ๊ฐ์ฒด์ ์ ๊ทผํ ์ ์์ต๋๋ค. ์ ์ฅํ ๋ฐ์ดํฐ๋ ๋ธ๋ผ์ฐ์ ์ธ์ ๊ฐ์ ๊ณต์ ๋ฉ๋๋ค.
developer.mozilla.org
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
Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser) - GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (s...
github.com
๐ OMDb API
OMDb API - The Open Movie Database
www.omdbapi.com
๐ Query String
์ฃผ์?์์ฑ=๊ฐ&์์ฑ=๊ฐ&์์ฑ=๊ฐ
๐ axios
https://github.com/axios/axios
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js
github.com
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();
'๐ฌ > ใ ใ ใ ใ ใ ใ ์ฑ๋ฆฐ์ง' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
24์ผ์ฐจ (0) | 2022.03.07 |
---|---|
23์ผ์ฐจ (0) | 2022.02.26 |
21์ผ์ฐจ (0) | 2022.02.20 |
20์ผ์ฐจ (0) | 2022.02.14 |
ใ ใ ใ ใ ใ ใ ์ฑ๋ฆฐ์ง ์คํจํ๋์,,,,,,,,, ๋ฐํํ,,,,,,,,,,,,,,,, ๐๐คฃ๐ ๐ฅ๐๐ข๐ญ๐ฒ๐จ๐ฐ๐ฑ๐ฅถ๐ฆ๐ฆ๐ฆ (0) | 2022.02.13 |