JavaScript (7)

JavaScript (7)

1. 가져오기, 내보내기

import _ from 'lodash'    // from 'node_modules'
import getType from './getType'   // getType.js
import getRandom from './getRandom'   // getRandom.js

export 통로 두 개

• default export : 이름 지정 X 기본 통로
• named export : 이름 지정해야하는 통로

default (이름 무필요)
but 하나만 가능!!!!!

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

import에서도 getType이라고 안해도 상관 X 다른 네이밍 가능

import checkType from './getType'   // getType.js

named (이름 필요)

export function random(data) {
  return Object.prototype.toString.call(data).slice(8,2)
  }
export const user = {
  name: 'dd',
  age: 33
}

import 할때도 {}

import { random, user } from ~

import as

import { random, user as hi } from ~

한번에 꺼내오기 (와일드 카드)
= 여러내용 한꺼번에 지정할 목적으로 사용하는 기호

import * as R from ~

• default도 named 여러개 중 하나로 사용가능

*기본통로(default)는 하나의 데이터만 내보내지만 named는 여러개 가능

2. Lodash 사용법

unicBy, unionBy

import _ from 'lodash' //_는 아무거나 가능

userA userB 객체데이터 두 개 , 각 객체 데이터 안 두 개
const userC = userA.concat(userB)   // 중복되는 데이터 있음
_.unicBy(userC, 'userId')          // 고유값 정리해서 반환
-.unionBy(userA, userB, 'userId')  // 고유하게 합치기

find, findIndex, remove

-.find(users, {name: 'Amy'})       // 찾은 결과 반환
-.findIndex(users, {name: 'Amy'})  // 찾은 결과의 인덱스 반환
_.remove(users, {name: 'Amy'})     // 제거

3. JSON

json : 자바스크립트 데이터 표현하는 포맷

• 속성:값 (key value)
• 개방형 표준 포맷
• 비동기 브라우저/서버통신 AJAX 을 위해 사용 (XML 대체 데이터 포맷)
• 컴퓨터프로그램 변수값 표현에 적합
• json확장자 파일로도 데이터 만들 수 있음
• 하나의 문자데이터임

자료형과 문법

• undefined 제외 사용가능
• String 큰따옴표만 허용

main.js로 json불러오기

import myData from './myData.json'
const str = JSON.stringify(user)   // JSON은 전역객체
출력 : str 타입은 string / 가져오면 객체데이터로 사용되는 것
const obj = JSON.parse(str)        // 문자데이터를 다시 객체로 재조립

JSON.stringify : 자바스크립트 모든 데이터를 json의 형태로 문자데이터화 시켜주는 것
JSON.parse : 문자데이터를 다시 객체로 재조립

4. Storage

문자데이터로 저장!

local storage

• 개발자 도구 application tab
• 주소 클릭
• key value 형태로 데이터 저장가능 (데이터 저장소)
• 데이터 만료되지 않음 (데이터 반영구적 사용가능)
• 일반적으로 많이

session storage

• 페이지 닫을때 사라짐

setItem (key value형태로 문자데이터로 저장 권장)

localStorage.setItem('myCat', 'Tom')
const cat = localStorage.getItem('myCat') // key로 value 읽어오기
localStorage.removeItem('myCat')

문자열 형태로!

localStorage.setItem('user', JSON.stringify(user))  //저장
-> 해당코드 실행하고 지워도 영구적으로 저장
JSON.parse(localStorage.getItem('user')))  //읽기
localStorage.removeItem('user') // 삭제

수정

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 22
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj))

local storage를 DB처럼 해주는 Lowdb
JSON기반(lodash 패키지 기반으로 동작하는 DB)
(실행법 lowdb github 검색)

5. OMDb API

영화데이터 요청해서 받아서 main.js 에서 출력하는 법

1) OMDb API 검색
2) Parameters

By Search

s (required,필수) : 영화 제목 통해서 영화 목록 검색해주는 기능

3) Usage

http://www.omdbapi.com/?apikey=[yourkey]&   // key로 요청

Query String (?로 시작하고 &로 구분되는)
문자로 검색한다라는 뜻

주소?속성=값&속성=값&속성=값
s(속성) = 값

실습

http://www.omdbapi.com/?apikey=7035c60c&s=frozen

axios
Promise기반 HTTP client (browser와 node.js에서 사용가능)

npm install axios         // 일반의존성 (브라우저에서 동작해야함)

import axios from 'axios'
function fetchMovies() {
  axios
     //서버로 요청이 들어가고
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')/
    //응답
    .then(response) => {
}
//https로 요청 권장
fetchMovies()

imdbID가 고유키값!!

index.html

body h1 
h1 hello
img src = "" alt = "" width = "200"

main.js

import axios from 'axios'
function fetchMovies() {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&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()