[ Firebase + JS ] 파이어베이스 9버전에서 달라진 모듈 형식의 라이브러리 가져오기

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

// 이메일과 비밀번호로 사용자 생성
firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
  })
  .catch((error) => {
  });

오브젝트 v1 프로젝트에서는 파이어베이스 8버전을 사용했을 때는

파이어베이스 8버전에서는 네임스페이스(Namespace) 형식의 라이브러리로

위와 같이 작성했다. 전역 객체에 네임스페이스 형식으로 기능들이 포함되어 있다.

 

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

//이메일과 비밀번호로 사용자 생성
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
  })
  .catch((error) => {
  });

파이어베이스 9버전에서는 ECMAScript 모듈 형식이 채택되어 

각각 분리되어 개별적으로 불러와서 사용할 수 있게 되었다.

필요한 모듈만 가져와서 사용할 수 있기 때문에 코드의 구성이나 유지보수가 훨씬 용이해졌고

트리쉐이킹이 가능한 형태를 가지고 있어 사용하지 않는 코드를 자동으로 제거하여

번들 크기를 최적화 할 수 있게 되었다. 이로 인해 더 작은 번들 크기를 갖게 되는 장점을 가지고 있다.

 

***번들 Bundle 이란?

번들은 프론트엔드 개발에서 사용되는 여러 모듈들을 하나로 묶은 파일을 의마한다.

번들링은 프로젝트에서 사용된 모든 자바스크립트 파일들을 하나로 합쳐서 

단일 파일로 만드는 과정을 말한다.

번들의 장점은 웹 페이지에서 필요한 모든 코드를 하나의 파일로 로드함으로 네트워크 요청수를 줄일 수 있어 웹 페이지의 성능이 향상될 수 있다는 점이다. 또한, 번들을 최적화하여 사용하지 않는 코드를 제거하거나, 코드를 압축해서 번들 크기를 최소화 하는 등의 최적화 작업도 가능하다.

주로 사용되는 모듈 번들로는 Webpack, Rollup, Parcel 등이 있다. 

 

***트리쉐이킹 Tree Shaking 이란?

트리쉐이킹이란 모듈 번들러가 사용하지 않는 코드를 자동으로 제거하는 기능.

모듈 번들러는 프로젝트에서 사용하는 모든 모듈을 번들로 묶어 하나의 파일로 만드는데 때로는 모든 모듈이 사용되지 않을 수도 있다. 이럴 때에 트리 쉐이킹은 사용되지 않는 코드를 제거해 최적화된 번들을 생성한다. ECMAScript 모듈 시스템에서만 사용가능한 기능으로, 보통 모듈 번들러가 이 기능을 지원하여 자동으로 수행한다.

 

---

 

 

updateEmail과 updatePassword의 JS파일의 import한 부분을 보면

updateEmail에는 updateEmail을 updatePassword에는 updatePassword,sendPasswordResetEmail이라는 

각각의 필요한 모듈을 가져와서 사용함을 볼 수 있다. 

 

membership.js에서는 멤버십 선택에 따라 파이어스토어에 멤버에 대하여 저장해줘야 하기 때문에

updateDoc,setDoc,doc 등 firestore에 관련된 모듈을 많이 사용했다.