과제 내용 카페 좌석 확인 구독 시스템 리액트 및 파이어베이스를 활용한 서비스 개발 파이어베이스 docs를 바탕으로 서버 구축 과제 과정 파이어베이스 docs 살펴보기 파이어베이스 docs를 살펴보면 cloud FireStore가 있다. docs의 cloud firestore - '데이터 읽기' - '데이터 한 번 가져오기' - 'Cloud Firestore 초기화' 부분을 읽어보면 초기 설정에 관한 설명이 적혀있다. 이 코드를 복사한 후 프로젝트 폴더에 config.js를 생성하여 그 안에 붙여넣었다. 그리고 그 다음으로 필요한 것은 데이터를 가져오는 것이므로 '데이터 한 번 가져오기' - '컬렉션의 모든 문서 가져오기'를 참고하여 문서를 불러오기에 필요한 method들인 collection, getD..
Firebase란 Firebase는 개발자들이 애플리케이션을 빠르게 개발하고 성공적으로 운영할 수 있도록 구축한 Google의 포괄적인 앱 개발 플랫폼이다. 또한 Firebase는 BaaS(Backend-as-a-Service) 플랫폼으로 프론트엔드에서 백엔드 서버를 구축하지 않고 편리하게 앱 및 웹 애플리케이션을 쉽게 생성하고 실행할 수 있도록 한다. 파이어베이스의 핵심적인 기능은 파이어베이스에 연결된 모든 기기가 실시간으로 데이터를 동기화하는 데이터베이스를 제공하는 것이다. 또한 강력한 인증 서비스를 제공하기 때문에 따로 인증 서버를 개발하지 않고 보안성을 갖춘 사용자 인증 서비스를 구현할 수 있다. firebase의 장점 실시간 데이터베이스: 실시간 데이터 동기화를 지원하여 실시간 애플리케이션을 구..
Redux 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리이다. 한편, 리액트 프로젝트의 경우 대부분의 작업시 부모 컴포넌트를 통해 하위 컴포넌트의 데이터를 업데이트하는 props 방식이 사용된다. 그러한 사용 방식은 프로젝트의 규모가 작으면 문제가 되지 않지만, 프로젝트의 규모가 커질수록 유지보수의 어려움이 발생한다. 한편 리덕스와 같은 상태 관리 라이브러리를 사용하여 데이터 상태를 컴포넌트 외부에서 관리하면 글로벌 상태관리를 비교적 쉽게 처리할 수 있다. Redux와 useReducer useReducer와 context API로 redux의 기능을 대부분 구현이 가능하다. 하지만 분명하게 redux와 useReducer의 차이는 존재한다. Redux useReducer store..
과제 커스텀 훅 만들기 무비 앱에 실시간 채팅기능 구현 과제 결과 커스텀 훅 만들기 팀 별로 fetch hook, search hook, pagination hook, 즐겨찾기 hook을 만들어야했는데 나는 pagination hook을 만들기로 하였다. // usePagination.jsx export function usePagination({page, setActivePage}) { const [startPage, setStartPage] = useState(1); const lastPage = page.count !== null ? Math.ceil(Number(page.count) / page.limit) : 0; // 각 번호를 클릭했을 때 id 값을 가져와서 activePage state에 ..
어느새 유데미X스나이퍼팩토리 10주 완성 프로젝트 캠프로 4주차에 접어들었다. 4주차에 접어들게 되면서 나에게 잘하고 있는 것, 개선하고 싶은 것, 앞으로 시도해보고 싶은 점(Keep, Problem, Try)에 대해서 정리해보려고 한다. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다. Keep 하루에 한 번씩 블로그 일지를 작성하고 있다. 블로그 작성 일지를 기록해두는 것은 미래의 나에게 매우 도움이 되는 일이므로 귀찮더라도 항상 하나씩 하려고 노력한다. 모르는 부분이 있다면 놓치지 않고 멘토님에게 물어보고 있다. 이해하지 않고 넘어가도 괜찮다고 생각하지 말고 모르는 것이 있다면 멘토님에게 물어보면서 내가 이해하고 있는지 확인한다. Problem 과제로 시간..
