실습23 Vue와 스프링부트(Spring Boot) 연동/연결하기 Vue와 Spring Boot 연동/연결하기 Vue와 Spring Boot를 연동하는 방법은 크게 2가지가 있습니다. Spring Boot 프로젝트 내에 Vue 프로젝트를 생성하는 방법 하나의 프로젝트로 관리할 수 있음 (작업은 분리해서 할 수 있음) Vue 프로젝트의 빌드 결과를 Spring Boot 프로젝트의 특정 위치에 위치시켜두는 방법 Frontend와 Backend 프로젝트를 분리해서 관리할 수 있음 구글링해보면 1번 방법이 대부분이나 저는 프로젝트를 분리하여 관리하고 싶기 때문에 2번 방법으로 진행하였습니다. 본 포스팅 또한 2번 방법을 진행하는 방법에 대해 작성되어 있습니다. 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실.. 2023. 2. 1. [실습] 스프링부트(Spring Boot)로 공지사항/게시판 구현하기 - REST API(Controller, Service) 구현하기 오늘의 Spring Boot 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판의 기능을 구현하기 위해 REST API로 DB를 CRUD하는 코드를 구현 및 테스트하는 과정입니다. 공지사항/게시판 구현하기 - REST API 구현 및 테스트 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 스프링부트(Spring Boot)로 관리자/직원 전용 Web Application 개발하기 - 백엔드(Back-end) 환경 구축하기 [실습] 스프링부트(Spring Boot)로 공지사항/게시판 구현하기 - DB Table, Entity, Repository 구현 및 CRUD 테스트 구현하기 혹시라도 .. 2023. 1. 31. [실습] 스프링부트(Spring Boot)로 공지사항/게시판 구현하기 - DB, API 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판의 기능을 구현하기 위해 DB(Tables), API를 기획/설계하는 과정입니다. 공지사항/게시판 구현하기 - 기획/설계 가장 기본적인 게시글 등록, 수정, 삭제 기능을 위주로 기획하였습니다. UI/UX 공지사항/게시판의 Layout에 대한 기획/설계는 아래 링크를 참조해주세요. https://logs-jejustone.tistory.com/42 DB - Schema: web-app - Table Name: notice.. 2023. 1. 26. [실습] 뷰(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. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 UI, 레이아웃(Layout) 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(리스트/테이블) 화면 Layout을 구현하는 과정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 - 레이아웃(Layout) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45 프로그램 설치 프로젝트 구축 프로.. 2023. 1. 4. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 중에서도 기능 구현하기 위해 기획/설계하는 과정입니다. 공지사항/게시판 구현하기 - 기획/설계 가장 기본적인 게시글 등록, 수정, 삭제 기능을 위주로 기획하였습니다. UI/UX 최종 화면 - 웹 세부 화면 - 공지사항 리스트 세부 화면 - 공지사항 조작 화면 ▶ 등록, 수정 ▶ 삭제, 상세보기 Layout 기능 공지사항 리스트 영역 등록: 공지할 게시글을 추가하는 기능의 버튼입니다. 클릭시 상세 화면의 입.. 2023. 1. 3. 이전 1 2 3 4 다음
