feat : routes 관련 페이지 생성 및 api 연동

public/dbs/articleList.json

@@ -0,0 +1,165 @@
+{
+  "articles": [
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/04/techblog-01-about-fechapter.png",
+      "title": "토스 프론트엔드 챕터를 소개합니다!",
+      "summary": "토스에서 프론트엔드 개발자가 일하는 방법과 맡고 있는 역할에 대해 소개드립니다.",
+      "date": "20210428",
+      "id": "1"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/04/techblog-02-webcash.png",
+      "title": "웹 서비스 캐시 똑똑하게 다루기",
+      "summary": "웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다.",
+      "date": "20210429",
+      "id": "2"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/05/techblog-03-jscodeshift.png",
+      "title": "JSCodeShift로 기술 부채 청산하기",
+      "summary": "기술 부채는 개발할수록 쌓여만 갑니다. 프론트엔드 챕터가 JSCodeShift를 이용하여 순식간에 100개 서비스의 기술 부채를 해결한 경험을 소개합니다.",
+      "date": "20210504",
+      "id": "3"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/05/techblog-04-yarn-berry.png",
+      "title": "node_modules로부터 우리를 구원해 줄 Yarn Berry",
+      "summary": "토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다.",
+      "date": "20210507",
+      "id": "4"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/05/techblog-05-template-literal.png",
+      "title": "Template Literal Types로 타입 안전하게 코딩하기",
+      "summary": "TypeScript 코드베이스의 타입 안전성을 한 단계 올려줄 수 있는 Template Literal Type의 뜻과 응용에 대해 알아봅니다.",
+      "date": "20210514",
+      "id": "5"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2021/10/techblog-06-agility.png",
+      "title": "개발자의 애질리티",
+      "summary": "이 글은 토스페이먼츠에 입사하신, 혹은 입사를 고려 중인 개발자분들을 위해 작성된 글입니다. 애자일하게 일한다는 것은 어떠한 의미일까요?",
+      "date": "20211014",
+      "id": "6"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/02/techblog-07-jam-stack.png",
+      "title": "조금만 신경써서 초기 렌더링 빠르게 하기 (feat. JAM Stack)",
+      "summary": "SPA(Single Page Application) 구조로 웹 프론트엔드 애플리케이션이 개발되면서 초기 렌더링 속도는 프런트엔드 개발자에게 중요한 과제 중 하나가 되었습니다. 사용자 경험에 영향을 줄 수 있는 가장 큰 요소 중 하나가 바로 속도이기 때문입니다.",
+      "date": "20220209",
+      "id": "7"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/04/techblog-08-rest-docs.png",
+      "title": "Kotlin으로 DSL 만들기: 반복적이고 지루한 REST Docs 벗어나기",
+      "summary": "토스페이먼츠에서는 API docs를 REST Docs를 사용해서 작성할 수 있도록 권장하고 있습니다. 이 글에서는 DSL을 통해서 반복적인 REST Docs 테스트 코드 작성을 줄일 수 있는 방법을 알아봅니다.",
+      "date": "20220411",
+      "id": "8"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/05/techblog-09-error-handling.png",
+      "title": "에러 핸들링을 다른 클래스에게 위임하기 (Kotlin 100% 활용)",
+      "summary": "Kotlin의 Result로 MSA에서 에러가 전파되지 않는 안전한 환경을 만드는 방법을 알아봅니다.",
+      "date": "20220514",
+      "id": "9"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/06/techblog-10-test-code.png",
+      "title": "테스트 의존성 관리로 높은 품질의 테스트 코드 유지하기",
+      "summary": "혹시 테스트 코드에서도 의존성을 관리해본 적이 있으실까요? 해당 포스트에서는 Gradle의 java-test-fixtures 플러그인을 사용하여 테스트 의존성 관리를 통해 높은 품질의 테스트 코드를 유지하는 방법을 알아봅니다.",
+      "date": "20220609",
+      "id": "10"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/10/techblog-11-node-js.png",
+      "title": "CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field",
+      "summary": "Node.js에는 두 가지 Module System이 존재합니다. 토스 프론트엔드 챕터에서 운영하는 100개가 넘는 라이브러리들은 그것에 어떻게 대응하고 있을까요?",
+      "date": "20221004",
+      "id": "11"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/10/tech_M.png",
+      "title": "토스증권 QA Team을 소개합니다",
+      "summary": "이 글은 토스증권 QA Team에 입사를 고려 중인 지원자들을 위해 작성된 글입니다. 토스증권 QA Manager 하는 역할과 일하는 방식은 어떻게 다를까요?",
+      "date": "20221025",
+      "id": "12"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/10/tech-article-ts.png",
+      "title": "TypeScript 타입 시스템 뜯어보기: 타입 호환성",
+      "summary": "타입호환성은 무엇이며 왜 필요할까요? 타입호환이 지원되지 않는 경우가 존재한다는 것을 아셨나요? 평소 익숙했던 개념들에 대해 질문을 던져가며 TypeScript 타입 시스템에 관해 심도있게 알아보고자 합니다.",
+      "date": "20221026",
+      "id": "13"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/11/tech-article-nest-js-02.png",
+      "title": "NestJS 환경에 맞는 Custom Decorator 만들기",
+      "summary": "NestJS에서 데코레이터를 만들기 위해서는 NestJS의 DI와 메타 프로그래밍 환경 등을 고려해야 합니다. 어떻게 하면 이러한 NestJS 환경에 맞는 데코레이터를 만들 수 있을지 고민해보았습니다.",
+      "date": "20221122",
+      "id": "14"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2022/12/01-1.png",
+      "title": "토스증권 QA 문화 ‘통합테스트’를 아시나요? (feat. 해외주식)",
+      "summary": "토스증권 해외주식 출시 전에 사내 임직원 대상으로 진행한 ‘통합테스트’에 대해 소개합니다. 통합테스트 진행 방식을 참고하여 간단한 규칙과 사용자 시나리오를 활용해 사용자의 반응을 미리 확인해 보세요.",
+      "date": "20221212",
+      "id": "15"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2023/01/js_center.png",
+      "title": "똑똑하게 브라우저 Polyfill 관리하기",
+      "summary": "현대적인 JavaScript를 쓰면서도 넓은 범위의 기기를 지원하기 위한 Polyfill을 어떻게 똑똑하게 설정할 수 있는지 소개합니다.",
+      "date": "20230121",
+      "id": "16"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2023/03/declarative.png",
+      "title": "선언적인 코드 작성하기",
+      "summary": "선언적인 코드, 토스 프론트엔드 챕터는 어떻게 생각을 하고 있을까요?",
+      "date": "20230316",
+      "id": "17"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2023/03/00017-3291509353.png",
+      "title": "tosspayments-restdocs: 선언형 문서 작성 라이브러리",
+      "summary": "REST Docs 를 최소한의 코드로 작성하면서 변화에도 더 유연하게 대처할 수 있는 tosspayments-restdocs 라이브러리와, 라이브러리에 녹인 기술들을 소개합니다.",
+      "date": "20230322",
+      "id": "18"
+    },
+    {
+      "thumbnail": "https://wp.toss.tech/wp-content/uploads/2023/03/center.png",
+      "title": "ESLint와 AST로 코드 퀄리티 높이기",
+      "summary": "ESLint와 AST로 토스에서 코드 퀄리티를 높인 방법에 대해 소개드려요.",
+      "date": "20230331",
+      "id": "19"
+    },
+    {
+      "thumbnail": "https://static.toss.im/illusts-content/img-tech-cover.png",
+      "title": "Spring Boot Actuator의 헬스체크 살펴보기",
+      "summary": "서버의 상태를 알려주는 헬스 체크에 대해 알고 계시나요? 단순히 200 OK만 내려주겠거니 하고 별로 신경을 안 쓰고 계셨나요? 해당 포스트에서는 Spring Boot Actuaor가 제공해주는 헬스 체크는 어떤 식으로 서버의 상태를 점검하는지, 어떤 부분을 주의하며 사용해야하는지 알아봅니다.",
+      "date": "20230401",
+      "id": "20"
+    },
+    {
+      "thumbnail": "https://static.toss.im/assets/toss-tech/node%20js-security.png",
+      "title": "Node.js url.parse() 취약점 컨트리뷰션",
+      "summary": "토스 보안기술팀은 안전한 금융 서비스를 제공하기 위한 연구를 수행하고 있어요.\n많은 서비스에서 사용되고 있는 Node.js의 취약점을 분석하고 안전하게 패치될 수 있도록 기여했던 과정을 소개드려요.",
+      "date": "20230512",
+      "id": "21"
+    },
+    {
+      "thumbnail": "https://static.toss.im/assets/toss-tech/frontend-diving-club.jpg",
+      "title": "놀러오세요! 프론트엔드 다이빙 클럽",
+      "summary": "프론트엔드에 관한 깊은 이야기를 나눌 수 있는 오프라인 커뮤니티, 프론트엔드 다이빙 클럽을 소개합니다.",
+      "date": "20230721",
+      "id": "22"
+    },
+    {
+      "thumbnail": "https://static.toss.im/assets/toss-tech/slash_juneseokbeomgun_thumb.png",
+      "title": "레고처럼 조립하는 토스 앱",
+      "summary": "수많은 서비스를 담고 있는 대규모 iOS 앱에 어울리는 아키텍처는 무엇일까요?\n프로젝트 간의 의존성과 모듈 간의 결합도를 낮춰, 더 효율적인 서비스 개발, 관리를 이뤄낸 과정을 소개합니다. ",
+      "date": "20230822",
+      "id": "23"
+    }
+  ]
+}

