Vue.js로 만드는 HackerNews

강의명: [인프런] Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
강사: 캡틴판교
skill: JavaScript, Vue.js, ES6, Vuex, Router, RESTFul API

HackerNews API

https://news.ycombinator.com/
https://github.com/HackerNews/API

디렉토리

src
  ├── api                         # api 저장 폴더             
  ├── components                  # component 저장 폴더(ListItem, Spinner, Toolbar, UserProfile)  
  ├── mixins                      # mixins 저장 폴더 - 재사용할 컴포넌트 옵션들이 들어갈 자리(ListMixin)
  ├── routes                      # router 저장 폴더 
  ├── store                       # store 저장 폴더 (index, mutations, actions 분리)
  ├── utils                       # utils 저장 폴더 
  └── views                       # views 저장 폴더 - View단 (NewsView, AskView, JobsView...)
  App.vue                           

데이터 호출 시점

1. 라우터 네비게이션 가드

• 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)

2. 컴포넌트 라이프 사이클 훅

• created : (컴포넌트가 생성) 되자마자 호출되는 로직

화면 구성

News

User

Ask

Item (Q & A)

Jobs

완강은 즐거웡:D