chore: Axios 추가

.eslintrc.json

@@ -16,6 +16,7 @@
     "no-param-reassign": "off",
     "new-cap": "off",
     "class-methods-use-this": "off",
-    "no-unused-vars": "off"
+    "no-unused-vars": "off",
+    "import/no-extraneous-dependencies": "off"
   }
 }

README.md

@@ -15,6 +15,8 @@ Javascript로 [toss.tech](https://toss.tech) 사이트를 구현하고, 그 과
 git clone https://github.com/f-lab-edu/toss-tech-route
 npm install
 npm run start
+
+# http://localhost:8080 에서 확인 가능합니다.
 ```
 ### Script
 ```bash
@@ -36,7 +38,7 @@ npm run prettier:check: prettier를 활용하여 코드컨벤션을 확인해요
 ### 구현 내용을 리뷰어에게 명확하게 전달하려고 고민했습니다.
 1. 개발 순서를 세부적으로 계획하고, [issues](https://github.com/f-lab-edu/toss-tech-router/issues)에 등록하여 진행했습니다.
 2. [PR 템플릿](https://github.com/f-lab-edu/toss-tech-router/blob/main/.github/PULL_REQUEST_TEMPLATE.md)을 사용하여 리뷰어가 이해하기 쉽게 구현 내용을 전달했습니다.
-3. [코드리뷰](https://github.com/f-lab-edu/toss-tech-router/pull/6)에 작성한 [위키](https://github.com/f-lab-edu/toss-tech-router/wiki)를 첨부하여, 구현 내용을 상세하게 전달했습니다.
+3. [코드리뷰](https://github.com/f-lab-edu/toss-tech-router/pull/10)에 작성한 [위키](https://github.com/f-lab-edu/toss-tech-router/wiki)를 첨부하여, 구현 내용을 상세하게 전달했습니다.
 ### 코드의 모듈화와 일관성을 유지하기 위해 노력했습니다.
 1. 프로젝트 구조를 lib와 ui로 나누어 폴더 구조를 명확하게 구조화 했습니다.  
 2. 하드코딩을 지양하고, 재사용 가능한 코드는 모듈화하여 관리했습니다.

package.json

@@ -26,7 +26,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
+    "axios": "^1.3.4",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "eslint": "^8.35.0",
@@ -39,12 +42,10 @@
     "prettier": "^2.8.4",
     "style-loader": "^3.3.1",
     "webpack": "^5.76.0",
-    "webpack-cli": "^5.0.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
-    "@babel/plugin-transform-runtime": "^7.21.0"
+    "webpack-cli": "^5.0.1"
   },
   "lint-staged": {
-    "**/*.{js,html,css,json,yaml,md}": "npm run prettier:check",
+    "**/*.{js,html,css,json}": "npm run prettier:check",
     "**/*.{js}": "npm run lint"
   },
   "msw": {

src/lib/api/article.js

@@ -1,20 +1,22 @@
-import request from './index';
+import request, { handleErrorResponse } from './index';
 import { API_URL } from '../utils/constant';
 
 export const apiGetArticleList = async () => {
   try {
-    const response = await request({ url: API_URL.ARTICLES });
-    return response;
+    const response = await request.get(API_URL.ARTICLES);
+    return response.data;
   } catch (error) {
-    return { error: error.message };
+    handleErrorResponse(error);
+    throw error;
   }
 };
 
 export const apiGetArticleDetail = async (id) => {
   try {
-    const response = await request({ url: `${API_URL.ARTICLE_DETAIL}/${id}` });
-    return response;
+    const response = await request.get(`${API_URL.ARTICLE_DETAIL}/${id}`);
+    return response.data;
   } catch (error) {
-    return { error: error.message };
+    handleErrorResponse(error);
+    throw error;
   }
 };

src/lib/api/index.js

@@ -1,17 +1,40 @@
-const request = async ({
-  url,
-  options = {
-    method: 'GET',
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: '/',
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    return config;
   },
-}) => {
-  const response = await fetch(url, options);
+  (error) => {
+    return Promise.reject(error);
+  },
+);
 
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(`서버의 응답이 올바르지 않습니다. (${response.status}): ${error.message}`);
+instance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    return Promise.reject(new CustomError(error.message));
+  },
+);
+
+export class CustomError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'CustomError';
   }
+}
 
-  return response.json();
+export const handleErrorResponse = (error) => {
+  if (error instanceof CustomError) {
+    console.log('CustomError: ', error.name, error.message);
+    return;
+  }
+  console.log('Error: ', error?.message);
 };
 
-export default request;
+export default instance;