도리쓰에러쓰

이전에 프로젝트에서 파이어베이스를 통한 회원가입을 구현하였고 오늘은 이어서 로그인/로그아웃 기능을 구현해보려고 한다. 회원가입 구현 방법은 아래 게시물을 참고하면 된다. [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️⃣ 각자 사용하는 환경을 클릭해주면 되는데 나는..

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)의 분..

이번 게시물에선 유저가 메인페이지 접속하면 서버가 리액트로 만든 html 파일을 보내주는 것을 해보겠습니다. 서버만들 때 Express + MongoDB를 사용하면 JS만으로도 풀스택 개발을 할 수 있는데, 여기에 React를 더할 수 있습니다. 1️⃣ express 라이브러리를 설치합니다. 1) 작업 폴더를 오픈한 상태에서 터미널에 npm init 입력 후 선택하라고 뜨는 것들을 끝날 때까지 Enter합니다. 2) npm install express 입력합니다. 3) server.js 파일을 만들고 아래 코드를 작성합니다. const express = require('express'); const path = require('path'); const app = express(); const http =..