[JS] 종속되지 않은 파일끼리 데이터 공유하는 방법 (with. window객체, 세션 등)

프로젝트를 진행하던 중 고민거리가 하나 생겼다. 바로 모듈화된 자바스크립트 파일끼리의 데이터 공유방법이다.

 

예시 프로젝트 구조를 살펴보자. 

// api.js
export const MAX_VALUE = 10

// a.js
import {MAX_VALUE} from 'api.js'
const 갖고싶은변수 = 20;
/* 각종 코드 ... */

// b.js
import {MAX_VALUE} from 'api.js'
/* 각종 코드 ... */

위와 같은 프로젝트가 있다고 가정 했을 때 둘 다 `constant`의 변수에 `import`를 해서 접근 한다. 하지만 어느 날 b에서 a의 변수 딱 하나, 더도 말고 딱 하나 `갖고싶은변수`에 접근이 필요할 경우가 생긴 것이다.

 

 

하지만 `type=module` 로 정의된 자바스크립트 파일끼리는 서로 참조가 불가능하다. 따라서 1차 적으로 생각한 방법이 바로 a의 값도 export를 해주는 방법이었다. 

// api.js
export const MAX_VALUE = 10

// a.js
import {MAX_VALUE} from 'api.js'
let 갖고싶은변수 = 20;
/* 각종 코드 ... */
export {갖고싶은변수}

// b.js
import {MAX_VALUE} from 'api.js'
import {갖고싶은변수} from 'a.js'
/* 각종 코드 ... */

이렇게 하면 a의 값을 가져올 수는 있겠다. 코드가 지저분해지지만 예외적으로 한 두번 정도는 봐줄 수도 있다. 하지만 a의 값을 업데이트하려면 대체 어떻게 해야하나. 아마 a에서 `갖고싶은변수` 의 값을 업데이트 하는 함수를 만들고, 그 함수를 b에서 import해서 사용해야될 것이다. 생각만해도 귀찮고 끔찍하다.

 

그럼 어떻게 해결할 수 있을까?

 

💡 window 전역객체 사용

브라우저 환경에서 동작하는 웹사이트는 `window`라는 글로벌 변수가 있다. 여기에 속성을 추가해주면 프로젝트내의 모든 js 파일에서 공유가 가능하다. (다른 도메인에서도 접근이 가능할 것..이다 아마)

// a.js
window.갖고싶은변수 = 20;

// b.js
/* 특정 이벤트를 처리하는 등의 아무개 함수 */
window.갖고싶은변수 = 10;

 

위의 방법을 사용해서 뭐 특정 이벤트가 발생했을때 window `갖고싶은변수` 속성의 값을  업데이트해준다. 가장 간단한 방법인 것 같다. 

 

문제점

딱 봐도 문제가 많아 보이긴 하지만 대표적으로 어떤 문제들이 있는지 GPT한테 물어보았다.

 

네임스페이스 오염

• `window` 객체를 사용해서 속성을 마구잡이로 추가하면 전역 네임스페이스가 오염될 수 있다.
• 유지보수하기 어렵고 겹치는 이름등의 문제로 예상치 못한 오류가 발생할 수 있다.

보안 문제

• 보안은 아직 잘 모르지만 누가 봐도 중요한 값을 넣으면 안될 것 처럼 생겼을 것이다. 

그 외 디버깅과 성능 문제가 있을 수 있다.

 

 

💡web storage 사용 

localStorage

• 지정한 데이터를 지우지 않는 한 데이터의 영구적인 보관이 가능하다. (브라우저 껏다 켜도 남아있음)

sessionStorage

• 브라우저의 탭, 창을 닫으면 데이터가 사라지게 된다.

 

이외에도 Cookies 등이 있으며 사용 방법은 검색하기

 

💡 정리

부득이하게 설계 미스로 다른 파일과 데이터를 공유할 수 있는 방법으로는 `window` 전역객체와 `web storage` 그리고 `핸들러함수`를 export해서 사용하기 크게 3가지가 있다. 각각 특징이 있고 장단점이 있다. 취지에 맞게 문제되지 않는 범위 내에서 사용하면 좋을 것 같다. 

 

+추가로 리액트에서는 저러한 값들을 공유할 수있는 상태관리 라이브러리들이 있다고 한다. (state, redux 등)