[TIL] 23_1222 firestorage 내장함수, flex로 비율 조정

배운 것

 

firestorage의 내장함수

-파일 업로드 기능을 만들어서 파이어스토리지를 통해 이미지를 가져오고
미리보기 화면에 그 이미지를 보이게 하기 위해 찾아보게 됐어.

 

파일 업로드엔 

아래와 같은 내장 함수들이 필요해.

-getStorage

-ref

-uploadBytes

=> 해당 내장함수를 사용할 때 import를 생성해줘야 해.

 

 

 

1-아래의 문을 통해 필요한 적절한 참조를 만들어줘

import { getStorage, ref } from "firebase/storage";

// Create a root reference
const storage = getStorage();

// Create a reference to 'mountains.jpg'
const mountainsRef = ref(storage, 'mountains.jpg');

// Create a reference to 'images/mountains.jpg'
const mountainImagesRef = ref(storage, 'images/mountains.jpg');

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name;           // true
mountainsRef.fullPath === mountainImagesRef.fullPath;   // false

 

2-그 다음 파이어스토리지의 uploadByes() 메서드를 호출해서 Cloud Storage에 업로드해.

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});

 

이후 Cloud Storage에서 가져온 자료를 미리보기 화면에 띄우는 로직을 세우면 돼.

이 로직은 고민해봐야할 것 같아.

 

*참고 사이트 

- 파이어베이스 문서 : https://firebase.google.com/docs/storage/web/upload-files?hl=ko 

 

 

Flex로 화면비율 조정하기

 

-flex-basis

-fles-grow

=> 위의 속성을 사용해서 적용했어

 

 

 

*참고 사이트 : https://studiomeal.com/archives/197

 

 

난제봉착

-프로젝트를 만들다가 중간에 reset.css, layout.css를 적용시켰더니
일부 화면의 이전의 레이아웃이 날라가게 됐어

 

난제해결방안

1-reset.css를 수정하면서 기본 css를 같이 조정하거나

2-아예 reset.css를 적용시킨 상태에서 css를 다시 만들거나

3-이렇게 해봐도 안 된다면 reset.css만 제외하고 만들게 되지 않을까 싶어.

그래도 아직 css를 많이 만든 건 아니라서 금방 css를 다시 만들 것 같기도 해.

느낀 점

-git checkout과 로컬 저장소, 원격 저장소 개념을 공유하면서
호텔 체크아웃을 예시로 설명드렸더니 이해가 잘 되신다고 하셨어.

다음에도 설명할 일이 있다면 이 예시를 활용해야겠어.

-백엔드 기능을 해주는 파이어베이스를 사용하는 건 편해서 좋은데

내장함수를 이용할 때 레퍼런스가 적은 것 같아서 더 찾아보면서 적용해봐야겠어.

 

-flex를 더 활용해보고 머릿속으로 그려질 때까지 다양하게 써봐야할 것 같아.