src/components/ArticleDetail/index.js

@@ -0,0 +1,14 @@
+import Component from '@/core/Component';
+
+class ArticleDetail extends Component {
+  template() {
+    return `
+    <div>
+    ${this.props.item.id}번
+    ${this.props.item.title}
+    </div>
+ `;
+  }
+}
+
+export default ArticleDetail;

src/components/ArticleList/index.js

@@ -0,0 +1,18 @@
+import Component from '@/core/Component';
+
+class ArticleList extends Component {
+  template() {
+    return `
+    <ul>
+    ${this.props.list
+      .map(
+        (item, index) =>
+          `<li><a href="/articles/${index}" data-link>${item.id}번 ${item.title}아티클</a></li>`,
+      )
+      .join('')}
+    </ul>
+ `;
+  }
+}
+
+export default ArticleList;

src/core/Component.js

@@ -0,0 +1,48 @@
+class Component {
+  target;
+
+  state;
+
+  props;
+
+  constructor(target, props) {
+    this.target = target;
+    this.state = {};
+    this.props = props;
+
+    this.setup();
+    this.mount();
+  }
+
+  setup() {}
+
+  template() {}
+
+  render() {
+    const template = this.template();
+    if (!template) return;
+    this.target.innerHTML = template;
+  }
+
+  mount() {
+    this.render();
+    this.didMount();
+  }
+
+  update() {
+    this.render();
+    this.didUpdate();
+  }
+
+  didMount() {}
+
+  didUpdate() {}
+
+  setState(newState) {
+    this.state = { ...this.state, ...newState };
+
+    this.update();
+  }
+}
+
+export default Component;

