Front

collback 함수, 기능이 종료되는 시점에 실행되는 함수. 그걸 가능하게 하는게 자바스크립트는 함수를 인자로 넘길수 있어서다. 인자로 전달되는 함수를 collback 함수라고 한다. 자바스크립트는 비동기라 앞에 코드가 실행중 일때 끝날때까지 기다리는게 아닌 다음 코드를 실행한다. 그래서 지금 함수결과가 0이고 나중에 실행이 끝난 데이터 호출 결과는 30인거다. 2번 작업이 끝나기 전에 3번을 실행시켰다. jquery ajax jquery ajax 함수를 계속 인자로 넘기다보면 콜백지옥에 빠진다. 이런 부분 때문에 promise 라는게 등장한다. jquery ajax

1. 첫번째 this JavaScript에서의 this는 전역을 의미한다. this를 출력하면 window가 찍힌다. 2. 두번째 this 함수안에 있는 this도 전역을 의미한다. 함수안에 console로 this를 찍어도 window가 찍힌다. 3. 세번째 this (함수의 첫 이름이 대문자로 시작하는 함수 -> 생성자 함수) 여기서는 this가 생성자 함수를 가르킨다. 4. 비동기처리 에서의 this 호출 전 에는 VueComponent 호출 후 에는 undefined 비동기 호출 할때는 기존의 this를 벗어난 this가 생김 (자바스크립트가 이렇게 동작) 이거때문에 기존 컴포넌트, 객체를 가리킬때 항상 바인딩으로 var vm = this; 이렇게 연결했다. ES6의 화살표함수를 쓰면 this가 ..

api 폴더의 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/1.json`) } function fetchAsk..

import Vue from 'vue' import App from './App.vue' import { router } from './routes/index.js'; Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app') routes 폴더 안 mode: 'history' 사용 전 mode: 'history' 사용 후 import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JobsView ..

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90vuejs-v-for-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%98%EB%B3%B5%EB%AC%B8-83501d7a635a [맨땅에VueJS] v-for, 리스트 렌더링 / 반복문 복잡한 웹을 만들다보면 정말 자주 마주치게 되는 상황이 있습니다. 게시판의 게시글 리스트를 보여줘야하는 상황처럼 목록이나 리스트와 같이 비슷한 내용을 반복적으로 보여줘야하는 경우가 medium.com

router 설치 npm i vue-router --save package.json 파일에 vue-router 가 생기면 설치 성공 axios 설치 npm i axios --save package.json 파일에 axios가 생기면 설치 성공

CLI 2.x vs CLI 3.x - 명령어 - 2.x : vue init '프로젝트 템플릿 이름' '파일 위치' - 3.x : vue create '프로젝트 이름' - 웹팩 설정 파일 - 2.x : 노출 O - 3.x : 노출 X - 프로젝트 구성 - 2.x : 깃허브의 템플릿 다운로드 - 3.x : 플러그인 기반으로 기능 추가 - ES6 이해도 - 2.x : 필요 X - 3.x : 필요 O

import Vue from 'vue' import Vuex from 'vuex' import todoApp from './modules/todoApp' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); export const store = new Vuex.Store({ modules:{ todoApp } }); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch() { const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (local..

import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutations' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch(){ const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i) !== 'logle..

아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? // store.js import Vue from 'vue' import Vuex from 'vuex' export const store = new Vuex.Store({ state: {}, getters: {}, mutations:{}, actions:{} }); Vuex.Store({}) 의 속성을 모듈로 연결 ↓ - ES6의 Import & Export 를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex from 'vuex' import * as getter from 'store/getters.js' import * as mutations from 'store/mutations.js' import * ..