Programming/Vue60 [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - Root/상위 컴포넌트 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(테이블) 화면 기능 개발 [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 기능 개발 [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 메뉴에 공지사.. 2023. 2. 6. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 상세 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 상세 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 UI, 레이아웃(Layout) 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 상세 화면의 레이아웃이 구성되는 것을 확인하실 수 있습니다. ▶ 초기 화면, OK 버튼 클릭한 경우 ▶ Reg.. 2023. 2. 3. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(테이블) 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 UI, 레이아웃(Layout) 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 기본(리스트, 테이블) 화면의 레이아웃이 구성되는 것을 확인하실 수 .. 2023. 2. 2. Vue와 스프링부트(Spring Boot) 연동/연결하기 Vue와 Spring Boot 연동/연결하기 Vue와 Spring Boot를 연동하는 방법은 크게 2가지가 있습니다. Spring Boot 프로젝트 내에 Vue 프로젝트를 생성하는 방법 하나의 프로젝트로 관리할 수 있음 (작업은 분리해서 할 수 있음) Vue 프로젝트의 빌드 결과를 Spring Boot 프로젝트의 특정 위치에 위치시켜두는 방법 Frontend와 Backend 프로젝트를 분리해서 관리할 수 있음 구글링해보면 1번 방법이 대부분이나 저는 프로젝트를 분리하여 관리하고 싶기 때문에 2번 방법으로 진행하였습니다. 본 포스팅 또한 2번 방법을 진행하는 방법에 대해 작성되어 있습니다. 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실.. 2023. 2. 1. "'v-slot' directive doesn't support any modifier" 오류 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vuetify 예시 코드('v-slot:item.actions') 적용 후 빌드시 발생한 오류 상황 Vuetify 예시 코드를 이용하여 게시판 화면을 구현하는 중에 지원하지 않는 Modifier라는 오류가 발생하였습니다. 실제로 종종 발생하는 경우인지, 제가 사용하는 예시코드 안내 사항으로도 아래와 같이 해결 방법을 제시해주고 있었습니다. 예시 코드를 적용한 후, 구동하기 위해 'npm run serve'를 터미널에 명령어로 치는 순간 아래와 같이 오류가 발생하였습니다. 위 사진에 안내되는 오류 메세지를 텍스트로 써보자면.. 2023. 1. 9. [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 메뉴에 공지사항/게시판 연동하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "웹 어플리케이션 (Web Application) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 관리자/직원 전용 웹 어플리케이션의 메뉴 중에서 Notice 선택시 보여지는 화면을 구현하는 과정입니다. 웹 어플리케이션(Web Application) 구현하기 - 공지사항/게시판 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 UI, 레이아웃(Layout) 구현하.. 2023. 1. 6. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 UI, 레이아웃(Layout) 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 상세 화면 Layout을 구현하는 과정입니다. 공지사항/게시판 구현하기 - 상세 화면 - 레이아웃(Layout) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45 프로그램 설치 프로젝트 구축 프로젝트 구동 테스트 뷰(Vue.js.. 2023. 1. 5. 이전 1 2 3 4 5 6 ··· 9 다음
