본문 바로가기

stories

npm과 cdn (firebase를 배우며)

firebase를 배우는 과정에서 공식문서와 다른 유튜브 영상들을 찾아보면 알 수 있는 건

 

npm firebase install 과 같은 명령어를 먼저 입력하는 것이다.

 

node.js를 설치하면, vsc에서 터미널을 통해 모듈들을 설치, 활용할 수 있게 된다.

거기서 사용되는게 npm이라는 명령어인데, 이것은 node package manager 라는 이름의 소프트웨어이다.

 

처음엔 의문이 들었다. 왜냐면 교육과정에서 CDN만을 알려주는 경우가 많았기 때문이다

  <script type="module">
    // Firebase SDK 라이브러리 가져오기
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
    import { getStorage } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js';
    import { collection, addDoc } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
    import { getDocs } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';

 

이런식으로 말이다.

CDN방식은 외부에서 링크를 따오는 방식으로 공식 가이드에서 활용하는 방법이 잘 서술되어있다.

https://firebase.google.com/docs/web/learn-more?hl=ko#libraries-cdn

 

웹 및 Firebase 자세히 알아보기

의견 보내기 웹 및 Firebase 자세히 알아보기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Firebase를 사용하여 웹 앱을 개발하다 보면 생소한 개념을 맞닥뜨

firebase.google.com

 

 

 

 

 

 그리고 npm 을 활용하는 방식은 다음과 같다.

 

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

 

현 시점에서는 대부분이 npm 방식이 먼저 소개된다.

강의나 공식문서 또한 그러하다.

이유인 즉 최근 React와 같은 라이브러리를 활용하여 웹환경에서 프로그래밍을 하기에 적합하기 때문이다.

 

처음 왜 기초강의에서 CDN방식을 고집하는가에 대한 의문을 가졌다. 순수하게 javascript만으로 진행하는 것이 가장 큰 목적인 현 시점에서도 npm을 통해 firebase를 직접 설치하여 진행하는 방법이 불가능 한 것은 아니기때문이었다.

 

다만 미니프로젝트를 진행하기 위해 시간을 줄이기 위해 CDN을 사용했다는 것을 뒤늦게 알게 되었다.

npm을 활용하는 방법부터 천천히 나아가기엔 주어진 시간이 그리 넉넉하지 않았기 때문이다.

 

한 마디로 너희가 이런걸 하나부터 다 배우기엔 머리 터질걸 인 셈이다.

 

이번 프로젝트가 어느정도 정리된다면 우리 팀이 CDN을 사용하여 firebase를 이용하고 있다는 점과 npm을 이용한 방식이 있다는 부분을 팀원들과 나눌 생각이다.

 

그리고 아마도 올해의 크리스마스는 코딩을 하며 학습을 하며 보낼 것 같다.