[TIL 2023.02.27] 브라우저 저장소 / Require와 Import

김헤일리·2023년 2월 27일

TIL

목록 보기

35/46

지식 보충을 위해 조금씩 정리를 해보자! #5

1. 브라우저 저장소

브라우저의 저장소는 cookie와 web storage 2개로 나눠지고, web storage는 다시 한번 local storage와 session storage로 나뉜다.

📦 Cookie와 Web Storage

Cookie란?

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
때문에 필요할 때 해당 정보를 참조하는 방식으로 동작한다.
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.
클라이언트에 300개까지 쿠키저장 가능하고, 하나의 도메인당 20개까지 값을 가질 수 있다.
하나의 쿠키값은 4KB까지 저장이 가능하다.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

Web Storage 란?

서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.
약 5MB까지 저장 공간을 이용할 수 있고, 각각 고유한 특성을 갖고 있는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)로 나누어진다.
쿠키와 동일하게 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회할 수 있다.
단순문자열을 넘어 객체정보를 저장할 수 있다.
세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어지고 속도가 느려질 수 있다.

Cookie와 Web Storage의 차이점

쿠키는 매번 서버로 전송된다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.
단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.
용량의 제한이 없다
쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 이러한 제한이 없다. 그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있습니다. 그리고 대부분 쿠키의 제한으로까지 데이터를 저장할 일이 없다.
영구 데이터 저장이 가능하다
쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.
물론 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정할 수도 있다.

WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.

📦 Local Storage & Session Storage

Local Storage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
도메인마다 별도로 로컬 스토로지가 생성된다.
Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다.

Session Storage

데이터의 지속성과 액세스 범위에 제한이 있다.
브라우저를 종료하면 삭제된다.
도메인이 같아도 브라우저가 다르거나, 탭이 다르면 다른 저장소이다. 즉 서로 침범할 수 없다.
클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 세션 ID를 부여한다.

2. 자바스크립트 모듈 키워드

기본적으로 require와 import는 외부 파일이나 라이브러리를 불러올때 사용하는 모듈 키워드다. require는 NodeJS에서 사용되고 있는 CommonJS의 키워드이고, import는 ES2015에서 새롭게 도입된 키워드다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조 지니고 있다.

📦 Require

require-exports 는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다라고 볼수 있다. ES6 사양을 지원하지 않는 환경이거나, Babel 과 같은 인터프리터가 없을 땐 require 을 사용해야 한다.

/* CommonJS  */
const name = require('./module.js');

[ CommonJS 방식으로 사용시 주의 사항 ]

CommonJs 방식으로 모듈을 내보낼때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다.
특히, 제일 햇갈리는 부분이 바로 유사해 보이는 export 변수와 module.exports 변수를 상황에 맞게 잘 사용해야 한다는 점이다.
기본적으로 2가지 규칙만 기억하면 된다.
1. 여러개의 객체를 내보낼 경우 → export. = 변수 의 개별 속성으로 할당
2. 딱 하나의 객체를 내보낼 경우 → module.exports = 객체 자체에 할당

📦 Import

import-export 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다.

/* ES6 */
import name from './module.js'

require와 import의 주요 차이점을 정리해보면 다음과 같다.
- require()는 CommonJS를 사용하는 node.js문이지만 import()는 ES6에서만 사용
- require()는 파일 (어휘가 아님)에 들어있는 곳에 남아 있으며 import()는 항상 맨 위로 이동
- require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있다. (그렇지만 import 전용 비동기 문법으로 파일 중간에 모듈 불러오기를 할 수 있다.)
- 하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다
- 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require()보다 성능이 우수하며 메모리를 절약한다.

출처: