Firebase Auth를 사용하여 사용자 아이디를 데이터 베이스에 저장해 보도록 하겠습니다.먼저 Firebase 프로젝트를 생성하고, React 프로젝트에서 Firebase DB에 데이터를 저장하겠습니다.프로젝트 설정을 클릭한 후 하단에 있는 firebaseConfi

Firebase Realtime DB를 통해서 CRUD하는 작업을 해보겠습니다.시작하기 전에는 어려워서 시도 조차 못할거라는 두려움이 있습니다.하지만 생각보다 어렵지 않습니다. 아래 내용만 잘 따라가면 Firebase Realtime DB로 CRUD 쉽게 가능합니다.출

자주 사용하는 기능 몇 가지 중에 테이블만 확인할 것입니다. 다 읽는데 정확히 5분 걸립니다. 갑시다.

redux-toolkit을 이용해서 비동기 데이터 처리하는 방법에 대해서 알아보겠습니다.비동기 처리는 createAsyncThunk함수를 사용합니다. 이 함수를 사용하는 방법을 알아보고 어떤 기능이 있는지 확인해 보겠습니다.

이번 장에서는 react에서 react-redux과 redux-toolkit을 사용하는 방법을 알아보도록 하겠습니다.이 모듈을 사용하면 데이터를 중앙에 저장할 수 있습니다.또, 원하는 컴포넌트에서 원본 값을 가져와서 사용할 수 있고 조작할 수 있게 됩니다.지역에서 데이

이번 장에서는 Firebase에 대해서 알아보겠습니다.Firebase를 이용해서 프로젝트를 생성하고 어플리케이션을 등록하겠습니다.그리고 React에서 DB를 연결하고 데이터를 조작해 보겠습니다.구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다.백엔드 서버 기능을 클라

이번 장에서 리액트 라우터에 대해서 알아보겠습니다.라우팅에 대한 자세한 설명과 예시를 보면서 이해하도록 하겠습니다.초기 웹 사이트각 화면에 해당하는 웹 문서를 일일이 제작서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발서버 사이드 렌더링(Server Sid

리액트에서 Context를 사용해서 상태관리 할 수 있는 방법을 알아보도록 하겠습니다.Context는 컴포넌트가 중첩되어 있는 상황에서 상태 값을 전달하기 편리합니다.예시를 살펴보면서 Context 개념에 대해서 자세히 보겠습니다.어플리케이션에서 전반적으로 사용할 값을

useReducer()는 컴포넌트의 상태를 관리할 때 사용하는 Hooks 입니다.특징컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능합니다.다른 컴포넌트에서도 해당 로직을 재사용 가능합니다.useReducer() 사용 방법state : 컴포넌트에서 사용할 상태 값d

이번 시간에는 React에서 state와 event를 실습할 수 있는 문제를 풀어보도록 하겠습니다.React에서 변수를 저장할 때 useState를 이용해서 저장하고, state값을 바꿔주는 함수를 이용해서 state값을 바꾸는 방식을 살펴보겠습니다.부모 컴포넌트에서

이번 장에서는 'React Router v6 튜토리얼'을 참고하여 리액트 라우터 5버전에서 6버전으로 변경된 부분을 이미지로 이해해보겠습니다.라우터란 무엇인지 알아보겟습니다.폴더 구조를 확인하고, 각 컴포넌트 내부 구조를 알아보겠습니다.라우팅이란 출발지에서 목적지까지의

지금부터 리액트 기초를 익히고 나서 많은 사람들이 만들어보는 간단한 todo 앱을 만들어 보도록 하겠습니다. todo 앱을 만드는데 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨서 html 태그들을 그려주는 작업을 해보겠습니다.