firestore7 [TIL] 내일배움캠프 React 과정 2023.03.02 Today I Learned 회원탈퇴 기능 구현 NextAuth.js에서 useSession으로 provider 정보 받아오기 Users DB 구조 변경 NextAuth.js에서 useSession으로 provider 정보 받아오기 pages/api/auth/[...nextauth].js 에 서버를 만들어서 로그인 과정을 처리하는데 이 파일에서 callbacks라는 비동기 함수를 이용해서 session에 유저의 정보를 추가할 수 있다. async jwt({ user, token, account }) { if (user && account) { token = { ...token, provider: account.provider }; } return token; }, JWT callback의 파라미터 중 a.. 2023. 3. 3. [TIL] 내일배움캠프 React 과정 2023.01.12 Today I Learned React Native 팀 프로젝트 진행 useEffect와 useFocusEffect useFocusEffect( useCallback(() => { getPostlist(); }, []) ); 디테일 페이지에서 좋아요를 누르고 뒤로 가기 했다가 다시 해당 게시물 페이지에 들어가면 DB에는 반영이 됐지만 화면에는 좋아요가 반영되지 않는 문제가 발생했다. 원래는 useEffect로 getPostList라는 데이터를 불러오는 함수를 실행했는데 useEffect는 최초 렌더링 시 한 번만 실행이 되고 메인->디테일->메인으로 다시 돌아왔을 때는 useEffect가 실행되지 않았다. 그래서 useEffect 대신 useFocusEffect를 사용해서 화면에 포커스가 갈 때마다, 즉.. 2023. 1. 13. [TIL] 내일배움캠프 React 과정 2023.01.09 Today I Learned React Native 팀 프로젝트 진행 Firestore onSnapshot과 useQuery const getComments = async () => { const q = query( collection(dbService, "communityComments"), orderBy("date", "desc") ); const array = []; await onSnapshot(q, (snapshot) => { snapshot.docs.map((doc) => ( array.push({ id: doc.id, ...doc.data() }))) setComments(array) }) return array; }; const data = useQuery("communityComments.. 2023. 1. 10. [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. 이전 1 다음
