[메가바이트 스쿨] FE 3기 online - JS 데이터 실습

seokji·2022년 9월 25일
JavaScriptMegabyteSchool개발자취업부트캠프국비지원교육내일배움카드메가바이트스쿨패스트캠퍼스
0

메가바이트 FE 3기

목록 보기
10/15
post-thumbnail

JS 데이터 실습

🟨 가져오기, 내보내기

import

자바스크립트는 import 키워드를 통해 외부에 있는 자바스크립트 파일을 가져올 수 있습니다.

export

자바스크립트는 2가지 방법으로 파일을 내보낼 수 있습니다.

1. export default

이름을 따로 지정하지 않은 내보내기 방식입니다.

  • 이름을 지정할 필요가 없습니다.
  • 이름을 따로 지정하지 않아서 사용자가 임의의 이름을 지정할 수 있습니다.
  • 하나의 파일에서 하나의 데이터만 내보낼 수 있습니다.
// module.js
export default function(){...}

// app.js
import defaultFunc from 'module'

2. named export

이름을 지정해서 내보내는 방식입니다.

  • 이름이 지정된 내보내기의 경우 {}을 사용해 데이터를 가져와야 합니다.
  • 이름이 지정된 경우 여러 개의 데이터를 내보낼 수 있습니다.
  • as 키워드를 이용해 이름을 임의로 지정할 수 있습니다.
    • (wildcard)를 이용해 모든 내보내기 된 데이터를 가져올 수 있습니다.
// module.js
export const named = () => {...}
export const named2 = () => {...}

// app.js
import { named, named2 } from 'module'
import { named as something } from 'module' // 임의 이름 지정
import {* as All } from 'module' // 와일드카드

🟨 JSON

JSON은 JavaScript Object Notation의 약어로 자바스크립트의 데이터를 표현하는 하나의 데이터 포맷입니다. 객체와 같이 key: value 쌍을 이루고 있습니다.
JSON의 공식 인터넷 미디어 타입은 application/json이며, 확장자는 .json입니다.

❗ 주로 비동기 통신에 사용됩니다.

// JSON 기본 문법 
// myData.json
{
  "string": "seokji", // key 값을 ""를 이용해 작성해야 합니다. 
  "number": 123,
  "boolean": true,
  "null": null,
  "array": [],
  "object": {}
  // udefined는 사용 불가합니다.
}

// app.js
import myData from "./myData.json";

console.log(myData); // 자동적으로 객체로 변환됩니다.

❗ JSON 데이터는 하나의 문자 데이터입니다.
문자 데이터인 이유 - 객체는 mutable 하기 때문에 가벼운 통신에 사용되는 JSON 데이터 포맷에 적합하지 않기 때문입니다.


JSON 메서드

JSON.stringify

JSON.stringify는 JSON 데이터를 문자열(JSON 표기법)로 변환합니다.

// myData.json
{
  "string": "seokji", // key 값을 ""를 이용해 작성해야 합니다. 
  "number": 123,
  "boolean": true,
  "null": null,
  "array": [],
  "object": {}
  // udefined는 사용 불가합니다.
}

// app.js
import myData from "./myData.json";

const str = JSON.stringify(myData);
console.log(str); // {"string":"seokji","number":123,"boolean":true,"null":null,"array":[],"object":{}}
console.log(typeof str); // string

JSON.parse

JSON.parse는 JSON 데이터를 자바스크립트에서 사용할 수 있는 객체 데이터로 변환합니다.

const obj = JSON.parse(str); // string → object
console.log(obj);

🟨 Storage

스토리지란 데이터를 브라우저에 저장할 수 있는 저장소입니다. 브라우저에서 사용할 수 있는 스토리지는 localStorage와 sessionStorage가 있습니다.

localStorage

  • localStorage의 저장된 데이터는 그 사이트(도메인)에 종속됩니다.
  • localStorage의 데이터는 삭제하지 않는 경우 데이터가 만료되지 않습니다.(반영구적)
