Programming116 뷰(Vue.js) 프로젝트에 뷰 액시오스(Vue Axios) 설치하기 프론트엔드로 뷰(Vue.js)를, 백엔드로 스프링부트(Spring Boot)를 개발하면서 두 환경을 연동하기 위해 'Axios'를 설치해야 합니다. 뷰 Axios는 뷰에서 권고하는 HTTP 통신 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다. 뷰 액시오스 (Vue Axios) Axios는 Promise 기반의 HTTP 통신 라이브러리입니다. 뷰 액시오스(Vue Axios) 설치 VSCode에서 Vue Axios를 설치하는 과정입니다. 1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다. 방법: 키보드: Ctrl + Shift + ` 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭 2. Axios 설치 명.. 2023. 2. 7. [실습] 뷰(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. [실습] 스프링부트(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. "Cloud Agent Error: Can not send requests to localhost. Select a different agent." 오류 해결 방법 Postman에서 localhost로 REST API 호출시 에러 발생하는 경우 상황 Postman 사용 환경 구축 후, REST API 호출 테스트를 첫 시도하는 중에 아래 이미지와 같이 Agent 관련 오류가 발생하였습니다. 위 오류의 해결책으로 우측에 'Use Postman's Desktop Agent'를 제시하고 있습니다. 위 사진에 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. "Cloud Agent Error: Can not send requests to localhost. Select a different agent." 해결 방법 1. Postman 우측 하단에 위치한 'Agent'에서 사용할 Agent를 'Desktop Agent'로 선택 혹은 위 이미지에서 오류 메세지 우측에.. 2023. 1. 30. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
