항해99 4주차 react

jooooo·2021년 11월 24일
0
post-thumbnail
post-custom-banner

오늘은

8시30분 기상 및 아침식사
9시 게더입장
저녁시간을 이용하여 6~7시 운동

진행현황

오늘은 5-2까지 강의를 듣고 개인과제를 시작하는 것이 목표이다.
오늘 들을 강의는 firebase를 다루는 내용인데 firebase에서 데이터를 저장하고 리듀스와 기능을 연결하여 새로고침하여도 데이터가 남아있도록 구현해 보는 것이었다. 강의를 하루 종일 들었는데 전부 이해하지는 못하고 감만 익히며 겨우겨우 강의를 다 들었다.
일단은 개인과제에 사용해야할 뷰부터 만들고 기능을 넣어볼 생각이고 파이어 베이스와 리덕스가 너무 어렵지만 너무 부담갖지 않고 할 수 있는 부분까지만 해보자라는 마인드로 과제에 임할 생각이다.

오늘의 필기

  • 파이어 베이스란?
    리덕스에만 데이터가 저장되기때문에 새로고침을하면 데이터가 다 날아간다.
    이 데이터들을 저장소에 저장할 필요성이 있다 이 때 사용하는 것이 파이어 베이스에 스토어 이다.

  • 웹의 동장방식
    서버와 클라이언트의 요청과 응답으로 굴러간다.

  • 서버가 하는일
    데이터 관리, 분산처리, 웹 어플리케이션 구동 등 서버가 하는 일이 많은데
    서버가 하는 일은 우리가 전부 관리를 해줘야한다.(서버리스를 사용하는 이유)

  • 다시한번 나온 서버리스
    서버가 해야할 일을 미리 만들어놓은 서버를 빌려 쓰는 것

  • BaaS는?
    Backend as a Service의 약자이다
    백엔드 하면 떠올리는 것 들을 빌려오는 것

  • 파이어 베이스 사용시
    데이터베이스, 소셜 서비스 연동, 파일시스템 등을 API형태로 제공해 준다.

  • 파이어 베이스 설정
    우측 상단 콘솔로 이동버튼
    프로젝트 만들기 버튼
    프로젝트 이름 입력 ex) sparta-react-basic
    계속 버튼 누르기
    fire base 프로젝트를 위한 google 애널리틱스
    *사이트에서 발생하는 사용자의 행동데이터를 쌓을 수 있는 것을 애널리틱스라 한다.
    사용설정 체크후 다음
    애널리틱스 구성
    Default Account for Firebase 고른 후 프로젝트 만들기

  • 파이어 스토어란?
    Firebase에 포함되어 있는 서비스 중 하나로
    유연하고 확장 가능한NoSQL 클라우드 데이터베이스 입니다.
    Collection 문서의 집합 Document JSON형식으로 데이터를 저장 할 수있다

  • 파이어 베이스 패키지 설치
    yarn add firebase

  • 파이어 베이스에서 접근할때는
    항상 컬렉션 먼저 접근하고 다음에 docs로 접근해야한다.
  • 미들웨어 설치
    yarn add redux-thunk

  • redux-thunk란
    객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줌

미들웨어
리덕스 데이터를 수정할때 [액션이 디스패치-> 리듀에서 처리]
이 과정 사이에서 미리 사전 작업을 가능하게 하는 중간다리 역할
[액션->미들웨어가 할 일 하기->리듀에서 처리]

공부해 볼 내용
display: flex
useEffect기능
동기와 비동기

profile
INFP🖐
post-custom-banner

0개의 댓글