Front

구성 요소 이름 "스피너"는 항상 다중 단어 vue/multi-word-component-name이어야 합니다. 라는 error가 떴다. 이 에러는 Eslint와 같이 사용할 때 발생하는 에러인데, vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미이다. 이는 html 태그와 헷갈리지 않게 하려고 그렇게 설정해놨다고 한다. 해결하려면 경고메세지와 같이 컴포넌트명을 단어의 조합으로 바꿔도 되지만 이 에러가 아에 안뜨게 하려면, vue.config.js 파일에 lintOnSave: false를 추가해주면 된다. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({..

{{ 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도..

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 ..