ksw_devlog

이번주는 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과 마찬가지로 하나의..

검색기능 const params = useParams(); const [searchData, setSearchData] = useState([]); // firestore에서 post 문서 받아오기 useEffect(() => { const postCollectionRef = collection(db, 'post'); const q = query(postCollectionRef); const getPost = onSnapshot(q, (snapshot) => { const newPost = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); setSearchData(newPost.filter((item) => item.partyLocation.t..

파이어베이스에서 데이터 불러오기 import { collection, onSnapshot, query } from 'firebase/firestore'; import { db } from '../../common/firebase'; const Home = () => { const [testList, setTestList] = useState([]); useEffect(() => { const postCollectionRef = collection(db, 'post'); const q = query(postCollectionRef); const getPost = onSnapshot(q, (snapshot) => { const postData = snapshot.docs.map((doc) => ({ id: ..

오늘 home 페이지가 조금 수정돼서 UI 부분을 수정했다. [수정 된 UI ]

최종 프로젝트가 시작 된 한 주였다. 기획 부분에서 피드백을 받으면서 처음에 정했던 기획도 많은 수정 과정이 있었다. 기획과 초기 UI가 목요일 밤쯤에 정해져서 이번 주는 기본 UI틀만 잡고 다음주부터 기능 구현을 하기로 하였다.

[수정된 UI 초안] 스타일 부분은 파일을 따로 만들어서 작업하였다.