[ 핵심 : axios instance사용 ] 1) 인증서버와 데이터 서버를 구분해서 호출하기 위함 2) 데이터서버에 interceptor를 하기 위해서 --> 서버가 클라이언트에게 보내기전에 interceptor 작업을 함 => '데이터서버' 요청 보내기 전에 '인증서버'를 interceptor로 작업함 (유효한 토큰을 갖고있느지에 대한 확인 작업) * 클래스 : 학생 (포괄적 개념) * 인스턴스 : 학생 1, 학생 2... 학생 999 (적용받는 구체적인 하나하나들) 1. 인증서버 : auth.api.js import axios from 'axios'; const authAPI = axios.create({ baseURL: process.env.REACT_APP_AUTH_SERVER_URL }); e..
1.로그인 (axios api : post) const onLoginHandler = async () => { try { const response = await axios.post( `${process.env.REACT_APP_AUTH_SERVER_URL}/login`, { id: userid, password, }, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer `, }, } ); //로그인 성공시, accessToken을 localStorage에 저장 const { accessToken, userId, avatar, nickname } = response.data; setUserid(''); setPassword(''..
▼(회원가입 기능 구현) ▼ #03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현) ▼ 2023.11.21 - [Database] - #02 React 프로젝트에서 Firebase 환경 설정하기 ▼ #02 React 프로젝트에서 Firebase 환경 설정하기 2023.11.21 - [Database] - FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) FireBas zerotonine2da.tistory.com (1) 기존 사용자 로그인 [App.js] import { useEffect, useState } from 'react'; import { auth } from './firebase'; ..
1. FireBase 개념 (1) 구글이 제공하는 서버리스(serverless) 플랫폼 ▶ 서버리스 : Firebase가 웹 서버 개발에 필요한 인프라 제공 => 개발자는 서버 관리 안해도 됨! : 서버 있음! : [사용 이유] 백엔드의 지식없이도 웹 서비스 출시 가능 (2) BaaS (Backend as a Service) : 백엔드 부분을 서비스로 사용하기! : 로그인, 스토리지 등 API형태로 사용 가능 (3) FireBase 주요 서비스 ▶ Authentication : 사용자인증 (회원가입 + 로그인 ) => 이메일, 패스워드 로그인 + 구글 로그인 쉽게 가능 ▶ Firestore : NoSQL DB / 자바스크립트 객체와 유사하여 사용하기 편리 ▶ Storage : 파일 업로드 & 다운로드 (..