Client Side에서 데이터 저장하기
Cookie
- 브라우저에서 저장되는 작은 문자열
- 다른 저장 방식에 비해 가장 오래된 방식
- HTTP 요청 시 헤더에 쿠키가 포함되어있어 쿠키 사이즈가 커지면 HTTP 요청 크기도 커짐
- 사이즈에 제한이 있음
- 여러가지 보안 취약점이 존재하기 때문에 사용에 주의
Cookie 추가
- key, value 값의 관계를 “=”(equal)로 표현
document.cookie = 'name=gugugu'- 쿠기에 유효기간을 설정하지 않은 상태면 브라우저를 닫는 순간 쿠키가 사라짐
// 쿠키에 유효기간 추가
// expries의 경우 GMT String을 넣어야하며 한국 시간과 다르다는 것을 알아야함
new Data().toGMTString() //현재 GMT 시간을 읽어올 수 있음
document.cookie = 'name=gugugu; expires=Mon, 2 Aug 2023 12:12:11 GMT'
// max-age를 통해 생성시점 기준으로 유효기간 설정가능 단위는 1초
document.cookie = 'name=gugugu; max-age=3600'Cookie 읽기
- 각 쿠키는 ‘;’로 구분되어 있어 split으로 쪼개서 사용해야함
const cookies = doument.cookie;
console.log(cookies.split(';');Local Storage
- key, value 기반으로 Local에 데이터 저장 가능 ⇒ string만 넣을 수 있으므로 JSON.stringify와 JSON.parse를 사용하는 것을 추천
- 도메인 기반으로 Storage가 생성됨 ⇒ 도메인만 같다면, 도메인이 같은 다른 탭에서도 같은 Storage 공유 가능
- 삭제하거나 Storage를 날리지 않는 한 삭제되지 않음
Local Storage 사용 방법
- localStrage에 저장하는 3가지 방법
window.localStorage.name = 'gugu' // 방법1 window.localStorage['name'] = 'roto' // 방법2 window.localStorage.setItem('name', 'roto') // 방법3 // 방법 3 - setItem을 사용하는 것을 권장함 // 방법 1, 2는 localStorage의 내장 함수들을 덮어 씌울 수 있어서 권장하지 않음
- Local Storage의 전체적인 사용 방법
// 저장 localStorage.setItem('name', 'gugu'); // 값 가져오기 const storedName = localStorage.getItem('name'); // 삭제 localStorage.removeItem('name'); // 전체 삭제 localStorage.clear(); - JSON.stringify와 JSON.parse로 값을 한 번에 저장하고 읽어오기
const user = { id: 'gugu', name: 'gugugu', } localStorage.setItem('user', JSON.stringify(user)) const storedUser = JSON.parse(localStorage.getItem('user'))
Session Strorage
- Local Storage와 비슷하지만 브라우저를 닫으면 저장된 내용이 초기화된다는 차이점이 있음
const user = { id: 'gugu', name: 'gugugu', }; sessionStorage.setItem('user', JSON.stringify(user)); const storedUser = JSON.parse(sessionStorage.getItem('user'));
ES6 Module
import
- export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드
- 스크립트 의존성을 훨씬 간편하게 관리할 수 있음 ⇒ 각 JS 별로 사용되는 모듈을 명시적으로 import 해오기 때문에 사용되지 않는 스크립트 추적이 가능!
- script src로 불러오는 것과 달리 전역오염이 발생하지 않음
// moduleName 내에 export default로 내보내진 것을 가져옴
import defaultExport from "moduleName";
// moduleName 내에서 export 된 모든 것을 가져옴, as 이후 이름은 자유롭게 정할 수 있음(중복 불가능)
// 사용하지 않은 모듈까지 가져올 가능성이 있음!!!
import * as allExport from "moduleName";
// moduleName 내에서 export 된 것 중 특정 값만 가져옴
import { someExport } from "moduleName";
// moduleName 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴
import { someExport as myExport } from "moudleName";
// export default 된 것과 개별 export 된 것을 한번에 가져옴
import defaultExport, { someExport } from "moduleName";
// 별도의 모듈 바인딩 없이 불러오기만 함, 불러오는 것 만으로 효과가 있는 스크립트의 경우 사용
import "moduleName"<HTML>
.
.
.
<!-- module 사용 시 type="module"을 잊지 말자! -->
<script src="index.js" type="module"></script>
</body>
</html>export
- export 한 모듈은 무조건 ‘use strict’가 적용됨
- 자바스크립트 스타일 가이드는 함수나 클래스 선언 끝에 세미콜론을 붙이지 않는 것을 권유함 → 같은 이유로
export class나export function끝에 세미콜론을 붙이지 않음! - “export default” 키워드를 통해 해당 모듈엔 하나의 개체만 있다는 사실을 명확히 나타낼 수 있음 → 하나의 파일엔 대개 하나의 “export default”만 있음
// 유명 내보내기
// import 할 경우 export 한 이름과 동일한 이름을 사용해야함
// import 시 중괄호 필요!
export let variable = 1;
export function myFunc() {}
// 기본 내보내기
// import 할 경우 어떤 이름으로도 import 가능
// import 시 중괄호 필요 없음!
export default function myFunc() {}
export default function () {}
// export as
export { myFunc as exportFunc, varibale, as exportVal };
// import한 객체를 다시 내보내기
export { myFunc } from './my.js'
export { default as User } from './user.js' // default export를 다시 내보내기함callback - 비동기 다루기
- 비동기 처리란 ⇒ 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특성
- JS는 싱글 스레드이기 때문에 sync(동기) 방식을 사용하게 되면 요청 후 응답이 오기 전까지 브라우저가 다른 함수나 스크립트를 실행 할 수 없는 상태가 됨… → async(비동기)를 사용하는 이유
- 비동기 처리를 하는 함수(ex. api 요청)들은 하나의 담당 파일에 빼두고 중복을 최소화하는 것이 좋음
컴퓨터공학과 학생입니다