728x90 반응형 전체 글170 [Vue.js] Hacker News - 라우터 실전 동적 라우트 매칭(Dynamic Route Matching) 주어진 패턴을 가진 라우터를 동일한 컴포넌트에 매핑할 때 동적 세그먼트를 사용하는 것 const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작 { path: '/user/:id', component: User } ] }) 이 경우 /user/kim 과 /user/park 은 같은 경로에 매핑된다. 동적 세그먼트는 콜론:으로 표시하고 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서this.$route.params로 표시된다. const User = { template: 'User {{ $route.params.id }}' } .. 2020. 9. 21. [Vue.js] Hacker News - 스토어 구현 Vuex [Vue.js] Vuex 포스팅 참고 설치 npm i vuex 실행 // Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-advanced/vue-news (master) $ npm i vuex 구현 1. src/store/index.js 생성 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({}); 2. main.js 에 index.js에서 선언한 store import import Vue from 'vue' import App from './App.vue' import { router } from './routers.. 2020. 9. 18. [Vue.js] Hacker News - API 구현 axios를 이용한 API 호출 설치 npm i axios --save 실행 // Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-advanced/vue-news (master) $ npm i axios --save 구현 1. src/api/index.js 생성 import axios from 'axios'; // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: "https://api.hnpwa.com/v0/", }; // 2. API 함수들을 정리 function fetchNewsList() { // ES6 문법 // 문자열 중간에 변수 대입하기 // `${변수명}나머지 문자열` // .. 2020. 9. 17. [Vue.js] Hacker News - 라우터 기본 라우터 설치 및 구현 설치 npm i vue-router --save 실행 // Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-advanced/vue-news (master) $ npm i vue-router --save 구현 1. src/routers/index.js 생성 import Vue from "vue"; import VueRouter from "vue-router"; import NewsView from '../views/NewsView.vue'; import AskView from "../views/AskView.vue"; import JobsView from "../views/JobsView.vue"; Vue.use(VueRouter);.. 2020. 9. 17. [Vue.js] Hacker News - 소개 및 프로젝트 설정 Hacker News 컴퓨터 과학 및 기업가 정신에 중점을 둔 소셜 뉴스 웹 사이트로 Paul Graham의 투자 자금과 신생 인큐베이터 Y Combinator가 운영한다. 일반적으로 제출할 수있는 컨텐츠는 "지적인 호기심을 만족시키는 것"으로 정의된다. HNPWA API 이용하기 Hacker News API를 이용하여 Vue.js 프로젝트 실습해보자 사용할 API 목록 News Ask Jobs Vue CLI 2.x vs Vue CLI 3.x 명령어 2.x : vue init '프로젝트 템플릿 이름' '파일 위치' 3.x : vue create '프로젝트 이름' Webpack 설정 파일 2.x : 노출 O 3.x : 노출 X 프로젝트 구성 2.x : Github의 템플릿 다운로드. npm install .. 2020. 9. 17. 이전 1 ··· 15 16 17 18 19 20 21 ··· 34 다음