1. axios

axios 사용 시 인스턴스를 생성해서 사용합니다.

Good

import Axios from 'axios';

import { accessTokenProvider } from '@/utils/token';

const baseURL = process.env.BASE_URL;

const axios = Axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json',
  },
});

const axiosWithAccessToken = Axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosWithAccessToken.interceptors.request.use(
  /* <https://yamoo9.github.io/axios/guide/interceptors.html> */
  function (config) {
    const accessToken = accessTokenProvider.get();

    if (config.headers && accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }

    return config;
  },
);

export { baseURL, axios, axiosWithAccessToken };

Bad

axios({
	method: 'get',
	url: url 주소
})
	.then((res) => {
		console.log('응답', res);
	})
	.catch((err) => {
		console.error('에러', err);
	});

2. 메서드 설정

Component를 아우르는 메서드는 function으로 선언하고, 그 내부에 사용하는 이벤트 메서드는 화살표 함수로 선언한다.

Good

function App() {
	const click = () => {
		console.log('클릭');
	};

	return (
		<div></div>
	);
}

export default App;

Bad

1. const App = () => {
		const click = () => {
			console.log('클릭');
		};
	
		return (
			<div></div>
		);
	}
	
	export default App;

2. function App() {
		function click() {
			console.log('클릭');
		};
	
		return (
			<div></div>
		);
	}
	
	export default App;

3. 반복문

반복문을 사용할 때에는 for, for in, for of 보다는 map과 foreach를 지향하도록 합니다.

Good

1. foreach
let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
	return value;
});
console.log(a);   //undefined

2. map
let arr=[1,2,3,4,5];
let a = arr.map(function(value){
	return value +1;
});
console.log(a);  // [2,3,4,5,6]