FASTCAMPUS ST-FE 3기
Part 4. JavaScript Level up - Ch 2. JS 데이터 실습
JS 데이터실습
01. 가져오기, 내보내기
js는 파일을 주고 받을 수 있는 통로가 있어 외부파일을 가져오고, 특정한 내용을 내보낼 수도 있다.
1.1 import 가져오기
import _ from 'lodash' //from 'node modules'폴더
import getType from './getType' //getType.js
import getRandom from './getRandom' //getRandom.js1.2 export 내보내기
export default function getType (data){
reutrn Object.prototype.toString.call(data).slice(8,2)
}1.2.1 default export
이름 지정X 외부로 내보내는 통로 -> 애를 외부에서 받을 때에도 이름은 하나의 별칭의 개념으로 쓴다. 꼭 해당 파일의 이름이 아니어도 된다는 뜻.
export default function (){
return Math.floor (Math.random() * 10)
}함수를 default export방식으로 내보냄. 함수명을 지정해주지않아도 동일하게 내보내준다.
import 아무거나 from './getRandom' //getRandom.js이름은 꼭 해당 함수명이나 파일명이 아닌 별칭으로 지정해줘도 된다.
한번에 하나만 내보내기 가능.
1.2.2 named export
이름을 지정O 외부로 내보내는 통로. 이름을 지정해주어 내보낸다.
export function random (){
return Math.floor (Math.random() * 10)
}default통로와 달리 내보내려는 함수or파일명을
{}하나의 객체형태로 받아와야한다.
import {random} from './getRandom' 일종의 객체형식인 만큼 한번 export할 때 여러개를 내보내줄 수 있다.
//내보내기
export function random (){
return Math.floor (Math.random() * 10)
}
export const user = {
name:'oching',
age: 95
}
//받아오기
import {random , user} from './getRandom' 받아올 때 이름을 바꾸고싶다면 원래 받아올 이름 as 바꿀 이름의 형태로 작성한다.
//받아오기
import {random , user as oching} from './getRandom' 만약, 하나의 dir에 들어있는 모든 js파일들을 불러오고싶다면?
import * as 별칭 form 'dir경로'
console.log(별칭);콘솔창에 별칭으로서 명명된 dir경로내의 모든 js파일을 불러온다.
02. lodash 사용법
이미 기능구현이 되어있는 mdn의 메서드를 사용할 수 있다.
https://lodash.com/docs/4.17.15
import_from 'lodash'
//모듈파일 lodash를 default import 방식으로 가져옴_.uniqBy(파일명, 식별 key명)
파일내에서 식별 key값 중 중복되는 vlue값을 갖는 값을 지워 고유화시킨다.
https://lodash.com/docs/4.17.15#uniqBy
_.unionBy(파일명1,파일명2, 식별 key명)
두가지의 파일을 합침과 동시에 uniqBy와 같이 중복되는 value 값을 지워 고유화시킨다.
https://lodash.com/docs/4.17.15#unionBy
_.find(객체데이터명, {key:value} )
객체데이터명에서 {key:value}를 갖는 객체를 추출해준다.
https://lodash.com/docs/4.17.15#find
_.findIndex(객체데이터명, {key:value} )
객체데이터명에서 {key:value}를 갖는 객체의 순번을 추출해준다.
https://lodash.com/docs/4.17.15#findIndex
_.remove(객체데이터명, {key:value} )
객체데이터명에서 {key:value}를 갖는 객체를 삭제해준다.
https://lodash.com/docs/4.17.15#remove
03. JSON
{}으로 하나의 객체 안에 속성-값으로 연결해서 하나의 자료덩어리처럼 사용한다. 인간이 볼 수 있는 문자형의 덩어리며, 자료를 주고받기 위해 만들어진다.
주의점
모든 자료형타입 기호 동일하게 사용가능하나,
문자열의 경우 ""큰 따옴표만 사용가능하다.
myData.json
{
"name":"oching",
"age":"95",
"email":"oching.choi@gamil.com"
}import myData from './myData.json';
console.log(myData) //객체형으로 콘솔창에 뿌려짐여기서 주의할 점은 사실상 json파일은 문자형의 데이터구조지만 js 자동형변환으로 인해 객체형으로 출력된다.
const user = {
"name":"oching",
"age":"95",
"email":"oching.choi@gamil.com"
}
const str = JSON.stringify(user)
console.log(str)
console.log(typeof str)
const obj = JSON.parse(str);
console.log(obj )JSON.stringify전역함수로서 js 어디서도 호출가능하고, JavaScript 값이나 객체를 JSON 문자열로 변환한다.
JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다.
04. Storage
아무리 간단한 애플리케이션이라도 데이터를 저장시켜야할 텐데, 굳이 서버가 아닌 간단하게 브라우저 상에 데이터를 저장할 수 있는 기술.
4.1 session storage
페이지의 세션이 끝날 때 저장된 데이터가 지워진다.
4.2 local storage
사이트에 종속되는 개념. 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 따로 삭제해줄 때 까지는 존재.
세팅해주기
이때 value값은 문자데이터로 가져와야한다.
만약 문자형이 아니라면, JSON.stringify()를 이용해 문자형으로 바꾸어
변수에 담는 식으로 문자형으로 맞춰 가져오는 것이 안전하다.
localStorage.setItem('key', 'value');불러오기
세팅된 key값으로 해당 데이터를 가져온다.
localStorage.getItem('key');제거하기
localStorage.removeItem('key');💡 로컬스토리지에 설정, 불러오기, 제거해보기
const user = { "name":"oching", "age":"95", "email":"oching.choi@gamil.com" } localStorage.setItem('user',JSON.stringify(user)); //'user'에 변수user에 단긴 객체를 문자화해서 로컬스토리지에 세팅 console.log(JSON.parse(localStorage.getItem('user'))); //'user'에 담긴 로컬스토리지 정보를 객체로 풀어서 콘솔창에 출력 localStorage.removetItem('user'); //로컬스토리지에서 'user'에 단긴 정보 삭제
💡 로컬스토리지에 내용 수정하기
const user = { "name":"oching", "age":"95", "email":"oching.choi@gamil.com" } const str = localStorage.getItem('user'); //정보뭉치 가져오기. 현재 문자형. const obj = JSON.parse(str); //객체형태로 파싱 obj.age = 22; //객체 일 때 값을 변경 console.log(obj); localStorage.setItem('user', JSON.stringify(obj)); //문자형으로 다시 만들어서 user로 세팅다시 객체형으로 바꾸어 값을 변경한 뒤
다시 문자형으로 변경해 로컬스토리지에 세팅한다.
4.3 lowdb
db처럼 사용할 수 있는 lodash기반의 패키지모듈.
https://github.com/typicode/lowdb
05. OMDb API / AXIOS로 웹 페이지 만들어보기
OMDb API
영화정보제공 사이트인 OMDb API에서 KEY값을 받아
정보를 가져온다.
https://www.omdbapi.com/
query string
문자를 가지고 검색을 하는 형태이다.
주소?속성=값&속성=값&속성=값만약 겨울왕국의 정보를 검색하고싶다면?
?apikey=7035c60c&s=frozen의 query string형식으로 검색해주고
json포맷으로 정보를 가져온다.
이러한 json의 문자형 상태에서 객체로 파싱해 사용할 수 있게 해주는 모듈로 axios를 사용해보자.
axios
자바스크립트 패키지
http클라이언트 요청을 처리해준다.
https://github.com/axios/axios