// localStorage 기본문법

// 아이템 지정
localStorage.setItem("key", "value"); // value 값은 string으로 지정해야합니다.

// 아이템 읽기
localStorage.getItem("key"); // key 값으로 아이템을 읽어옵니다.

// 아이템 제거
localStorage.removeItem("key"); // key 값으로 아이템을 제거합니다.

예시 

// localStorage 데이터 지정 및 읽기
const data = {
  name: "seokji",
  age: 123,
};

// 데이터 지정
localStorage.setItem("data", JSON.stringify(data)); // stringify() 메서드를 이용해 객체를 문자로 변환합니다.

// 데이터 읽기
const str = localStorage.getItem("data"); 
console.log(str); // {"name":"seokji","age":123}
console.log(JSON.parse(str)); // {name: 'seokji', age: 123}  parse() 메서드로 문자를 객체로 변환합니다.

// 데이터 제거
localStorage.removeItem("data"); // key값으로 데이터를 제거합니다.

// localStorage 데이터 수정
const data = {
  name: "seokji",
  age: 123,
};

// 데이터 지정
localStorage.setItem("data", JSON.stringify(data));

// 데이터 읽기
const str = localStorage.getItem("data");
const obj = JSON.parse(str);

obj.age = 9999; // 데이터 수정
localStorage.setItem("data", JSON.stringify(obj)); // 데이터 지정

지정

삭제

수정

sessionStorage

  • sessionStorage의 데이터는 페이지의 세션이 끝날 때, 즉 페이지가 닫을 때 사라집니다.

🟨 Axios

Query String

Query String이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, URL 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 의미합니다.
Query는 하나의 검색, String은 문자 데이터로 문자 데이터를 가지고 검색을 한다고 생각하면 이해하는 데 도움이 됩니다.

❗ Query String의 형식 : 주소?key=value&key=value&key=value
ex) https://localhost:5000/?apiKey=123&data=name...

Axios

Axios는 HTTP요청을 처리해주는 프로미스 기반 자바스크립트 패키지입니다.

OMDB Api

OMDB Api를 이용해 데이터를 가져와 보는 실습을 진행하겠습니다.

📤 요청 보낼 url : https://www.omdbapi.com/?apikey=\[apiKey]&s=notting+hill
❗ 데이터를 요청할 시 http 보다 https를 사용해 오류를 방지합니다.

Query String 검색 시 나오는 JSON 데이터

1. HTTP로 데이터 가져오기(GET)

import axios from "axios";

// async/await를 이용해 비동기 처리
const fetchMovies = async () => {
  const res = await axios.get(
    "http://www.omdbapi.com/?apikey=7035c60c&s=notting+hill"
  );

  const data = res.data;
};

fetchMovies();

2. GET 요청의 결과

3. 요청 결과 화면에 그려주기

import axios from "axios";

const fetchMovies = async () => {
  const res = await axios.get(
    "http://www.omdbapi.com/?apikey=7035c60c&s=notting+hill"
  );

  const data = res.data; // 응답 결과의 data를 변수로 담아줍니다.
  console.log(data);
  const h1El = document.querySelector("h1");
  const h2El = document.querySelector("h2");
  const imgEl = document.querySelector("img");

  h1El.textContent = data.Search[0].Title; // data안 Search의 첫 번째 객체의 Title 값을 h1 요소에 그려줍니다.
  h2El.textContent = data.Search[0].Year; // data안 Search의 첫 번째 객체의 Year 값을 h2 요소에 그려줍니다.
  imgEl.src = data.Search[0].Poster; // data안 Search의 첫 번째 객체의 Poster 값을 img 요소에 그려줍니다.
};

fetchMovies();

결과

profile
seokji
이전 포스트

[메가바이트 스쿨] FE 3기 online - JS 데이터

0개의 댓글