6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3

JS 데이터 실습 가져오기, 내보내기

JS파일은 외부에 있는 다른 JS파일을 가지고 올 수 있는 하나의 통로를 가지고 있음

대표적으로 import라는 키워드를 통해서 외부에 있는 다른 JS 가져오는 문법을 작성을 함

JS파일은 안에 있는 특정 내용을 내보낼 수 있는 2개의 통로를 가지고 있음

Default export라고 해서 이름을 따로 지정하지 않아도 되는 기본통로가 있고

Named export라고 해서 이름을 꼭 지정해야 되는 통로가 있음

이름을 따로 지정할 필요가 없는 통로를 사용할 때는 export 키워드와 함께 default라는 키워드를 사용할 수 있음

그러면 따로 데이터에 이름을 설정하지 않아도 됨

import _ from "lodash"; //From `node_modules`
//lodash를 npm으로 설치해서 import키워드로 node_modules폴더에서 가져와서
//_이름의 기호에 이름으로 main.js에서 활용히겠다고 선언

import getType from "./getType"; //getType.js
//상대경로를 이용해서 가져와 활용할수 있음
//import 뒤에 이름은 마음대로 변경 가능
import { random, user as he } from "./getRandom";
//이름이 지정된 통로로 나오는 데이터는 데이터를 {}중괄호로 묶어서 사용해야함
//as를 사용하여 user를 he로 사용할 수 있음

import * as R from "./getRandom";
//한번에 가져올 때 

---------------------------------------------------------------------------
export function random() {
  //export 이름이 필요한 통로로 빠져나가는 방법
  return Math.floor(Math.random() * 10);
}

---------------------------------------------------------------------------
export default function getType(data) {
  //export default 기본통로로 데이터가 빠져나갈 수 있는 구조
  //데이터에 따로 이름을 지정할 필요가 없음
  //즉 위에 이름인 getType을 지워도 정상적으로 잘 실행됨
  //기본통로는 하나의 데이터만 내보낼 수 있음
  return Object.prototype.toString.call(data).slice(8, -1);
}

* 즉, 와일드카드(Wildcard Character)는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킴

---

Lodash 사용법

https://lodash.com/docs/4.17.15

Lodash Documentation

import _ from "lodash";

const usersA = [
  { userId: "1", name: "H.E" },
  { userId: "2", name: "Lee" },
];
const usersB = [
  { userId: "1", name: "H.E" },
  { userId: "3", name: "Kim" },
];
const usersC = usersA.concat(usersB);
//concat을 사용하면 두개의 배열 데이터를 합쳐서 새로운 배열 데이터를 반환
console.log("concat", usersC);
console.log("uniqBy", _.uniqBy(usersC, "userId"));
//중복되어 있는 데이터에 중복되는 데이터 제거

const usersD = _.unionBy(usersA, usersB, "userId");
//합치면 중복이 발생할수 있는데이터를 합쳐서 중복을 제거한 후 새로운 배열 데이터로 반환
console.log("uniqBy", usersD);

const users = [
  { userId: "1", name: "H.E" },
  { userId: "2", name: "Lee" },
  { userId: "3", name: "Kim" },
  { userId: "4", name: "Park" },
  { userId: "5", name: "Umm" },
];
const foundUser = _.find(users, { name: "Lee" });
//특정한 객체 데이터를 찾음
const foundUserIndex = _.findIndex(users, { name: "Lee" });
////특정한 객체 데이터에 인덱스를 찾음
console.log(foundUser); //{userId: '2', name: 'Lee'}
console.log(foundUserIndex); //1

_.remove(users, { name: "H.E" });
//특정한 객체를 데이터에서 삭제함
console.log(users);

---

 

JSON

속성-값 쌍 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해

인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷

비동기 브라우저/서버 통신을 위해 넓게는 XML을 대체하는 주요 데이터 포맷

인터넷에서 자료를 주고 받을때 자료를 표한하는 방법

JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json

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

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

import myData from "../myData.json";
//js파일은 생략가능 하지만 다른 파일은 명시를 해주어야 함

console.log(myData);

const user = {
  name: "H.E",
  age: 21,
  emails: ["hyeone@gmail.com", "she@naver.com"],
};
console.log("user", user);

const str = JSON.stringify(user);
//JSON으로 변경
console.log("str:", str);
console.log(typeof str); //string
//JSON이 하나의 문자데이터로 출력됨

