벌써 데브코스를 시작한지 3달차가 되었다. 3달차는 드디어 기대하던 React 교육의 시작이었다. 그런데 강의에서 React와 함께 항상 사용하는 라이브러리가 있었다. 그것은 'Storybook'이다. 개인적으로 리액트를 사용하면서 주변 선배 개발자분에게 들어보기도 하고, 블로그에서 추천도 많이 했던 라이브러리라서 궁금하기도 했고 사용해보게 되어서 기뻤다. 하지만 점점 리액트와 동시에 공부하면 할수록 자바스크립트도 제대로 모르고, 리액트에 공부할 시간도 부족한 내가 공부할만한 가치가 있는 라이브러리인지 고민이 되었다. 나와 같은 고민을 하는 사람들이 없는건가 싶었던 참에 reddit이라는 해외 커뮤니티에서도 이런 질문을 한 사람이 있었다. 여기서 아주 흥미로운 토론을 진행하고, 몇가지를 구글링 한 이후에..
과제 내용 카페 좌석 확인 구독 시스템 리액트 및 파이어베이스를 활용한 서비스 개발 파이어베이스 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에 ..
