Front

1. 이건 일반적인 프로그래밍 패턴 // 1. 데이터를 받아와서 변수에 저장하고 var id = $.get('domain.com/id'); // 2. 저장한 변수를 이용해서 if문 이용 if(id === 'john'){ var products = $.get('domain.com/products'); } 2. 자바스크립트 비동기패턴 때문에 콜백함수로 비동기처리 $.get('domain.com/id', function(id){ if( id === 'john'){ $.get('domain.com/products', function(){ // 항상 받아온 데이터를 콜백함수 안에서 // 처리해야만 비동기처리가 가능했다. }); } }); 3. promise 등장. 콜백함수 보다 코드의 흐름을 명확하게 알수있다. ..

import Vue from 'vue' import App from './App.vue' import { router } from './routes/index.js'; import { store } from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), router, store }).$mount('#app') routes 폴더 import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JobsV..

데이터 호출 시점 1. 라우터 네비게이션 가드 - 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수) - beforeEnter : to, from, next 3개의 인자를 받음 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' import ItemView from '../views/ItemView.vue' import UserView from '../views/UserView.vue' // import create..

믹스인은 여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 입니다. 믹스인 코드 형식 var HelloMixins = { //컴포넌트 옵션 (data, methods, created 등) }; new Vue({ mixins: [HelloMixins] }) 위와 같이 믹스인을 주입할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다. routes 폴더 import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import..

vue의 하이 오더 컴포넌트는 리액트의 하이 오터 컴포넌트에서 기원된 것입니다. 리액트의 하이 오더 컴포넌트 소개 페이지를 보면 아래와 같이 정확한 정의가 나와 있습니다. A higher-order-component (HOC) is an advanced technique in React for reusing component logic. 이 말을 정리해보면 다음과 같습니다. 하이 오더 컴포넌트의 컴포넌트의 로직(코드)을 재사용하기 위한 고급 기술 입니다. 1. 공통적으로 사용하는 로직을 컴포넌트 하나에 올리고 2. 그 컴포넌트를 내려받아 사용 routes 폴더 import Vue from 'vue' import VueRouter from 'vue-router' import ItemView from '....

{{ item.points || 0 }} {{ item.title }} {{ item.title }} {{ item.time_ago }} by {{ item.user }} {{ item.domain }}

import Vue from 'vue' import App from './App.vue' import { router } from './routes/index.js'; import { store } from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), router, store }).$mount('#app') Router import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JobsView..

https://kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 있는쪽에 태그 감싸주고 name과 style 태그 넣어주면 끝

api 폴더의 - 공통 API 함수들 정리 0. axios 연결 import axios from 'axios'; // 1. HTTP Requset & Response 와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/' }; // 2. 공통 API 함수들 정리 function fetchNewsList(){ // return 바로 해준게 핵심 // return axios.get(config.baseUrl+'/news/1.json'); return axios.get(`${config.baseUrl}news/1.json`); } function fetchJobsList(){ return axios.get(`${config.baseUrl}jobs/..

routes 폴더의 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' import ItemView from '../views/ItemView.vue' import UserView from '../views/UserView.vue' Vue.use(VueRouter); export const router = new VueRouter({ mode: 'history', // url #값 제거 routes: [ //routes도..