항해 중267 5주차 - 페이지 의도적으로 가리기 1) 페이지를 왜 가려야 하나요?? -> 버킷리스트 앱을 새로고침 해보면 redux에 넣어 뒀을 경우 가까 데이터가 보이게 됩니다. 파이어 스토어의 데이터만 제대로 보여주고 싶을 때는 어떻게 하면 좋을까요?? -> 파이어스토어에서 데이터를 가져 올 때까지 페이지를 가려 버리면 됩니다. (이외에도 수정이나 추가하기 버튼을 눌렀을 때, 여러번 API를 호출하는 현상을 방지하기 위해서 페이지를 가립니다.) 2) 로딩 스피너 만들기 - 로딩 스피너 컴포넌트 만들기 (Spinner.js) import React from "react"; import styled from "styled-components"; import {Eco} from "@material-ui/icons"; const Spinner = (pro.. 2021. 11. 25. 5주차 - 머테리얼 UI 사용하기 1) 부트스트랩처럼 이미 다 만들어진 ui를 가져다 써보자! 더보기 머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요. 공식 문서(https://material-ui.com/)에서 어떻게 생겼는 지 보고 사용 해봅시다! 2) 머테리얼 UI 설치하기 yarn add @material-ui/core @material-ui/icons 3) 버킷리스트 프로젝트 중 ! 머테리얼 UI를 사용해서 고쳐봅시다! (4주차 과제에 바로 접목 시킴) import React from "react"; import { useParams, useHistory } from "react-router-dom"; import { useSelector, useDispatch } from "react-r.. 2021. 11. 25. [TIL] 21일차 카페 가서 강의 듣거나, 코드 치는 게 진짜 꿀이다. 집에서는 오새봄 엄청 짖어서 정신 사나웠는데 맨날 엄마 카드로 다녀야지 (망고 스파클링 엄청 맛있음) 키워드 : doc -> 참조 데이터 / n.indexOf is not a function 오류 1) doc으로 받아온 반환값은 타입이 document(문서)이기 때문에 참조 데이터이다. const docRef = doc(db, 'dictionary', dictionary_id) 참조값은 데이터를 받아와서 사용 할 수 없기 때문에 (await getDoc(docRef)) 를 사용해서 docRef에 해당하는 데이터를 불러오면 promise 형태로 넘어온다. (await getDoc(docRef)).data() 거기서 내가 원하는 값은 딕셔너리의 형태의 데.. 2021. 11. 24. 5주차 - fireStore 적용하기 리덕스에서 firestore 데이터 가지고 놀기 - firestore 적용하기 1) load 할 때 데이터를 가지고 오기 -> 일단은 액션 부터 // 액션 타입 const LOAD = "bucket/LOAD"; ... // 액션 생성 함수 export function loadBucket(bucket_list){ return {type: LOAD, bucket_list}; } -> 파이어베이스랑 통신하는 함수 만들기 import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, } from "firebase/firestore"; import {db} from "../../firebase"; // 파이어베이스랑 통신하는 부분 export c.. 2021. 11. 24. [TIL] 20일차 firebase 강의 들어도 하나도 모르겠어서, 일단 틀이랑, router, redux, keyframes를 사용해서 구현했다. 팀원분이 멘토님께 질문 해주신 부분 중에서 기억 해두면 좋을 것 같아서 정리 Q. 여러 개의 ref를 하나의 useRef()에 담는 방법은 어떤 게 있나요??👀👀 A1. 각각에 요소에 ref를 넣는다. A2. 값을 가져올 요소들의 부모 요소에 ref를 넣고, 값을 가져온다. A3. ref를 배열 형태로 담아서 배열 index에 각각 담는다. -> 어떤 코드를 썼을 때 효율적인 지 생각 해보면 된다. 내일은 fireStore 강의 듣고, 프로젝트에 접목 시켜야 할 것 같다. 프로젝트 빨리 끝나면 수정 기능도 만들고, 코딩애플 강의 들을 듯 2021. 11. 23. 4주차 개인 과제 설치 해야 하는 패키지 목록 - yarn add redux react-redux - yarn add styled-components - yarn add react-router-dom@5.2.1 - yarn add redux-thunk - yarn add firebase (+ firebase.js 생성, configStore.js에 미들웨어 연결) - yarn add @material-ui/core @material-ui/icons 11월 22일 3주차, 4주차 강의를 들으면서 redux란 뭔지 keyframes는 어떻게 사용하는 건 지 fireStore는 서버리스이고, firebase는 어떻게 설정 하는 지 강의를 들으면서 습득했다. 5주차 강의는 5-1까지만 듣고 정지한 상태이다. 11월 23일 3,4.. 2021. 11. 23. [TIL] 19일차 리액트가 어려운 건 알겠다. 근데... 어려워도 너무 어렵잖아 아직은 초반이니까 코딩애플 강의도 들으면서 이해 해보려고 하자 오늘은 FireBase를 사용해서 백엔드 기능을 서버리스 해서 사용하는 방법을 공부했다. 처음 들어보는 문법과 내용들이라서 아직 이해를 못했고, 멘탈이 터져서 5-1까지만 듣고 오늘은 마무리 2021. 11. 22. 5주차 - 미들웨어(firestore 데이터를 리덕스 스토어에 넣으려면?) firestore에서 redux로 데이터를 가지고 오는 건 서버에서 데이터를 받아오는 것과 같습니다. 서버에서 데이터를 가져올 때 바로바로 알 수 있나요?? 아니요. 요청을 보내면 응답이 올 때까지 이 작업이 끝났는 지 끝나지 않았는 지 알 수 없습니다. 이런 걸 비동기 통신이라고 합니다. 즉, firestore에서 데이터를 가지고 오는 비동기로 데이터를 가지고 오는 것과 같습니다. 비동기로 데이터를 받아오면 이 데이터를 어디에 넣어줘야 할까요?? 액션 생성 함수?? 액션 생성 함수는 액션만 return 해줘야 합니다. 리듀서?? 리듀서는 순수 함수여야 하기 때문에 파라미터(인자)로 받아오는 데이터만 사용 해야 합니다. (외부에서 데이터를 가지고 오면 안됩니다. 서버에서 오는 데이터도 외부의 데이터 입니.. 2021. 11. 22. 4주차 - Firebase, FireStore Firebase란? 웹의 동작방식 : 웹은 요청과 응답으로 굴러갑니다. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답 서버가 하는 일 : 서버가 하는 일은 엄청 많아요. 우리가 알고 있는 것처럼 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고... 서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 해요. 서버리스란? : 서버리스는 서버가 없다가 아니라, 서버를 신경 쓸 필요없다 입니다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠! 우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요. BaaS는 뭘 빌려 오는 건가요? : BaaS는 Back.. 2021. 11. 22. 이전 1 ··· 14 15 16 17 18 19 20 ··· 30 다음 728x90
