본문 바로가기
728x90
반응형

Dev/실습7

[Spring Boot + Vue.js] 게시판 만들기 - 에러 이번 포스팅에서는 에러 발생 시 후처리에 대해 알아보자 404 Error 요청한 페이지가 없을 경우 발생하는 오류 구현 1. Vue Router 설정 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Main', redirect: '/home', }, { path: '*', name: '404', component: () => import('@/views/error/404.vue'), }, // 홈, 게시판 목록/작성/수정/상세 경로 ] const router = new VueRouter({ mode: 'history', base: process.env... 2021. 1. 14.
[Spring Boot + Vue.js] 게시판 만들기 - 버튼 이번 포스팅은 공통으로 사용되는 버튼을 컴포넌트화 하는 것에 대해 알아보자 버튼 컴포넌트 기존 v-btn에 추가적으로 반응형, 아이콘을 적용하기 위해 공통 컴포넌트로 구현 구현 1. 컴포넌트 구현 {{ iconName }} {{ btnName }} {{ iconName }} v-on="$listeners" 를 사용하면 부모의 이벤트 리스너를 자식에게 전달할 수 있다. v-bind="$attrs" 사용 시 선택적으로 필요한 속성만 자식 컴포넌트에 렌더링 할 수 있다. Mixins 을 이용하여 구현한 isMobile() 함수를 사용하여 화면 사이즈가 모바일인지 여부를 확인하여 버튼의 모양을 다르게 구성한다. 2. Mixins 구현 export default { methods: { isMobile() { re.. 2021. 1. 14.
[Spring Boot + Vue.js] 게시판 만들기 - Toast UI Editor, Viewer 이번 포스팅은 게시글 작성을 위한 Toast UI Editor와 내용을 보여주는 Toast UI Viewer에 대해 알아보자 Toast UI Editor 컴포넌트 WYSIWYG 모드와 Markdown 모드를 지원하는 에디터 구현 구현 1. 의존성 설치 $ npm i @toast-ui/vue-editor 2. 컴포넌트 구현 ref 속성을 통해 Toast UI Editor 객체에 접근하여 다양한 함수를 사용 가능하다. invoke('함수명') 을 통해 해당 객체의 함수를 사용할 수 있다. getContent() 는 에디터에 작성된 내용을 리턴하는 함수로 상위 컴포넌트에서 쉽게 접근하기 위해 구현한 함수이다. setContent() 는 에디터에 인수로 받은 값을 설정하는 함수로 상위 컴포넌트에서 쉽게 접근하기.. 2021. 1. 14.
[Spring Boot + Vue.js] 게시판 만들기 - Tooltip, Snackbar 이번 포스팅에서는 보충 설명 및 내용을 표시해주는 말풍선 같은 툴팁과 JavaScript의 Alert과 유사한 스낵바에 대해 알아보자 툴팁(Tooltip) 컴포넌트 모바일 화면에서 게시판 상세 댓글 내역에 작성자, 작성시간 아이콘 터치 시 툴팁으로 상세내용을 표시하도록 구현 구현 {{ iconName }} {{ title }} {{ content }} v-bind="$attrs" 사용 시 선택적으로 필요한 속성만 자식 컴포넌트에 렌더링 할 수 있다. v-slot:activator="{ on, attrs }" 는 activator 이름을 가진 슬롯에서 on, attrs 슬롯 속성(slot props)을 가져온다는 의미이다. props 속성으로 iconName, title, content를 받아 툴팁을 구성.. 2021. 1. 13.
[Spring Boot + Vue.js] 게시판 만들기 - 날짜, 시간, 날씨 이번 포스팅에서는 다양한 곳에서 사용하기 위해 만든 공통 컴포넌트 중 상단바에서 사용되는 날짜, 시간, 날씨 컴포넌트를 알아보자 날짜, 시간 컴포넌트 현재 날짜와 시간을 표시해주는 컴포넌트로 JavaScript의 Date 객체를 이용하여 구현 구현 mdi-calendar {{ date }} mdi-clock-outline {{ time }} zeroPadding 함수는 인수로 숫자와 자릿수를 전달하여 해당 자릿수를 만들기 위해 빈 곳에 0을 추가하는 함수이다. 동작 확인 날씨 컴포넌트 특정 지역의 날씨정보를 표시하는 기능으로 OpenWeatherMap API를 이용하여 구현 구현 {{ icons[5] }} {{ icons[0] }} {{ icons[1] }} {{ icons[2] }} {{ icons[3.. 2021. 1. 13.

티스토리툴바