🎈데이터가 어떻게 변할 지 먼저 고민하고 만들기 시작하는 습관!
예)
```jsx
// shared/firebase.js
import "firebase/firestore";
...
const firestore = firebase.firestore();
...
export{auth, apiKey, firestore};
```
게시글을 작성하고 파이어스토어에 저장해봅시다
moment는 자바스크립트에서 날짜, 시간 객체를 편히 다루기 위한 패키지입니다. 🙂
moment 패키지 설치
yarn add moment
파이어베이스 Storage 만들기
Storage 설정하기
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";
const firebaseConfig = {
apiKey: "여러분의 api key를 여기에!",
... // 그 외 설정들이 여기에 들어가요! apikey와 함께 넣어주세요!
};
firebase.initializeApp(firebaseConfig);
const apiKey = firebaseConfig.apiKey;
const auth = firebase.auth();
const firestore = firebase.firestore();
const storage = firebase.storage();
export{auth, apiKey, firestore, storage};
[알면 재미있는 이야기]
드디어 (인풋 태그)의 type="file"
을 썼어요!
유저가 내 컴퓨터에 있는 파일을 가져오게 해줍니다.
유저가 input으로 업로드할 파일을 선택하면, 인풋태그는 FileList라는 객체에 파일들을 담아 보관해요.
그리고 이 FileList에 있는 파일 하나, 하나가 File 객체죠!
만약 유저가 선택한 파일이 이미지라면, 이 이미지의 이름이 뭔지, 크기는 어떻게 되는 지 같은 정보를 가지고 있어요. (물론 파일 내용도요!)
우리는 이 File객체를 사용해서 저장소(우리는 파이어베이스의 Storage를 사용하죠!)에 파일을 업로드해주는 거예요.
(인풋 태그)를 사용해서 유저가 선택한 파일을 File 객체로 받아오는 건 이제 알고 있죠! FileReader는 이 파일의 내용을 읽어 옵니다.
이게 무슨 뜻이냐면, 파일을 읽어왔으니 미리 보기도 만들 수 있고 다른 이름으로 저장도 할 수 있게 해준다는 거예요. 😎 아주 유용하죠!
console.log(typeof _image);
typeof를 써서 preview의 타입을 확인해봅시다!
그리고 firebase Storage 공식 문서에서 data_url로 파일 업로드하는 방법을 찾아, 업로드까지
이벤트를 관리할 수 있는 두 가지 방법
1) debounce란?
이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행해요! 일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소해요. (누르는 동안에는 콘솔에 안나옴, 키보드에 손떼면 찍힘)
2) throttle이란?
일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해줘요.(키보드 누르는 동안에도 콘솔에 입력됨)
👇 useCallback 개념! 함수형 컴포넌트에서 함수를 메모이제이션* 하는 방법!
*메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.
Lodash는 자바스크립트 유틸리티 라이브러리예요!
배열 관리부터 모듈화, 성능 향상과 관련된 것까지 엄청 많은 기능을 제공해요!
오늘 배울 debounce와 throttle도 제공합니다!
공식문서
yarn add lodash
이번 주차도 끝났담 ㅎㅎ