JS Level Up(2) - 데이터 실습

가져오기, 내보내기

default export는 이름을 따로 지정 안 해도 되는 기본 통로입니다.

named export는 이름을 지정한 후 내보낼 수 있습니다.

 

어떤 파일들은 가져오는 것만 있고(main.js),

어떤 파일은 내보내기만 있습니다(module.js).

 

default 통로에 이름을 지정 안 해도 됨으로

함수의 getType을 지워도 상관없습니다.

 

다른 파일에서 불러올 때도 import abc from './getType' 로 해도 상관없습니다.

 

default가 없으면 이름을 지어서 내보내야 합니다.

이때, 다른 파일에서 불러오려고 하면 { } 안에 똑같은 이름을 적어야 됩니다.

모듈이름을 as 를 통해 다른 이름을 불러서 파일에 사용할 수 있습니다.

또한 모든 함수를 한꺼번에 불러 오고 싶으면 * 를 사용해서 이름까지 지어주면 됩니다.

여기서 *는 와일드카드(Wildcard Character)라고 불립니다.

와일드카드는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킵니다.

 

default와 named 가장 큰 차의점

default는 한 파일 당 하나만 내보낼 수 있습니다.

named는 이름만 지어주면 무한개를 내보낼 수 있습니다.

 

 한 파일에서 하나의 default와 여러개의 named를 공존할 수 있습니다.

 

Lodash 사용법

lodash 사용 참조

 

lodash 를 import합니다.

위에 보시면 usersA와 usersB 객체가 있습니다.

.concat을 사용해서 usersA와 usersB를 합쳤습니다.

이때 총 4개의 데이터가 있습니다.

 

lodash의 uniqBy를 사용하면, 해당 usersC객체 중 userId 기반으로

중복을 제거한 후 총 3개의 데이터가 나옵니다.

 

두 객체를 합치기 전에 중복값을 제거를 먼저 하고 합칠 수 있습니다.

lodash의 unionBy를 통해 하면 됩니다.

 

lodash의 find를 특정 요소를 찾을 수 있고, findIndex는 특정 요소의 index를 찾을 수 있습니다.

remove는 특정 요소를 제거할 수 있습니다.

 

JSON

JSON의 자료형은 JS와 유사합니다. undefined제외한 나머지는 모두 사용 가능합니다.

문자열은 무조건 큰따움표만 사용할 수 있습니다.

하나의 json파일은 하나의 데이터입니다.

무조건 { }로 묶고, 속성에도 큰따움표로 묶어야 합니다.

 

JSON는 문자열입니다.

js파일에서 JSON.stringify(A)를 하면 A라는 객체를 문자열을 전환 후,

JSON.parse(str) 전환된 문자열을 JSON형태로 바뀔 수 있습니다.

 

Storage

웹페이지 F12을 눌러서 개발자 모드를 열어보면 application에

Local Storage와 Session Storage가 있습니다.

key와 value로 구성되어 있습니다.

local storage 참조

 

local storage의 데이터는 만료되지 않고, 즉, 우리가 지우지 않으면 영구적으로 존재.

session storage의 데이터는 페이지 세션이 끝날 때, 즉, 페이지를 닫을 때 사라집니다.

local storage에 데이터를 저장할 때는 setItem으로 저장해야 하며,

key, value를 순서대로 저장해야 됩니다.

value도 string으로 먼저 전환 후 저장하셔야 됩니다.

 

데이터를 꺼낼 때는 getItem(key)를 사용하면 됩니다.

꺼낸 후 사용 편리를 위해 JSON.parse로 형전환 후 사용합니다.

 

.removeItem(key)를 사용해서 해당 데이터를 지울 수 있습니다.

 

local storage의 데이터는 영구적인데 수정할 방법도 복잡합니다.

우선 getItem으로 데이터를 가져오고, JSON.parse를 통해 형전환한 후,

값을 수정합니다.

수정된 값을 다시 JSON.stringify를 문자화한 후, setItem으로 저장합니다.

 

lowdb github 참조

 

lowdb를 통해 손쉽게 데이터를 수정할 수 있습니다.

 

OMDb API

OMDb API 참조

 

영화검색 사이트의 API입니다.

 

Query String

웹사이트 주소?속성=값&속성=값&속성=값

api를 통해 검색한 후 위처럼 JSON으로 반환됩니다.

 

이런 JSON을 처리하는 JS 패키지가 axios입니다.

axios github 참조