728x90 반응형 전체 글170 [Vue.js] Today I Learned - 학습 노트 수정 학습 노트 수정 Today I Learned의 학습 노트를 수정할 수 있는 기능을 구현한다. 학습 노트 수정을 위한 페이지 연결 학습 노트 수정은 수정 페이지에서 진행하려고 한다. 따라서 수정 페이지 진입 시 해당 학습 노트의 고유 ID 값을 가지고 진입을 해야하는데 이 과정에서 Dynamic Routing이 사용된다. {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt }} 학습 노트 수정 기능 구현 조회한 특정 학습 노트 데이터를 수정하는 기능을 구현한다. 2020. 10. 28. [Vue.js] Today I Learned - 학습 노트 삭제 학습 노트 삭제 Today I Learned의 학습 노트를 삭제할 수 있는 기능을 구현한다. 삭제기능 마크업 및 이벤트 연결 삭제버튼을 구성하고 해당 버튼 클릭 시 이벤트가 발생하도록 연결한다. {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt }} 삭제기능 구현 버튼 클릭 시 발생하는 이벤트를 구현한다. 추가적으로 삭제시 확인창과 삭제완료 후 목록 새로고침도 구현한다. Today I Learned 학습 노트 생성 시 UX 개선 지금까지 학습 노트를 생성하고 계속 등록 페이지에 머물러 있는데 router.push()를 통해 생성 후 메인페이지로 이동하도록 구현하여 UX를 개선할 수 있다. 2020. 10. 28. [Vue.js] Today I Learned - API 함수 모듈화 API 모듈화 데이터 성격에 따른 API 함수를 모듈화하여 코드를 효율성 있게 관리할 수 있다. 기능별 모듈화 기본 API 설정, 계정 관련, 학습 노트 관련 등 기능별로 모듈화를 하여 관리할 수 있다. 기본 API 설정 기본 Axios 사용 및 Axios 인스턴스를 생성하는 기능을 구현한 파일이다. // src/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, }); }.. 2020. 10. 28. [Vue.js] Today I Learned - 학습 노트 생성 학습 노트 생성 Today I Learned의 학습 노트를 추가할 수 있는 기능을 구현한다. 등록 페이지 라우터 연결 메인 페이지에서 등록 페이지 이동을 위한 라우터 연결을 구현한다. // src/routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/login', }, // 등록 페이지 이동 { path: '/add', component: () => import('@/views/PostAddPage.vue'), }, { path: '*', co.. 2020. 10. 28. [Vue.js] Today I Learned - 브라우저 저장소 브라우저 저장소 HTTP 쿠키와 웹 스토리지 등으로 구성되어 있으며 데이터를 서버가 아닌 클라이언트에 저장하는 것이다. 새로고침 시 문제 애플리케이션 로그인 후 새로고침 시 학습 노트 데이터가 조회되지 않는 문제가 있다. 이러한 문제가 발생하는 이유는 학습 노트 데이터 조회 API 호출 시 로그인 시 발급받은 인증 정보를 바탕으로 조회가 가능하기 때문에 새로고침 시 해당 인증정보가 비워지기 때문이다. 따라서 로그인시 발급받은 인증 정보를 브라우저 쿠키에 저장함으로서 새로고침시에도 문제없이 데이터 조회가 가능하도록 구현할 수 있다. 쿠키 저장 모듈 데이터를 쿠키에 저장하는 기능을 가진 모듈을 구현한다. // src/utils/cookies.js function saveAuthToCookie(value) {.. 2020. 10. 28. 이전 1 ··· 11 12 13 14 15 16 17 ··· 34 다음