본문 바로가기

programming study/Vue

 (70)
Vue.js - axios의 api 함수 구조화 방법, created & beforeMount 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. api 함수 구조화 api를 사용하여 데이터를 가져와야할 때, 컴포넌트에서 매번 axios를 불러오고 api를 호출하는 것은 비효율적 별도의 폴더를 만들어 모듈화를 하면 효율적으로 사용할 수 있음 HTTP Request & Response와 관련된 설정을 할 수 있음 사용할 api가 많아질 수록 모듈화를 하면 유용 여러 컴포넌트에서 쉽게 api 호출 함수를 불러올 수 있음 예시(src/api/index.js) // package.json에 등록된 모듈을 가져옴 (node_modules 디렉토리의 모듈) import axios from 'axios'; // confi..
Vue.js - axios를 이용한 api 호출 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 페이지 컴포넌트와 로직의 분리 페이지 역할을 하는 컴포넌트와 라우팅, fetch 로직은 분리해서 설계하는 것이 좋음 컴포넌트의 레벨이 깊어지거나 설계가 바뀔 때 유연하게 대처할 수 있음 2. axios 설치 npm i axios --save axios란? http 통신 api를 편하게 사용할 수 있는 라이브러리 Promise 기반으로 api 제공 http 메소드 3. axios를 이용한 api 호출 axios는 http 메소드를 Promise 기반으로 제공 then으로 통신 다음 처리를 콜백으로 가능 catch로 통신 오류 다음 처리를 콜백으로 가능 콜백으로 화살표..
Vue.js - 라우터 링크 스타일링, mode history 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 라우터 링크 스타일링 scoped 해당 컴포넌트에만 적용하는 스타일을 작성할 수 있음 ... // 이 컴포넌트에만 적용되는 스타일 라우터 링크 스타일링 라우터 자체 내부적으로 적용되는 클래스가 있음 해당 클래스에 스타일을 지정할 수 있음 ... 2. mode history router에서 url의 해시를 제거 ... Vue.use(VueRouter); // Vue Router를 관리하는 객체 export const router = new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/news', }..
Vue.js - router-view, kebab case, redirect, router-link 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. router-view 구성한 router를 보여줌 2. redirect 특정 url에서 다른 url로 이동시킴 src/router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JovsView from '../views/JobsView.vue' Vue.use(VueRouter); // Vue Router를 관리하는 객체 ex..
Vue.js - 라우터 설치 및 라우터 구현 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. vue router 설치 npm i vue-router --save 2. router 불러오기 및 적용 코드를 용도별로 분류하는 것이 구조파악에 좋으므로 router 전용의 디렉토리와 파일을 만들기 src/router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; // 라우팅에 사용할 컴포넌트 import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JovsView from '....
Vue.js - Vue CLI로 프로젝트 생성, ESLint 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Vue CLI로 프로젝트 생성 vue create [프로젝트명] 프로젝트를 구성하는 패키지들의 인스톨까지 진행 프리셋이란? Vue CLI 3.x 버전 이후 부터 제공 됨 프로젝트를 시작하기 위한 기본적인 플러그인들의 구성 프로젝트 실행 npm run serve 2. ESLint ESLint를 사용해야 하는 이유 오류가 없는 코딩을 하기위한 장치 문장 끝 세미콜론 사용, trailing comma 등 코드 오류를 최소화하기 위해 강제 // 세미콜론를 강제 // JavaScript는 기본적으로 세미콜론을 생략해도 코드를 해석할 수 있으나, 아래와 같은 경우에는 오류가 ..
Vue.js - 애플리케이션 설계, Vue CLI 버전 별 차이 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 애플리케이션 설계란? 웹 서비스를 만들 때는 기획 문서를 확인하여, 그것을 토대로 컴포넌트 기반으로 설계를 해야 함 여러 페이지로 구성되어 있는 경우에는 라우터를 설계 해야 함 2. Vue CLI 버전 별 차이 Vue CLI 2.x vs Vue CLI 3.x 버전 명령어 웹팩 설정 파일 프로젝트 구성 ES6 이해도 2.x vue init '프로젝트 템플릿 이름' '파일 위치' 노출 O 깃헙의 템플릿 다운로드 필요 X 3.x vue create '프로젝트 이름' 노출 X 플러그인 기반으로 기능 추가 필요 O 3.x 버전부터는 웹팩 설정 파일이 노출 안 됨 vue.co..
Vue.js - 헬퍼 함수가 주는 간편함, vuex 모듈화 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. 헬퍼 함수가 주는 간편함 store에 정의한 state, gettres, mutations, actions를 map~ 함수로 간편하게 가져올 수 있다. store.js src/store import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { price: 100 }, getters: { originalPrice(state) { return state.price; }, doublePrice(state): { ret..

티스토리툴바