Couch coding: fourth

프로젝트 개발

수업 내용

• firebase auth
• fetch vs axios

작업 내용

• 디자인 스타일 적용
• firebase Auth 적용 + login 백엔드 연동

firebase Auth를 통한 Google 계정 로그인 구현은 완료하였으나, 백엔드와 로그인 연동 구현에서 어려움을 겪어 마무리하지 못한 채 유진님께서 로그인 연동 기능을 구현하셨다. 유진님 코드를 보며 많이 배우고 있고 프로젝트가 끝난 후, 다시 공부할 내용도 정리 할 수 있었다. 이번 프로젝트 과정에서 로그인을 연동하는 부분이 프론트와 백 모두에게 어려웠던 기능이었다. 오랜 시간 테스트 회의를 진행하며 멘토님의 도움을 받아 로그인 연동을 구현하였다. 에러 없이 로그인이 연동되던 순간은 프로젝트 과정 중에서 가장 기억에 남는 순간이 될 것 같다.

axios

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

axios 라이브러리 설치

yarn add axios

npm i axios

axios 사용법

• GET request

const axios = require('axios').default;

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

• POST request

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• Request method

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

• Instance 생성

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Reference | axios