728x90 반응형 전체 글170 [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. [Spring Boot + Vue.js] 게시판 만들기 - 구성 게시판 프로젝트, 컴포넌트, 뷰 구조는 아래와 같다. 앞으로 진행되는 포스팅 순서는 공통 컴포넌트 구현을 시작으로 각 기능별 컴포넌트 구현 순으로 진행할 예정이다. 프로젝트 구조 APP ┌─ node_modules ├─ public ├─ src ┌─ api │ ├─ assets │ ├─ components ┌─ board │ │ └─ common │ ├─ mixins │ ├─ plugins │ ├─ router │ ├─ store │ ├─ views ┌─ board │ │ ├─ error │ │ └─ Home.vue │ ├─ App.vue │ └─ main.js ├─ .browserslistrc ├─ .eslintrc.js ├─ .gitignore ├─ babel.config.js ├─ jsconfig... 2021. 1. 13. [Spring Boot + Vue.js] 게시판 만들기 - 소개 게시판 구성 Vue.js 학습 후 해당 기술을 내 것으로 만들기 위해 게시판을 만들어 보려고 한다. 개발 환경 IDE Visual Studio Code API Java 8 Spring Boot 2.4.1 Docker Mysql Mybatis APP Vue Vuetify Vuex Axios Toast UI Editor, Viewer OpenWeatherMap 기능 게시판 목록 조회, 상세 조회 게시글 작성, 수정, 삭제 댓글 작성, 수정, 삭제 조회수 증가 날씨 시간 에러 처리 화면 1. Home 2. Board 소스 저장소 github.com/jinseogood/vue-springboot-board jinseogood/vue-springboot-board Contribute to jinseogood/vu.. 2021. 1. 13. 이전 1 ··· 7 8 9 10 11 12 13 ··· 34 다음