Intro Firebase Auth를 사용하여 사용자 아이디를 데이터 베이스에 저장해 보도록 하겠습니다. 먼저 Firebase 프로젝트를 생성하고, React 프로젝트에서 Firebase DB에 데이터를 저장하겠습니다. Firebase 1. Firebase 프로젝트 생성 ![](https://velog.velcdn.com/im

Intro Firebase Realtime DB를 통해서 CRUD하는 작업을 해보겠습니다. 시작하기 전에는 어려워서 시도 조차 못할거라는 두려움이 있습니다. 하지만 생각보다 어렵지 않습니다. 아래 내용만 잘 따라가면 Firebase Realtime DB로 CRUD 쉽게 가능합니다. 출발해볼까요?😀 본문 1. Firebase 세팅 구글로 Firebase를 검색 Firebase Console 클릭 로그인 후 프로젝트 추가 프로젝트 제목 입력 ![](https://v

Intro 우선 어그로 끌어서 죄송(안)합니다. 오신김에 React MUI 쓰는 방법이나 보고 가시죠. 자주 사용하는 기능 몇 가지 중에 테이블만 확인할 것입니다. 코드는 공식 문서에 있는 걸 그대로 복붙해서 이해해 보겠습니다. 다 읽는데 정확히 5분 걸립니다. 갑시다. Data Table 실습해볼 테이블 확인 1. mui 기본 모듈 설치 2. @mui/x-data-grid 없다고 오류가 나면? 모듈 설치 하기 3. 코드 확인 크게 4파트에 대해서 알아보겠습니다. 1번 DadaGrid 컴포넌트를 사용하기 위해서 @mui/x

Intro redux-toolkit을 이용해서 비동기 데이터 처리하는 방법에 대해서 알아보겠습니다. 비동기 처리는 createAsyncThunk함수를 사용합니다. 이 함수를 사용하는 방법을 알아보고 어떤 기능이 있는지 확인해 보겠습니다. 본론 그림으로 이해하기 📄 src / counterSlice.js line1: slice를 구성하기 위해서 createSlice를, 비동기 작업을 처리하기 위해서 createAsyncThunk를 가져옵니다. createAsyncThunk은 비동기작업을 처리하는 action creator를 만듭니다. action creator는 아래와 같이 3가지 상태를 갖습니다. action creator.p

🌱 Intro 이번 장에서는 react에서 react-redux과 redux-toolkit을 사용하는 방법을 알아보도록 하겠습니다. 이 모듈을 사용하면 데이터를 중앙에 저장할 수 있습니다. 또, 원하는 컴포넌트에서 원본 값을 가져와서 사용할 수 있고 조작할 수 있게 됩니다. 지역에서 데이터를 저장하는 방법은 데이터를 props로 계속 전달해야하는 문제(props drilling)가 있습니다. 이 문제점을 해결하는 방법이 redux 입니다. 🌱 본론 1. react-redux 🔵1-1. 폴더 구조 🔵1-2. 그림으로 이해하기 redux, react-redux 설치하기 📄 src / store /

🌱 Intro 이번 장에서는 Firebase에 대해서 알아보겠습니다. Firebase를 이용해서 프로젝트를 생성하고 어플리케이션을 등록하겠습니다. 그리고 React에서 DB를 연결하고 데이터를 조작해 보겠습니다. 🌱 Firebase 1-1. Firebase란? 구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다. 백엔드 서버 기능을 클라우드 서비스 형태로 제공합니다. 인증(Authentication), 데이터베이스(Firestore), 분석(Analytics)등의 기능을 제공합니다. 1-2. 프로젝트 생성 프로젝트 만들기 ![](https://velog.velcdn.com/images/harimad/post/4413aa16-8f

Intro 이번 장에서 리액트 라우터에 대해서 알아보겠습니다. 라우팅에 대한 자세한 설명과 예시를 보면서 이해하도록 하겠습니다. 본론 1. 싱글 페이지 어플리케이션 1-1. 일반 웹 사이트의 동작 과정 1-2. 웹 사이트의 화면 일부를 수정하기 위해 노력한 과정 초기 웹 사이트 각 화면에 해당하는 웹 문서를 일일이 제작 서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발 서버 사이드 렌더링(Server Side Rendering) ASP(Active Server Page), JSP(Java Server Page) 웹 서버가 아닌 자바스크립트 코드로 웹 문서를 생성 싱글 페이지 어플리케이션(Singl

🌱 Intro 리액트에서 Context를 사용해서 상태관리 할 수 있는 방법을 알아보도록 하겠습니다. Context는 컴포넌트가 중첩되어 있는 상황에서 상태 값을 전달하기 편리합니다. 예시를 살펴보면서 Context 개념에 대해서 자세히 보겠습니다. 🌱 1. Context 1-1. Context란? 어플리케이션에서 전반적으로 사용할 값을 관리합니다. 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 주의 사항 Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어렵습니다. 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋습니다. ❗ Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌트들이 리렌더링 됩니다. 1-2. 일반적인 전역 상태 관리 흐름 컴포넌트 여기저기서 필요한 데이터가 있는 경우 주로 최상위 컴포

🌱 Intro 이번 장에서는 React 의 대표적인 Hook인 useReducer, useMemo, useCallback에 대해서 알아보도록 하겠습니다. 이 Hook 들은 리액트에서 최적화를 하는데 사용되는 함수들 입니다. 어떻게 해서 최적화를 적용할 수 있는지 예시와 함께 살펴보겠습니다. useMemo는 변수 메모, useCallback은 함수 메모, React.memo는 컴포넌트를 메모합니다. 🌱 1. useReducer 1-1. 특징 useReducer()는 컴포넌트의 상태를 관리할 때 사용하는 Hooks 입니다. 특징 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능합니다. 다른 컴포넌트에서도 해당 로직을 재사용 가능합니다. ![](https://velog.velcdn.com/images/harimad/post/ac1d3e67-00c0-477d-b206-d104f5af8e5b/image.

🌱Intro 이번 시간에는 React에서 state와 event를 실습할 수 있는 문제를 풀어보도록 하겠습니다. React에서 변수를 저장할 때 useState를 이용해서 저장하고, state값을 바꿔주는 함수를 이용해서 state값을 바꾸는 방식을 살펴보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 값(props)을 넘겨주는 것도 보겠습니다. onClick, onChange와 같은 이벤트를 React에서 어떻게 사용하는지 실습을 통해서 알아보겠습니다. 🌱본론 문제 1 문제 1 - 풀이 코드 버튼 클릭 횟수를 저장하기 위한 state값 만들어 줍니다. 클릭이라는 버튼을 눌렀을 때 state값이 증가하도록 만드는 countUp 함수를 만들었습니다. se

0. 들어가며 이번 장에서는 'React Router v6 튜토리얼'을 참고하여 리액트 라우터 5버전에서 6버전으로 변경된 부분을 이미지로 이해해보겠습니다. 라우터란 무엇인지 알아보겟습니다. 폴더 구조를 확인하고, 각 컴포넌트 내부 구조를 알아보겠습니다. 1. 라우팅이란? >라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능입니다. 애플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미합니다. 일반적으로 라우팅은 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말합니다. - poiemaweb

0. Intro 지금부터 리액트 기초를 익히고 나서 많은 사람들이 만들어보는 간단한 todo 앱을 만들어 보도록 하겠습니다. todo 앱을 만드는데 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨서 html 태그들을 그려주는 작업을 해보겠습니다. 이번에는 최적화를 생각하지 않고 오로지 todo 앱이 잘 동작하는지에 초점을 맞추어서 진행해 보겠습니다. 이번 장을 마치면, 우리는 리액트의 기초를 이해하면서 간단한 todo앱을 완성할 수 있습니다. 1. 프로젝트 세팅 먼저 NodeJs가 설치되어 있어야합니다. Node가 설치되어 있어야 우리가 리액트 앱을 터미널에서 실행할 수 있기 때문입니다. Node를 설치하면 npm과 npx가 동시에 설치 됩니다. 아래의 명령어는 npx 를 이용해서 create-react-app 모듈을 실행하고 todoApp이라는 리액트 프로젝트 폴더를 생성하겠다는 명령