ksw_devlog

진행 중 모임 리스트 구현 코드 수정 // 참여 신청 수락 후 데이터(진행 중 모임), teamMember isWait=false, nickName=usernickName let myApprovedMeeting = []; const approvedMeeting = myAppliedMeeting.forEach((item) => { item.teamMember.forEach((member) => { if ( member.isWait === false && member.nickName === authService?.currentUser?.displayName ) { myApprovedMeeting.push(item); return false; } }); }); teamPage 안에 teamMember 데이터가..

비로그인시 홈 화면 조정 const [init, setInit] = useState(false); // 처음에는 false이고 나중에 사용자 존재 판명이 모두 끝났을 때 true를 통해 해당 화면을 render const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { authService.onAuthStateChanged((user) => { // user 판명을 듣고 if (user) { // 있으면 setIsLoggedIn(true); // 로그인 됨 } else { setIsLoggedIn(false); // 로그인 안됨 } setInit(true); // user 판명 끝 }); }, []); return ( {init ? ( ..

내 코딩 모임 페이지 - 진행 중 모임 / 참여 신청 모임 우선, firebase 컬렉션에서 진행 중 모임은 teamPage 컬렉션, 참여 신청 모임은 post 컬렉션에서 데이터를 가져온다. // 작성글, 팀페이지 데이터 const postList = useRecoilValue(postState); const teamPage = useRecoilValue(teamPageState); 진행 중 모임에 들어갈 경우 1) 자신이 참여 신청한 모임에 수락 됐을 경우 우선 teamPage teamMember 필드에서 내 닉네임이 포함된 teamPage 데이터를 가져온다 // teamPage teamMember에서 내 닉네임이 포함된 teamPage 데이터 let myAppliedMeeting = []; const..

import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import { authService } from '../../common/firebase'; import OngoingCardSection from '../../components/teamList/OngoingCardSection'; import TeamListCategory from '../../components/teamList/TeamListCategory'; import CardSection from '../../shared/CardSection'; const TeamList = () => { const [currentUsernickname, set..

배열에 있는 내용 검색하기 const Search = () => { const params = useParams(); const [searchData, setSearchData] = useState([]); // firestore에서 post 문서 받아오기 useEffect(() => { const postCollectionRef = collection(db, 'post'); const q = query(postCollectionRef, orderBy('createdAt', 'desc')); const getPost = onSnapshot(q, (snapshot) => { const newPost = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), }..

이번주는 MVP 개발을 본격적으로 시작한 주였다. 내가 맡은 부분은 우선 home화면에서 post데이터와 user데이터를 비교해서 user에게 맞는 모임 리스트를 구현하는 것과 검색기능을 개발했다.

yarn.lock 충돌 해결법 패키지 매니저로 yarn을 쓰고 있는데, 실수로 npm으로 설치한 라이브러리가 섞였다. ( yarn으로 하든 npm으로 하든 서로 호환은 되지만 충돌이 생길 가능성이 있어 한 가지 패키지 매니저만 사용하는 게 보통임) 그 후로 pull을 받을 때 종종 yarn.lock 에러가 떠서 처음에는 dev에 있는 yarn.lock을 복사해서 해결했다가 자꾸 떠서 근본부터 해결하기로 했다. yarn.lock 파일 삭제 (만약 yarn으로 세팅된 프로젝트인데 package-lock.json이 있다면 삭제. npm으로 설치하면 생기는 파일이다. yarn.lock과 동일한 역할의 파일임) node_modules 폴더 삭제 yarn cache clean 로 캐시 데이터 삭제 yarn inst..

React query, useQueries useQueries useQuery를 비동기로 여러개 실행할 경우 여러 귀찮은 경우가 생깁니다. const usersQuery = useQuery("users", fetchUsers); const teamsQuery = useQuery("teams", fetchTeams); const projectsQuery = useQuery("projects", fetchProjects); // 어짜피 세 함수 모두 비동기로 실행하는데, 세 변수를 개발자는 다 기억해야하고 세 변수에 대한 로딩, 성공, 실패처리를 모두 해야한다. 이때 promise.all처럼 useQuery를 하나로 묶을 수 있는데, 그것이 useQueries입니다. promise.all과 마찬가지로 하나의..