Front

1. 기존 api / index.js (API 분할 전) import axios from 'axios'; import { setInterceptors } from './common/interceptors'; function createInstance() { return axios.create({ baseURL: process.env.VUE_APP_API_URL, }); } function createInstanceWithAuth(url) { const instance = axios.create({ baseURL: `${process.env.VUE_APP_API_URL}${url}`, }); return setInterceptors(instance); } const instance = createInsta..

1. PostAddForm.vue - computed에 isContentsValid() 함수 생성 return this.contents.length

1. 학습노트 등록 Page Router 생성 - /add import Vue from 'vue'; import VueRouter from 'vue-router'; // import LoginPage from '@/views/LoginPage.vue'; // import SignupPage from '@/views/SignupPage.vue'; Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/login', }, { path: '/login', component: () => import('@/views/LoginPage.vue'), }, { path: '/signup', ..

https://ionic.io/ionicons Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io 1. index.html - ionicont 링크 삽입 2. usage 페이지의 Basic usage 방법대로 icon 사용하기 3. MainPage.vue에 router-link 추가, ico-icon 사용 Today I Learned

단순히 자바스크립트에 로그인정보 저장해두는게 아니라 브라우저 저장소를 이용해서 토큰값을 저장하기 쿠키에 정의된 함수를 사용 document.cookie 1. cookies.js function saveAuthToCookie(value) { document.cookie = `til_auth=${value}`; } function saveUserToCookie(value) { document.cookie = `til_user=${value}`; } function getAuthFromCookie() { return document.cookie.replace( /(?:(?:^|.*;\s*)til_auth\s*=\s*([^;]*).*$)|^.*$/, '$1', ); } function getUserFromCoo..

1. MainPage.vue - 로딩 상태위한 data 추가 → isLoading: false, - API Data 받기전엔 isLoading: true, 받은 후엔 this.isLoading = false; - 로딩 스페너 component 가져오기 (import) - v-if로 isLoading이 true이면 스피너가 보이게 구현완료 Today I Learned // 5. isLoading이 true이면 스피너가 보이게 구현완료 2. LoadingSpinner.vue

1. 기존 MainPage.vue Today I Learned {{ postsItems.title }} {{ postsItems.title }} {{ postsItems.title }} 1. posts 폴더 생성, 폴더 안에 postListItem.vue 생성 2. MainPage.vue에서 Props 내려주기 Today I Learned // 2. 해당 컴포넌트에 v-for걸어주고 :postItem="postItem" 로 Props 내려주기 3. postListItme.vue에서 props 받기 // 2. props Data 바인딩, Main에서 v-for 해줬기 때문에 여기선 필요없음 {{ postItem.title }} {{ postItem.title }} {{ postItem.title }}

1. axios 모듈화 시킨 index.js에 학습 노트 데이터 조회 API 추가 import axios from 'axios'; // interceptors.js 에서 setInterceptors 함수 받아오기 import { setInterceptors } from './common/interceptors'; // 액시오스 초기화 함수 // createInstance 함수로 하나로 묶기. // 이렇게 하면 이 함수의 결과는 instance를 셋업하고 interceptors를 설정하게됨 function createInstance() { // axios.create 할때 주입한 속성은 인스턴스로 데이터 요청 할때마다 무조건 이 속성들이 정의된 상태로 수행된다. const instance = axios.c..

public 폴더의 index.html이 애플리케이션의 가장 첫번째 진입점이다. - 여기에 폰트, 아이콘 추가 하는것 Token - 사용자가 인증 되었을때만 발급되는것 로그인한 사용자의 토큰을 넣어서 API에 넘길거다. 토큰값을 어딘가에 저장하고 API 호출할때마다 사용할것 1. axios.create에 headers 추가하기 - Authorization 속성에 test1234 라고 쓴 후 API 요청을 실행했을때 네트워크 패널에서 Authorization에 test1234가 있는걸 확인 할 수 있다. import axios from 'axios'; // axios.create 할때 주입한 속성은 인스턴스로 데이터 요청 할때마다 무조건 이 속성들이 정의된 상태로 수행된다. const instance = ..

1. vuex | mutations에 clearUsernmae 함수 추가 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ // store에서 state 는 여러 컴포넌트 간에 공유되는 데이터를 뜻한다. state: { username: '', }, // state의 값이 변경됬을때 특정 상태를 개선할수 있게 사용가능 // getters의 첫번쨰 인자는 state // getters는 기본적으로 return값을 가지고 있음 getters: { // username이 빈 문자열이면 로그인 안된상태 // 로그인 되면(빈문자열이 아니면) getters가 true로 바뀜 isLogin(stat..