도리쓰에러쓰

이전에 프로젝트에서 파이어베이스를 통한 회원가입을 구현하였고 오늘은 이어서 로그인/로그아웃 기능을 구현해보려고 한다. 회원가입 구현 방법은 아래 게시물을 참고하면 된다. [Firebase] 파이어베이스 회원가입 기능 구현 (React + TypeScript + Firebase v9) 이전에 프로젝트 생성한 것에 이어 파이어베이스를 통해 회원가입 기능을 구현해보려고 한다. 프로젝트 생성 및 연결 방법은 아래 게시물을 참고하면 된다. [Firebase] 파이어베이스 프로젝트 설 dori-coding.tistory.com 1. 로그인 기능 구현 1️⃣ src/hooks 폴더에 useLogin.ts를 생성한다. 2️⃣ 에러 정보를 저장하는 error state와 서버와의 통신 상태 정보를 저장하는 isPendi..

이전에 프로젝트 생성한 것에 이어 파이어베이스를 통해 회원가입 기능을 구현해보려고 한다. 프로젝트 생성 및 연결 방법은 아래 게시물을 참고하면 된다. [Firebase] 파이어베이스 프로젝트 설정 (React + Firebase v9) 파이어베이스가 v9로 업데이트 되면서 기존의 v8 버전의 문법은 거의 사용할 수 없게 되었다. 그래서 프로젝트 설정부터 로그인 등등을 다시 공부해보려고 한다. 1️⃣ 파이어베이스에 접속하여 dori-coding.tistory.com 1️⃣ 아래 화면에서 자신의 프로젝트를 선택한 후, 왼쪽 메뉴에서 빌드 - Authentication을 클릭한다. 2️⃣ [시작하기] 버튼을 클릭하고 이메일/비밀번호로만 회원가입을 진행할 예정이기 때문에 [이메일/비밀번호] 버튼을 클릭한다. 3..

파이어베이스가 v9로 업데이트 되면서 기존의 v8 버전의 문법은 거의 사용할 수 없게 되었다. 그래서 프로젝트 설정부터 로그인 등등을 다시 공부해보려고 한다. 1️⃣ 파이어베이스에 접속하여 로그인하고 [시작하기] 버튼을 클릭한다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2️⃣ 아래 화면에서 [프로젝트 추가] 버튼을 클릭한다. 3️⃣ 프로젝트명을 작성하고, 구글 애널리틱스는 필요가 없어서 설정을 끄고 프로젝트를 생성한다. 💡 구글 애널리틱스 : 웹페이지에 접속하는 사용자에 대한 분석 (몇명이 접속했는지, 사용자의 위치 등등) 4️⃣ 각자 사용하는 환경을 클릭해주면 되는데 나는..

리액트를 사용하면 빠질 수 없는 라이브러리가 바로 '상태 관리 라이브러리'이다. 뷰나 앵귤러와 비교했을 때 가장 큰 차이점은 단방향 바인딩인데, 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있고, 반대로 부모 컴포넌트로 props를 직접 전달할 수는 없다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 한다. 이것이 반복되다 보면 Props Drilling이 발생하게 되고 프로젝트의 규모가 커질수록 props의 depth가 증가하게 된다. 이는 불필요한 리렌더링을 발생시킬 수 있다. 그럼 props로 모든 state를 관리하는 것은 추천하지 않는가? 컴포넌트의 재활용성, 의존성 분리 등의 측면에서의 props를 state로..

1. 커스텀 Hook이란? 개발자가 스스로 커스텀 한 Hook을 말한다. ❓왜 커스텀 Hook을 제작하여 사용할까 1️⃣ 코드의 중복을 줄여 코드 가독성이 높아진다. 2️⃣ 재사용성을 높인다. 3️⃣ 변경사항이 있을 때 커스텀 Hook만 수정하면 되기 때문에 효율적으로 관리할 수 있다. 2. 코드 예시 커스텀 Hook을 사용할 때는 항상 use로 시작해야 한다. 아래 코드를 확인하여 useFetch()라는 이름의 커스텀 Hook을 확인해보자. import { axios } from ‘axios’; import { useState, useEffect } from ‘react’; const useFetch = (initialUrl: string) => { const [url, setUrl] = useStat..

1. useReducer() 상태를 업데이트할 때 useState()를 주로 사용했는데 useReducer()로도 상태 업데이트가 가능하다. useReducer()를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 우선 reducer는 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer에서 반환되는 상태는 컴포넌트가 지닐 새로운 상태이다. 여기서 action은 업데이트를 위한 정보를 가지고 있다. action의 예시는 아래 코드를 참고하면 좋을 것 같다. // 카운터에..

리액트 성능 최적화하는 방법을 알아보기 전에 컴포넌트가 리렌더링 되는 조건을 알고 지나가야 할 것 같다. 📍 컴포넌트 리렌더링 조건 1️⃣ 부모에서 전달받은 props가 변경될 때 2️⃣ 부모 컴포넌트가 재렌더링될 때 3️⃣ 자신의 state가 변경될 때 리액트의 성능 최적화를 위해선 불필요한 렌더링을 막을 필요가 있다. 지금부터 리액트의 성능 최적화 7가지에 대해 정리하겠다. 1. useMemo() useMemo()는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 React Hooks 중 하나다. useMemo()는 메모이제이션(Memoization)된 값을 반환한다. 💡 메모이제이션(Memoization) :: 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 재사용하는 기법 만약 컴포넌트 ..

1. 라이프사이클(Lifecycle) 이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그래서 각각의 컴포넌트에는 라이프사이클(=수명 주기)가 존재한다. 컴포넌트는 생성(mounting) ▶ 업데이트(updating) ▶ 제거(unmounting)의 생명주기를 갖는다. 위 이미지는 라이프사이클(Lifecycle)을 나타낸 것이다. 라이프사이클(Lifecycle)이 업데이트될 때 아래 링크를 참고하여 확인해보는 것이 좋을 것 같다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 2. 라이프사이클(Lifecycle)의 분..