위기가 찾아왔다.

갑작스런 파이어베이스의 등장으로 조금 헷갈리기 시작을 했어요.

html,css,자바스크립트로 할 때 까지는 괜찮았는데 파이어베이스를 이용하면서 뭔가 난이도가 확 높아진 느낌이 들었어요.

기존에 내가 알던 index.html이 아니야 ..

기존에는 index.html에다가 코드를 적어내려갔지만, 이번에는 단순히 이동 포탈역할을 하는 것 같습니다.
기본적으로 style.css와 부트스트랩, 그리고 jquery등 cdn만 연결을 해놓고
바로 각각의 page1.html, page2.html 을 따로 만들어야 하더라구요.

갑작스럽게 생겨난 라우터?

예제 코드를 받아서 살펴보고있는데, 생각보다 처음보는 단어들이 머릿속을 어지럽게 하고있네요.
갑자기 import, export가 생겨나고, 굉장히 많은 변수들이 생겨났더라구요.
조금 당황하긴 했지만 시간을 들여서 하나하나 천천히 읽어봤습니다.

예전 같았으면 대강 훓고 넘어갔을텐데.. 이번에는 어떤게 어떻게 흘러가는지 알아야하니깐 최대한 한줄 한줄씩 이해하고 넘어가야만 했습니다.

import { authService, storageService } from "../firebase.js";
// 예네들이 정의해놓은 메소드임
import {
  ref,
  uploadString,
  getDownloadURL,
} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-storage.js";
import { updateProfile } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";


// 유니크 아이디 만들어주는 라이브러리
import { v4 as uuidv4 } from "https://jspm.dev/uuid";


export const changeProfile = async (event) => {
  event.preventDefault();
  document.getElementById("profabledileBtn").dis = true;


  // 이미지를 가져오려고 참조하는것 
  const imgRef = ref(
    // 스토리지 서비스 집어넣고
    storageService,
    // 스토리지 경로
    `${authService.currentUser.uid}/${uuidv4()}`
  );

  // 프로필 닉네임
  const newNickname = document.getElementById("profileNickname").value;
  // 프로필 이미지 dataUrl을 Storage에 업로드 후 다운로드 링크를 받아서 photoURL에 저장.
  // imgDataUrl를 꺼내서 쓰는거임
  const imgDataUrl = localStorage.getItem("imgDataUrl");
  let downloadUrl;

  if (imgDataUrl) {
    const response = await uploadString(imgRef, imgDataUrl, "data_url");
    downloadUrl = await getDownloadURL(response.ref);
  }


  await updateProfile(authService.currentUser, {
    displayName: newNickname ? newNickname : null,
    photoURL: downloadUrl ? downloadUrl : null,
  })
    .then(() => {
      alert("프로필 수정 완료");
      window.location.hash = "#fanLog";
    })
    .catch((error) => {
      alert("프로필 수정 실패");
      console.log("error:", error);
    });
};

export const onFileChange = (event) => {
  const theFile = event.target.files[0]; // file 객체
  const reader = new FileReader();
  reader.readAsDataURL(theFile); // file 객체를 브라우저가 읽을 수 있는 data URL로 읽음.
  reader.onloadend = (finishedEvent) => {
    // 파일리더가 파일객체를 data URL로 변환 작업을 끝났을 때
    const imgDataUrl = finishedEvent.currentTarget.result;
    localStorage.setItem("imgDataUrl", imgDataUrl);
    document.getElementById("profileView").src = imgDataUrl;
  };
};



export const functionName = () => {

}

아직까지는 완벽하게 이해가 되지 않습니다만, 벨로그에 틈날 때마다 개념들을 하나씩 정리를 해야 할 것 같네요.