2021년 11월 셋째주 WIL

Axios interceptors

axios에 interceptors 라는 내장 함수를 알게 되었다. 덕분에 매번 통신을 하면서 일일이 토큰을 끼워 넣는 비효율적인 코드를 대폭 줄일 수 있었다.

나 같은 경우는 요청(request)을 보내는 과정에서 header에 authorization이 포함되어있지 않으면 일단 토큰이 저장되어있는지 아닌지(로그인상태인지와 유사)를 체크하고 토큰이 있으면 헤더에 토큰을 끼워 넣어주는(intercept) 식으로 interceptors를 활용하였다.

(없으면 그냥 진행~)

 

axios.interceptors.request.use((config) => {
  if (!config.headers.authorization) {
    const token = localStorage.getItem('token');

    if (token) {
      config.headers.authorization = token;
    }
  }
  return config;
});

 

"나는 그냥 무조건적으로 모든 통신에서 헤더에 토큰을 넣고 진행하고 싶다!" 싶으면 완전 기본값으로 지정해버리는 방법도 있다.

axios defaults 를 활용하는 건데 해당 내용은 공식 문서에서 예시 코드를 가져와봤다.

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

대충 이런 느낌으로 쓰면 될 것 같지만 토큰이 굳이 필요 없어도 될 통신에서도 토큰이 넘어간다는 점은 인지하고, 토큰이 아니라 밑에 예시처럼 프로젝트 규모가 작은 경우 baseURL을 지정할 때 쓰면 될 법하다.

 

 

더 많은 내장 함수와 활용법은 공식 문서에 나와있다.

https://axios-http.com/docs/interceptors

Interceptors | Axios Docs

---

Mock-Up 데이터 관리

백엔드의 api와 바인딩시키기 한참 전 기본적으로 mock-up데이터를 임의로 만들어서 활용을 하곤 한다. 작업을 하면서 진짜 임의로 평소 하던 대로 Mock-Up을 쓰고 PR을 올렸는데 관리하는 방법에 대한 좋은 리뷰를 받았다.

평소 활용법은 해당 컴포넌트에 그냥 Mock-up을 써버리는 방식이었는데 이렇게 하면 코드가 좀 길어지긴 한다.

// 예시 App.js

export const App = () => {

const MockData = [
	{ id:1, name: '하이'},
	{ id:2, name: '나는'},
	{ id:3, name: '네임이야'},
]

return (
	<>
		{MockData.map((data) => (
			<div key={data.id}>{data.name}</div>
		))}
	</>
	)
}

예시로는 짧은 길이의 내용을 데이터를 예로 들었지만 실제 다른  이벤트 함수도 들어가고 하면 짧은 Mock이어도 조잡해 보일 수 있다.

 

이때 그냥 data 파일을 따로 만들고 import 하는 식으로 쓰다가 나중에 api 바인딩할 때 빼버리면 관리하기 편하다고 리뷰를 받았다.

// data.js

export const MockData = [
	{ id:1, name: '하이'},
	{ id:2, name: '나는'},
	{ id:3, name: '네임이야'},
]

// 예시 App.js

import { MockData } from "./data"

export const App = () => {

return (
	<>
		{MockData.map((data) => (
			<div key={data.id}>{data.name}</div>
		))}
	</>
	)
}