오늘자 강의에서는 데이터를 다양하게 활용해보았습니다. 다양한 패키지나 도구를 이용해 실무에서 자바스크립트 데이터를 실습해보고, 내용을 정리해보려고 합니다.
가져오기, 내보내기
import로 가져오기
export 를 사용해 내보낸 값을 사용하기 위해 import 를 사용합니다.
// index.js
import { auth } from "./authentication.js"
import Modal from "./Modal.js"내보내는 파일에 있는 함수(변수)명과 불러오는 이름이 동일해야 하며 export default 를 제외한 나머지 요소를 불러올 때는 중괄호로 감싸야만 합니다.
import 별칭
원래 export { 내보낼 값의 이름 } 과 import { 불러올 값의 이름 }은 같아야 하지만, as 라는 키워드를 통해 불러올 값에 다른 이름을 붙일 수도 있습니다.
이를 import 별칭이라고도 합니다.
// index.js
import { auth as Authentication } from "./authentication.js"다만 예외적인 경우가 아니라면, 굳이 별칭을 쓰기보다 원래 모듈의 이름을 그대로 사용하는 것이 권장됩니다.
html에서 import하기
<!DOCTYPE html>
<head>
<title>sample page</title>
</head>
<body>
<script type = "module" src = "./index.js"></script>
</body>
</html>위의 예시와 같이, html의 script 태그에 type을 "module"로 설정하면 html 내에서도 import를 사용할 수 있게 됩니다.
export로 내보내기
특정 파일에서 만들어둔 객체를 다른 파일에서도 사용할 수 있게 하고 싶다면, export 선언을 추가해주면 됩니다.
// authentication.js
const auth = {
...
}
// export 선언 추가
export { auth }이렇게 객체나 변수에 export 선언을 붙여주면 해당 요소는 다른 파일에서 사용할 수 있다는 뜻으로, 이제 다른 파일에서도 auth 객체를 사용할 수 있습니다.
여러 값 내보내기
export 를 통해 내보내고자 하는 요소가 여럿이라면 요소를 선택적으로 내보내는 것도 가능합니다.
function getName(name) {
return `학생의 이름 : ${name}`
}
function getMajor(major) {
return `학생의 전공 : ${major}`
}
function getGrade(grade, score) {
return grade * score
}
// getName 과 getMajor 에 대해서만 내보내기를 수행함.
export { getName, getMajor }export default
내보내기 기본값은 모듈에서 내보낼 개체가 하나만 존재하거나 내보내야 하는 가장 중요한 개체가 존재할 때 사용할 수 있습니다.
바로 위의 코드 블럭을 가져와서 export default를 추가해보겠습니다.
function getName(name) {
return `학생의 이름 : ${name}`
}
function getMajor(major) {
return `학생의 전공 : ${major}`
}
function getGrade(grade, score) {
return grade * score
}
// getName, getMajor 함수를 내보냄.
export { getName, getMajor }
// getGrade 함수는 내보내기 기본값임.
export default getGradeexport default를 선언한 것을 가져올 때에는 이름을 그대로 사용할 필요가 없습니다. 아래 코드 블럭을 참고하세요.
// index.js
import whatever, { getName, getMajor } from "./student.js"
// import getGrade, { getName, getMajor } from "./student.js";
console.log(getName("John"))
console.log(getMajor("프론트엔드"))
console.log(whatever(3.0, 50)) getGrage는 우리가 export default로 내보냈으므로 whatever라는 이름으로 바꾸어서 사용해도 전혀 상관없습니다.
이미 중괄호가 아닌 그냥 이름으로 import 하는 순간 해당 파일의 export default 객체와 바인딩되기 때문이죠.
다만, 이 경우에도 이름은 동일하게 사용하는 것이 권장됩니다.
함수 선언식과 export
함수를 내보낼 때는 export 선언을 함수 앞에 붙일 수도 있습니다.
export function getName(name) {
return `학생의 이름 : ${name}`
}
export const getMajor = major => {
return `학생의 전공 : ${major}`
}
function getGrade(grade, score) {
return grade * score
}이런 식으로 작성하면 getName과 getMajor는 따로 내보내기 구문을 적어줄 필요가 없어서 코드가 조금 더 간결해질수 있습니다.
다만, 이런 식으로 작성할 때에는 어떤 것을 export하는지 한눈에 파악하기가 힘들다는 단점이 발생합니다.
Lodash
Lodash 소개
개발을 하다 보면 여러 페이지에서 사용해서 공통으로 사용해야 하는 함수들이 종종 있죠. 그런 경우 직접 함수를 구현해서 util 폴더에 추가해서 사용을 하기도 합니다.
하지만 개발을 할 때 일반적으로 많이 사용하는 기능들을 굳이 회사마다, 개발자마다 일일이 개발을 한다면 그건 비효율적일 것입니다.
그래서 이런 일반적인 유틸 함수들을 모아서 제공해주는 라이브러리가 Lodash입니다.
Lodash는 자바스크립트 용 유틸리티 라이브러리이며, 자주 쓰이는 최신 기능들을 모아놓은 라이브러리입니다.
Lodash는 배열, 숫자, 객체, 문자열 등을 순회하면서 각 요소마다 원하는 기능을 실행하거나, debounce나 throttle처럼 구현하기 번거로운 함수들을 제공해줍니다.
Lodash 설치방법
아래 방법 중 취사 선택하여 설치/사용이 가능합니다.
// 브라우저에서 사용
<script src="lodash.js"></script>
// npm으로 설치
$ npm i --save lodash
// Node.js에서 사용
const _ = require('lodash');JSON
JSON 개요
JSON은 JavaScript Object Notation의 약자입니다.
JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준입니다.
이러한 JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습니다.
또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다.
JSON은 2009년에 더글라스 크록포드(Douglas Crockford)가 처음으로 규정하였습니다.
현재 JSON은 RFC 7159와 ECMA-404라는 두 개의 경쟁 표준에 의해 규정되고 있습니다.
ECMA 표준에서는 문법만 정의할 정도로 최소한의 정보만 정의되어 있으며, RFC 표준은 문법 및 보안에 관련된 사항까지 일부 제공하고 있습니다.
JSON 구조
JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합입니다.
따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성됩니다.
- JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
- JSON 데이터는 쉼표(,)로 나열됩니다.
- 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
- 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.
JSON 문법
JSON은 자바스크립트의 객체 표기법에서 리터럴(literal)과 프로퍼티(property)를 표현하는 방법만 가져와서 사용합니다.
JSON도 주석을 작성할 수 있는데, 다른 문서와의 호환을 위해 주석은 되도록이면 사용하지 않는 것이 권장됩니다.
리터럴(literal)
리터럴(literal)은 변수와 다르게 해석되는 값 그 자체를 의미합니다.
1234 // 숫자 리터럴
"JSON" // 문자열 리터럴
false // 불리언 리터럴객체(object)
객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.
JSON에서 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.
{
"name": "Tom",
"family": "Brown",
"age": 15,
"weight": 50,
}Storage
웹 storage
웹 스토리지(web storage)에는 로컬 스토리지(local Storage)와 세션 스토리지(session Storage)가 있습니다.
이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다.
세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.
다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다.
반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.
하지만 이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당합니다.
Local Storage 사용법
local storage와 session storage는 기본적으로 동일한 API로 이루어져 있습니다.
따라서 각종 명령어나, 문법 등이 완전히 동일합니다. (localStorage 키워드를 sessionStorage로 바꾸면 되는 식입니다.) 따라서 local storage에 대한 부분만 언급하고자 합니다.
기본적인 사용법은 다음과 같습니다.
// 키에 데이터 쓰기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;엄밀하게는 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStorage로 로컬 스토리지 객체에 접근할 수 있습니다.
웹 스토리지를 사용할 때 주의해야 할 부분은, 오직 문자형(string) 데이터 타입만 지원한다는 것입니다.
정규표현식