const obj = JSON.parse(str);
//JSON으로 된 하나의 문자데이터를 JSON이라는 전역객체에
//메소드에 인수로 넣어 분석하여 활용할 수 있음
console.log("obj:", obj);

---

Storage

localStorage 읽기 전용 속성을 이용하여 Storage 객체에 접근할 수 있음

저장한 데이터는 브라우저 세션 간에 공유됨

localStorage의 데이터는 만료되지 않고

sessionStorage 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 데이터가 사라짐

저장하는 데이터는 되도록 문자데이터 형태로 저장하고

일부문자데이터가 아닌 경우에는 제대로 저장이 되지 않을 수 있음

객체나 배열 데이터는 json객체에 stringify를 통해서 문자데이터화 시켜서 데이터를 저장하고

저장된 문자데이터를 가지고 와서 json객체에 parse메소드를 통해서 분석해서 JS 파일 내부에서 하나의 데이터로 활용

localStorage.setItem('myCat', 'Tom');
//key, value형태로 문자데이터로 저장
const cat = localStorage.getItem('myCat');
//데이터를 읽어올때는 getItem을 이용하여 key값만 알면됨
localStorage.removeItem('myCat');
//removeItem을 이용하여 데이터를 제거할 수 있음

개발자모드 Application

key, value형태로 어떠한 데이터를 저장할 수 있음

이것이 브라우저에서 관리되는 하나의 저장소 데이터라는 개념으로 사용이 됨

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

const user = {
  name: "H.E",
  age: 21,
  emails: ["hyeone@gmail.com", "she@naver.com"],
};

//localStorage.setItem("user", user); key:user, Value:[object Object]
//원하는 내용이 제대로 저장되지 않음
//localStorage라는 전역객체에 데이터를 저장하겠다는 setItem메소드 사용

localStorage.setItem("user", JSON.stringify(user));
//원하는 내용이 제대로 저장됨을 확인할 수 있음

console.log(localStorage.getItem("user"));
//localStorage에서 데이터를 가져올때는 getItem메소드 실행
//{"name":"H.E","age":21,"emails":["hyeone@gmail.com","she@naver.com"]}
//문자데이터로 출력됨

console.log(JSON.parse(localStorage.getItem("user")));
//localStorage에 저장되어 있는 데이터가 getItem으로 가지고와져서
//JSON객체에 parse메소드로 분석되서 실제 JS데이터로 출력됨

const str = localStorage.getItem("user");
const obj = JSON.parse(str);
obj.age = 22;
localStorage.setItem("user", JSON.stringify(obj));
//로컬데이터에 있는 데이터 수정
//데이터를 가지고 와서 코드내에서 수정을 한다음 다시 해당하는 키의 이름으로 덮어쓰기

localStorage.removeItem("user");
//removeItem을 이용하여 데이터를 지움

---

OMDb API

https://www.omdbapi.com/

OMDb API - The Open Movie Database

 

쿼리스트링(Query String)

Query는 하나의 검색이라는 뜻으로 이해하면 되고 String은 문자데이터를 의미함

특정한 웹사이트 주소에 ?로 시작하고 &로 구분하는 개념을 쿼리스트링(query string)이라고 함

즉 특정한 웹에 주소부분에 ?로 시작하는 속성과 값에 어떠한 모음

특정한 주소에 접근을 할때 기본적인 그 페이지에 대한 옵션을 명시하는 용도로 활용되는 문자

 

입력할수 있는 웹사이트 주소(기본적인 웹사이트 주소, 데이터를 취급하는 웹의 서버주소 등)를 적고 ?를 적어서 속성과 값에 형태로 옵션을 적을 수 있음(ex. apiKey = 나의키값, 키를 통해 인증을 받을 수 있음) 그리고 다음으로 추가적인 옵션을 명시를 해줌 

http://www.omdbapi.com/?apikey=89f495a7&s=frozen

 

axios

node.js에서도 쓸 수 있고 브라우저에서도 사용할 수 있는 HTTP 요청을 처리해주는 JS 패키지

npm i axios	//axios 설치

import axios from "axios";

function fetchMovies() {
  axios.get("https://www.omdbapi.com/?apikey=89f495a7&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;
  });
  //axios를 통해서 헤딩하는 주소의 내용을 얻어서(get)
  //그것을 then이라는 메소드에서 처리해서 활용
  //res(response)는 응답이라는 뜻을 가지고 있고 서버로 요청이 들어가고
  //나온 결과가 응답이라는 개념으로 반환이 되서 then이라는
  //메소드의 콜백함수 내부에서 활용할 수 있음
}
fetchMovies();