reactquery4 [TIL] 내일배움캠프 React 과정 2023.02.16 Today I Learned 2주차 기술 멘토링 노트 작성 마이페이지 닉네임, 프로필 사진 변경 기능 구현 2주차 기술 멘토링 노트 작성 링크 https://teamsparta.notion.site/2-b2224420ad11483c9b795df9e278c153 Next.js 구동 순서 Next의 구동순서는 _app.js와 _document.js가 제일 처음 실행되며, 두 파일 모두 pages 폴더 안에 있어야 한다. 1. _app.js 최초로 실행되는 파일로, Client에서 띄어지는 전체 컴포넌트의 레이아웃. 공통 레이아웃으로 최초에 실행되어 내부에 들어갈 컴포넌트들을 실행한다. 2. _document.js 그다음에 _document.js가 실행되는데, 이는 _app.js에서 구성한 HTML이 어떤 형.. 2023. 2. 17. [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.08 Today I Learned 팀 프로젝트 진행 new Date()로 날짜 출력하기 댓글을 작성할 때 date: new Date()를 이용해서 작성 날짜를 저장하고 date를 이용해서 댓글을 최신순으로 정렬할 수 있었다. 근데 댓글을 작성한 날짜를 화면에 보여줄 때 new Date()로 생성한 날짜를 그대로 가져오면 에러가 발생한다. Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead. firestore에서 확인해봤더니 new Date()로 생성한 데이터는 문자열 형태가 아니라.. 2023. 1. 8. [TIL] 내일배움캠프 React 과정 2022.12.22 Today I Learned 리액트 팀 프로젝트 시작! React-Query 강의 시청 React-Query 상태의 종류 클라이언트 상태 : 뷰를 위한 데이터 한 유저만을 위한 데이터 (세션 간 지속될 필요 없는 데이터) 예시) input 입력 값을 state로 관리(렌더링에 반영하기 위한 데이터) 서버 상태 : 서버에서 가지고 오는 데이터 여러 유저가 공유해야하는 데이터 (세션 간 지속되어야 하는 데이터) 예시) 게시물 리스트 (DB에 저장되어 있는 데이터) React Query 상태 관리 흐름 fetching : 데이터 요청 중 fresh : 데이터를 갓 받아온 직후 / 컴포넌트의 상태가 변하더라도 데이터 재요청하지 않음 stale : 데이터 만료 / 최신화가 필요한 데이터 inactive : 쿼리가.. 2022. 12. 22. 이전 1 다음
