refactor : 리스트및 상세 api 연동 방식 수정

src/api/getArticle.js

@@ -0,0 +1,7 @@
+export default async function getArticle(id) {
+  const res = await fetch('/dbs/articleList.json');
+
+  const data = await res.json();
+
+  return data.articles[id];
+}

src/api/getArticleList.js

@@ -0,0 +1,7 @@
+export default async function getArticleList() {
+  const res = await fetch('/dbs/articleList.json');
+
+  const data = await res.json();
+
+  return data.articles;
+}

src/pages/Article/index.js

@@ -1,29 +1,31 @@
 import Component from '@/core/Component';
 import ArticleDetail from '@/components/ArticleDetail';
 
+import getArticle from '@/api/getArticle';
+
 class ArticlePage extends Component {
   didMount() {
-    this.getArticle();
+    this.fetchArticle();
   }
 
   didUpdate() {
     this.renderArticle();
   }
 
   template() {
-    return `<div class="container"></div>`;
+    return `<div class="page__container"></div>`;
   }
 
-  getArticle() {
-    fetch('/dbs/articleList.json')
-      .then((res) => res.json())
-      .then((data) => {
-        this.setState({ item: data.articles[this.props.params.id] });
-      });
+  async fetchArticle() {
+    const { id } = this.props.params;
+
+    const article = await getArticle(id);
+
+    this.setState({ item: article });
   }
 
   renderArticle() {
-    const container = this.target.querySelector('.container');
+    const container = this.target.querySelector('.page__container');
 
     new ArticleDetail(container, this.state);
   }

src/pages/Articles/index.js

@@ -1,9 +1,11 @@
 import Component from '@/core/Component';
 import ArticleList from '@/components/ArticleList';
 
+import getArticleList from '@/api/getArticleList';
+
 class ArticlesPage extends Component {
   didMount() {
-    this.getArticleList();
+    this.fetchArticleList();
   }
 
   didUpdate() {
@@ -12,22 +14,23 @@ class ArticlesPage extends Component {
 
   template() {
     return `
-    <div class="container"></div>
-    `;
+    <div class="page__container">
+      <div class="page__inner">
+        <h3 class="page__title">개발</h3>
+        <div class="article-list"></div>
+      </div>
+    </div>`;
   }
 
-  getArticleList() {
-    fetch('/dbs/articleList.json')
-      .then((res) => res.json())
-      .then((data) => {
-        this.setState({ list: data.articles });
-      });
+  async fetchArticleList() {
+    const list = await getArticleList();
+
+    this.setState({ list });
   }
 
   renderArticleList() {
-    const container = this.target.querySelector('.container');
-
-    new ArticleList(container, this.state);
+    const articleList = this.target.querySelector('.article-list');
+    new ArticleList(articleList, this.state);
   }
 }