firebase14 [TIL] 내일배움캠프 React 과정 2023.01.11 Today I Learend React Native 팀 프로젝트 진행 Firebase Error: Need to provide options import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getAuth } from "firebase/auth"; // ❌이 위치에 넣으면 안됩니다. const app = initializeApp(firebaseConfig); export const dbService = getFirestore(app); export const authService = getAuth(app); const firebaseConfig = { apiKey: .. 2023. 1. 13. [TIL] 내일배움캠프 React 과정 2023.01.05 Today I Learned React Native 심화 강의 수강 !!(느낌표 두 개) 연산자가 뭐지? let a = 1 console.log(!a) // false console.log(!!a) // true let a = undefined console.log(!!a) // false 해당 변수에 값이 할당되어있으면 true, 그렇지 않으면 false로 반환해주는 매우 유용한 연산자이다! 참고 https://hermeslog.tistory.com/279 https://velog.io/@hoon_dev/JavaScript-느낌표-두개Double-Exclamation-Marks-연산자-알아보기 FlatList 연구하기 ( ) )} Top Rated Movies } keyExtractor={(item) .. 2023. 1. 5. [TIL] 내일배움캠프 React 과정 2023.01.02 Today I Learned Firebase로 구현한 투두리스트 리팩토링 input 태그의 속성-value와 defaultValue input 태그의 속성인 defaultValue와 value에 값을 넣으면 둘 다 input 박스에 처음부터 보여진다. defaultValue: input tag에서 처음 보여줄 값 value: input tag에서 계속 보여줄 값 defaultValue를 지정하고 input 박스에 값을 입력하면 값이 수정이 된다. 반면, value를 지정하고 input 박스에 값을 입력하면 값이 입력되지 않고 지정해준 value만 계속해서 보여준다. 출처 https://velog.io/@e_juhee/defaultValue-value npm update 에러 생길 때 리액트 프로젝트 cl.. 2023. 1. 2. [TIL] 내일배움캠프 React 과정 2023.01.01_Firebase CRUD Today I Learned Firebase를 투두리스트 CRUD와 연동하기 firebaseConfig.js 더보기 // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; // Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Optionally import the services that you want to use // import {...} from "firebase/auth"; // import {...} f.. 2023. 1. 1. [TIL] 내일배움캠프 React 과정 2022.12.31 Today I Learned React Native Firebase와 연결하기 React Native에서 Firebase 데이터 가져오기 // firebaseConfig.js import { initializeApp } from 'firebase/app'; // Optionally import the services that you want to use // import {...} from "firebase/auth"; // import {...} from "firebase/database"; // import {...} from "firebase/firestore"; // import {...} from "firebase/functions"; // import {...} from "firebase/st.. 2022. 12. 31. [TIL] 내일배움캠프 React 과정 2022.11.28 Today I Learned 프로젝트 발표 전에 최종 점검, 자잘한 에러 수정 드디어 발표와 함께 기초 프로젝트 마무리! 해결하는 경험 게시물 상세 페이지에 수정, 삭제 버튼이 나타났다가 사라지는 문제 firebase.auth().onAuthStateChanged((user) => { if ( user && user.uid == result.data().uid) { $("#edit").show(); $("#delete").show(); } else { $("#edit").hide(); $("#delete").hide(); } 내가 작성한 글이 아닐 때는 hide 메서드를 이용해서 수정, 삭제 버튼이 보이지 않도록 만들었다. 그런데 로딩 과정에서 내가 작성한 글이 아니더라도 수정, 삭제 버튼이 잠깐 나타났.. 2022. 11. 28. [TIL] 내일배움캠프 React 과정 2022.11.26 주말 동안 해결해야 할 부분을 정리해 봤다. 소셜 회원가입 기능이 정상적으로 작동하는지 확인하기 회원가입 시 입력한 닉네임이 user DB에 저장되게 연결하기 로그인하지 않았을 때 글 쓰기, 프로필 페이지 등 접근 차단 메인 컬러 정하기 메인 페이지 스크롤 어떤 방식으로 구현할 것인지 (더보기/페이지네이션 등) alert CSS 통일하기 AW3 도메인 연결하기 프로필 페이지에서 내가 작성한 글만 불러오기 카테고리 별로 네비게이션 바? 이미지 파일 업로드하지 않으면 글 작성 못하도록? 게시물 수정 페이지에서 input 창에 데이터 카테고리, 제목, 내용 불러오기 해결하는 경험 github으로 협업하기 원래는 팀원들마다 개인 브랜치를 만들어서 각자 담당한 페이지 작업을 하고 있었는데 중간에 모든 페이지를 연.. 2022. 11. 28. [TIL] 내일배움캠프 React 과정 2022.11.25 Today I Learned 헤더에 프로필 이미지 뜨도록 수정, 함수 기능 추가 CRUD 중 Read, Delete 공부하기 팀원들이 개별 작업한 모든 페이지 모아서 merge하기 해결하는 경험 프로필 이미지 저장 경로 수정하기 const imgRef = ref(storageService, `${authService.currentUser.uid}/${uuidv4()}`) 프로필 이미지를 업로드할 때 원래는 내 계정의 uid 폴더 안에 uuid 형식으로 이미지가 저장되는 방식이었다. 그런데 이렇게 되면 storage에 계정마다 폴더가 무한으로 생성되고 게시물 작성 시 업로드한 이미지와도 구분되지 않을 거 같아서 폴더명을 보기 좋게 수정하기로 했다. const imgRef = ref(storageServic.. 2022. 11. 25. [TIL] 내일배움캠프 React 과정 2022.11.24 Today I Learned CRUD 구현 공부하기 해결하는 경험 임시로 작업하던 페이지를 우리 팀의 firebase에 연결하기 팀원 분이 임시로 웹페이지를 만들어서 작업하던 페이지를 어제 우리 팀의 github에서 파일을 내려받아 합치는 과정을 도와드렸다. 그런데 JS module 로 작업하던 구조가 아니라 import와 export가 전혀 되어있지 않았다. 그래서 오늘 오전에는 공부할 겸 팀원분이 작업하던 새 글 작성 페이지를 firebase에 db가 올라가게 연결하는 작업을 해봤다. import { addDoc, collection,} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js"; import { dbService }.. 2022. 11. 24. [TIL] 내일배움캠프 React 과정 2022.11.22 Today I Learned firebase에 저장된 프로필 정보 가져오기 닉네임 변경 시 새로고침 없이 변경된 닉네임 보여주기 프로필 변경 javascript 함수 분리 닉네임 수정 버튼에 토글 기능 구현 해결하는 경험 firebase에서 user email 정보 가져오기 마이페이지에 가입할 때 firebase에 저장된 이메일 주소를 불러오고 싶었다. 프로필 이미지와 닉네임을 불러올 때 사용했던 코드를 그대로 사용하면 될 거 같아서 일단 console.log로 이메일 정보가 어디에 저장되어 있는지 확인했다. document.getElementById("profileEmail").textContent = authService.currentUser.email ?? "이메일 없음"; email이 담긴 위치를.. 2022. 11. 22. 이전 1 2 다음
