Front

0. router에 path: '/post/:id' 추가 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/login', }, { path: '/login', component: () => import('@/views/LoginPage.vue'), }, { path: '/signup', component: () => import('@/views/SignupPage.vue'), }, { path: '/main', component: () => import('@/views..

1. api/index.js에 delete API 함수 추가 // 학습 노트 조작과 관련된 CRUD API 함수 파일 import { posts } from './index'; // 학습 노트 데이터를 조회하는 API function fetchPosts() { return posts.get('/'); } // 학습 노트 데이터를 생성하는 API function createPost(postData) { return posts.post('/', postData); } // 학습 노트 데이터를 삭제하는 API function deletePost(postId) { return posts.delete(postId); } export { fetchPosts, createPost, deletePost }; 2. Po..

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