[React] React(9)

❗❗  데브코스 55일차 (10.15)

오늘은 프론트 수강생들이 처음으로 오프라인으로 만나는 날이다.

두 달간 온라인으로 하다가 오프라인으로 첫 만남을 생각하니깐 뭔가 어색했다.

여튼 모이게 되는 이유는 처음으로 팀으로 중간 프로젝트를 진행하기 전에 팀끼리

회의 및 친목 다짐의 이유로 모인 것 같았다.

 

이전에 이미 팀은 정해진 상태이고 만나서 팀원들이랑 정해진 주제에 대해

어떤 컨셉과 어떤 개발로 진행할지 의논을 했다.

이에 대한 얘기는 다음 글에서 포스팅하고 그 전에 React(9) 파트에 대해 설명하겠다.

 

✅ Axios (학습 가이드)

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

 

✍ 설치

NPM 설치 - Node.js 개발 환경에서 설치하는 방법

$ npm install axios
# 또는 yarn add axios

CDN 설치 - 브라우저 환경에서 사용하는 방법

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

✍ 사용법

간단한 사용법은 다른 ajax, fetchApi와 사용법이 유사하다

const axios = require('axios');

// ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  })
  // 응답(항상 실행)
  .then(function () {
    // ...
  });

자세한건 위에 Axios 학습 가이드 링크를 타고 들어가면 한글로된 설명이 자세하고 친절하게 나와있으니 그것을 참고하는 것이 더 좋을 것 같다. 

 

Axios의 가장 큰 장점은 Axios인스턴스, 인터셉터인 것 같다.

 

✍ Axios instance

.create() 메서드를 사용해 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있다.

바로 코드 예시를 통해 무엇인지 알아보자.

axios.create([config])

const instance = axios.create({
  // 요청 url 설정
  baseURL: 'https://some-domain.com/api/',
  // 요청시 header에 보내야하는 값 지정
  headers: { 'X-Custom-Header': 'foobar' },
  // 시간 지정
  timeout: 1000,
});

간단한 사용자 정의 api 요청을 정의했다.

백엔드와 통신을 통해 CRUD를 한다고 가정했을 때, 동일한 baseURL을 사용할 것이고,

또한 요청시 headers에 인증값이나 토큰값이 필요하다면 모든 요청에서 정의할 수 있다.

이렇게 해서 사용하면 api 요청시 중복 코드를 제거할 수 있고,

만약 서버 주소가 바뀐다면 정의한 곳에서만 바꿔주면 되기 때문에 유지보수 관점에서도 아주 탁월하다.

또한 다양한 옵션을 제공하고 있기 때문에 필요에 따라 추가해주면된다.

 

실제 프로젝트를 하면서 사용했던 예시코드를 소개하겠다.

import axios from 'axios'

const BASE_URL = '주소~'

// 단순 get요청으로 인증값이 필요없는 경우
const axiosApi = (url, options) => {
  const instance = axios.create({ baseURL: url, ...options })
  return instance
}

// post, delete등 api요청 시 인증값이 필요한 경우
const axiosAuthApi = (url, options) => {
  const token = '토큰 값'
  const instance = axios.create({
    baseURL: url,
    headers: { Authorization: 'Bearer ' + token },
    ...options,
  })
  return instance
}

export const defaultInstance = axiosApi(BASE_URL)
export const authInstance = axiosAuthApi(BASE_URL)

• export const defaultInstance = axiosApi(BASE_URL) = 인증이 필요없는 axios 인스턴스
• export const authInstance = axiosAuthApi(BASE_URL) = = 인증이 필요한 axios 인스턴스

import { defaultInstance, authInstance } from '@apis/utils'

// 인증이 필요없는 데이터 요청
export const getPost = async (data) => {
  try {
    const { data } = await defaultInstance.get(
      `posts/channel/${data}`,
    )
    return data
  } catch (error) {
    console.log(error)
  }
}
// 인증이 필요한 데이터 요청
export const postCreate = async (data) => {
  try {
    await authInstance.post('posts/create', data)
  } catch (error) {
    console.log(error)
  }
}

사용하는 곳에서 인증 여부에 따라 생성한 인스턴스를 불러와 사용해 주면 된다.
지정한 인스턴스 이름. get or delete or post 등등으로 사용하면 된다.
또한 data를 넘겨줘야 하는 경우 props로 data를 받아와서 넘겨주면 된다.

 

여기서 주의점!

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

인스턴스 메소드를 보면 data 필드가 존재하는 요청도 있고 없는 요청도 있다.

post, put과 같은 요청은 요청 필드에 data 필드가 있어서 props로 받은 데이터를 바로 넘겨주면 된다.

(요청받은 곳의 key 값과 동일하게 설정)

// 코드 예시
export const postCreate = async (pageId) => {
  try {
    await authInstance.post('posts/create', pageId)
  } catch (error) {
    console.log(error)
  }
}

하지만 get이나 delete는 data필드가 없기 때문에 직접 필드를 추가해줘야 한다.

export const deletePost = async (id) => {
  try {
    await authInstance.delete('posts/delete', { data: id })
  } catch (error) {
    console.log(error)
  }
}

 

✍ Axios interceptor

then이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있다.
즉, 요청 전이나 요청 후 로직이 처리되기 전에 가로채서 사용자 정의 로직을 수행할 수 있다.
인터셉터를 사용하려면 인스턴스와 함께 정의 후 사용해야 한다.

인터셉터에서 정의한 일부분을 소개하겠다.

 switch (status) {
      case 200:
        response.resData = data
        response.result = 'success'
        response.message = '성공적으로 처리되었습니다!'
        break
      case 403:
        response.resData = null
        response.result = 'error'
        response.message = '접근 권한이 없거나 사용자 정보가 올바르지 않습니다!'
        break

위의 코드를 보면 200, 403에 따라 다르게 처리하는 것을 볼 수 있다.
저 숫자의 의미는 서버에서 내려주는 상태 코드이다.
백엔드와 함께 작업할 때, 백엔드에서 api요 청 처리에 대한 응답 값을 내려준다.
그래서 상태 코드에 따라 우리 팀은 이렇게 처리할 것이다, 00에러에 대해서 00처리를 하자!
이런 식으로 협의가 된 경우는 상태 코드에 따라 자유롭게 처리할 수도 있다는 장점이 있다.

또한 위의 인스턴스 예시에서 인증 토큰 값을 인스턴스에서 정의했지만,
인터셉터에서 전처리로 처리할 수도 있다.

 

✅ Router

Roter를 학습할 당시에는 Router v5로 강의 및 학습이 진행되었다.

하지만 정리하는 시점에 v6로 업데이트되면서 많은 사용법이 바뀌어서

이 부분은 학습하기에 좋은 추천 자료만 링크로 걸어두겠다.

 

공식 문서

벨로퍼트 블로그 Router 개념부터 v6까지 전체를 다루고 있어서 아주 좋다 

벨로퍼트 강의 이 유튜브 강의는 v5 -> v6로 무엇이 바꼈는지 영상으로 설명해주셔서

이미 기본 Router의 개념을 알고 있다면 이것을 추천한다.

벨로퍼트짱...

 

📖 학습한 내용

• React(9)
  
  • axios를 이용한 네트워크 API 실습
  • SPA의 역사
  • react-router