src/index.js

@@ -0,0 +1,16 @@
+import ArticlePage from '@/pages/Article';
+import ArticlesPage from '@/pages/Articles';
+import DesignPage from '@/pages/Design';
+import NotFoundPage from '@/pages/NotFound';
+import Router from '@/router/index.js';
+
+const root = document.querySelector('#app');
+
+const router = new Router(root);
+
+router
+  .addRoute({ path: '/', page: ArticlesPage })
+  .addRoute({ path: '/articles/:id', page: ArticlePage })
+  .addRoute({ path: '/design', page: DesignPage })
+  .addRoute({ path: '*', page: NotFoundPage })
+  .start();

src/pages/Article/index.js

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

src/pages/Articles/index.js

@@ -0,0 +1,34 @@
+import Component from '@/core/Component';
+import ArticleList from '@/components/ArticleList';
+
+class ArticlesPage extends Component {
+  didMount() {
+    this.getArticleList();
+  }
+
+  didUpdate() {
+    this.renderArticleList();
+  }
+
+  template() {
+    return `
+    <div class="container"></div>
+    `;
+  }
+
+  getArticleList() {
+    fetch('/dbs/articleList.json')
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({ list: data.articles });
+      });
+  }
+
+  renderArticleList() {
+    const container = this.target.querySelector('.container');
+
+    new ArticleList(container, this.state);
+  }
+}
+
+export default ArticlesPage;

src/pages/Design/index.js

@@ -0,0 +1,9 @@
+import Component from '@/core/Component';
+
+class DesignPage extends Component {
+  template() {
+    return `<h3>디자인 페이지입니다.</h3>`;
+  }
+}
+
+export default DesignPage;

src/pages/NotFound/index.js

@@ -0,0 +1,9 @@
+import Component from '@/core/Component';
+
+class NotFoundPage extends Component {
+  template() {
+    return `<h3>이 페이지를 찾을 수 없습니다.</h3>`;
+  }
+}
+
+export default NotFoundPage;