프론트엔드 심화 3주차

zero_0·2021년 8월 15일
0

FE 학습

목록 보기
8/22
post-thumbnail

포스트 목록 가져오기

🎈데이터가 어떻게 변할 지 먼저 고민하고 만들기 시작하는 습관!

예)

  • 추가를 하면,
    → post_list 배열에 포스트 게시글 딕셔너리가 하나 추가
  • 수정을 하면,
    → post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 게시글 내용하고 이미지 url을 수정 (다른 건 수정 못하게 하자!)
  • 삭제를 하면,
    → post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 찾은 걸 배열에서 삭제
  • 가져오기를 하면,
    → post_list를 전달

파이어스토어 연동하기

  • firebase.js에서 파이어스토어 추가

    ```jsx
    // shared/firebase.js
    import "firebase/firestore";
    ...
    const firestore = firebase.firestore();
    ...
    export{auth, apiKey, firestore};
    ```
  • reduce 사용해서 깔끔하게 보이기

포스트 작성하기

게시글을 작성하고 파이어스토어에 저장해봅시다
moment는 자바스크립트에서 날짜, 시간 객체를 편히 다루기 위한 패키지입니다. 🙂

  • firestore에 데이터 넣기

    moment 패키지 설치
    yarn add moment

firebase Storage

파이어베이스 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를 사용하죠!)에 파일을 업로드해주는 거예요.

  • Preview 만들기

    (인풋 태그)를 사용해서 유저가 선택한 파일을 File 객체로 받아오는 건 이제 알고 있죠! FileReader는 이 파일의 내용을 읽어 옵니다.
    이게 무슨 뜻이냐면, 파일을 읽어왔으니 미리 보기도 만들 수 있고 다른 이름으로 저장도 할 수 있게 해준다는 거예요. 😎 아주 유용하죠!

  • 타입 확인하기

    console.log(typeof _image);
    typeof를 써서 preview의 타입을 확인해봅시다!
    그리고 firebase Storage 공식 문서에서 data_url로 파일 업로드하는 방법을 찾아, 업로드까지

Debounce와 Throttle

  • 이벤트를 관리할 수 있는 두 가지 방법

    • 1) debounce란?

      이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행해요! 일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소해요. (누르는 동안에는 콘솔에 안나옴, 키보드에 손떼면 찍힘)

    • 2) throttle이란?
      일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해줘요.(키보드 누르는 동안에도 콘솔에 입력됨)

👇 useCallback 개념! 함수형 컴포넌트에서 함수를 메모이제이션* 하는 방법!

*메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.

lodash로 이벤트 관리하기

Lodash는 자바스크립트 유틸리티 라이브러리예요!
배열 관리부터 모듈화, 성능 향상과 관련된 것까지 엄청 많은 기능을 제공해요!
오늘 배울 debounce와 throttle도 제공합니다!
공식문서

yarn add lodash

알림페이지 만들기

게시글 수정

이번 주차도 끝났담 ㅎㅎ

profile
차근차근 채워가는 it일지

0개의 댓글