[패스트캠퍼스] 국비지원 data practice

1. 데이터 가져오기 및 내보내기

데이터 통신을 할 수 있는 방법은 2가지가 있다.

 

• node_modules에서 가져올 수 있다.
• js 파일에서 가져올 수 있다.

 

Default Export	Named Export
기본 통로 export default function( ){ } import 함수명 from "해당 자바스크립트 파일 경로" 함수명은 임의로 변경하면 된다. 하나의 자바스크립트 파일에 하나의 함수만 있어야 한다.	이름을 꼭 지정해야 하는 통로 export function 함수명( ){ } 또는 export default = 원시 데이터 import { 함수명 } from "해당 자바스크립트 파일 경로" 함수명은 as를 통하여 변경하면 된다. 하나의 자바스크립트 파일에 여러 개의 함수 존재 가능하다. import * as R from "해당 자바스크립트 파일 경로"

 

위와 같은 2가지 통로가 있는데 차이점을 이해하자. 많이 쓰이는 통로는 Named Export 이다. 왜냐하면 한 개의 파일에 여러 데이터를 담을 수 있기 때문이다. 주의할 점은 원시 데이터를 데이터로 만드는 경우에는 export default를 이용하여 할당하자.

 

 

2. Lodash 사용법

 

• _.uniq(array) : 중복되는 값을 제거한다.
• array1.concat(array2) : 배열들을 연결하여 새로운 배열을 만들어준다. lodash의 uniqBy를 이용하여 중복 제거한다.
• _.uniqBy(array, 중복 유무 체크하는 기준점) : 이미 중복이 발생한 데이터에서 중복을 제거한다. (배열 데이터 1개인 경우)
• _.unionBy(array1, array2, 중복 유무 체크하는 기준점) : 중복이 발생할 가능성이 있는 데이터에서 중복을 제거한다. (배열 데이터 여러 개인 경우)
• _.find(array, 조건) : 조건을 만족하는 첫 번째 요소를 반환한다.
• _.findIndex(array, 조건) : 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.
• _.remove(array, 제거하고자 하는 값의 조건) : 원하는 값 제거 가능하다.

 

3. JSON Javascript Object Notation

 

• 자바스크립트를 표현하는 포맷이다.
• .json 확장자를 이용한다.
• 속성과 값의 쌍으로 이루어져 있다.
• import 데이터명 from "json 파일 경로.json" : js 파일에는 확장자 안 붙여도 되었지만, json 파일에는 확장자를 붙여야만 한다.

 

// JSON (Javascript Object Notation)

// 자바스크립트의 객체 표기법

/*

{

  "string": "Anne",

  "number": 123,

  "boolean": true,

  "null": null,

  "object": {},

  "array": []

 

}

*/

 

 

주의할 점은 객체처럼 생겼지만, 반드시 문자열을 이용하여 표기해야 하고 큰 따옴표만 이용 가능하다. 즉, json은 하나의 문자 데이터라고 볼 수 있다.

 

 

 

 

4. Storage

 

• local Storage : 데이터를 영구 저장한다. 활용도가 높고, 그 주소에 종속되어 관리하기 편리하다.
• Session Storage : 창을 닫으면 데이터가 없어진다. (반영구적 저장)

 

local Storage를 이용하기 위하여 원시적인 방법과 lodash를 이용하는 방법이 있다.

 

4-1. 원시적인 방법

 

• setItem(key, value) : local Storage에 데이터를 저장한다.
• getItem() : js에서 이용하기 위하여 데이터를 가져온다.
• removeItem() : local Storage에 저장된 데이터를 제거한다.

 

import myData from "./myData.json";

// 문자열 데이터로 변경해야 한다.

const user = JSON.stringify(myData);

localStorage.setItem("user", user);

// js에서 이용하기 위하여 parse 이용하여 원래의 데이터로 변경해야 한다.

console.log(JSON.parse(localStorage.getItem("user")));

// remove

// localStorage.removeItem("user");

const str = localStorage.getItem("user");

const obj = JSON.parse(str);

console.log(obj);

// 데이터 속성의 값을 수정하기.

obj.age = 22;

console.log(obj);

// 수정된 데이터를 다시 로컬 스토리지에 보관하기.

localStorage.setItem("user", JSON.stringify(obj)); // 변경된 데이터가 저장된다.

// 기존에 있던 키에 덮어서 이용하면 된다.

// remove

localStorage.removeItem("user");

 

 

 

4-2. lodash package를 이용한 최신의 방법

 

lowdb 이용하여 local Storage를 이용할 수 있다.

 

참고 공식 문서 : https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. (supports

 

 

5. OMDb API

 

OMDb API : 영화 데이터 관련 오픈 소스, 실제 영화 데이터를 요청 후 받아서 출력할 수 있다.

 

 

• Required : Yes이면 필수적인 속성이다.
• Description : 간단하게 기능을 설명한다.
• query string : 특정 주소로 접근할 때, 페이지에 대한 옵션을 명시하는 용도이다. query는 검색이고 string은 문자열이다. 즉, 문자를 가지고 검색한다는 의미이다.

 

 

참고 공식 문서 : https://github.com/axios/axios

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

 

 

 

 

axios package와 query string 이용하면 원하는 주소에서 데이터 가져올 수 있다.

• .get() : 요청 가능한 주소와 query string 받아오기.
• .then() : 받아온 정보를 콘솔창에 보여주기.

 

import axios from "axios";

function fetchMovies() {

  // 메소드 체이닝

  // get : 데이터 요청하기.

  // then : 콜백 함수에서 처리할 수 있도록 만들어준다. (내부 로직)

  axios.get("https://www.omdbapi.com/?apikey=API KEY&s=frozen").then((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();