vuejs52 [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 화면의 UI/Layout을 구현하는 과정입니다. 회원/사용자 화면 구현하기 - UI/Layout 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 프론트엔드(Font-end) 환경 구축하기 [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - 기획/설계하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. ▶ 메인 화면 ▶ 팝업 다이얼로그 - 등록/수정 ▶ 팝업 다이얼로그 - 삭제 소스 코드 src\c.. 2023. 2. 17. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - 기획/설계하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 화면의 기능을 구현하기 위해 기획/설계하는 과정입니다. 회원/사용자 화면 구현하기 - 기획/설계 UI/UX Layout BaseAdminUsers: 라우터와 연결된 뷰 파일 AdminUsersMain: BaseAdminUsers에 기본으로 추가되어 있는 하위 컴포넌트로 메인 기능을 담당하는 컴포넌트 파일 AdminUsersDetail: AdminUsersMain에서 Register/Modify의 기능을 위해 제공되는 다이얼로그 컴포넌트 파일 기능 기본(Main) 조회 모드: 사용자 조회 모드를 선택하는 토글 버튼입니다. Read All: 관리자 포털 사용자로 등록된 전체 사용자를 조회합니다. Availab.. 2023. 2. 16. "'response' is defined but never used" 오류 해결 방법 Aixos 설치 후 뷰 컴포넌트 파일에 예시코드 적용 후 빌드시 발생한 오류 상황 Backend와 REST API로 통신하기 위해 Axios를 추가 설치하고 vue.confi.js 파일에 관련 설정을 하였습니다. 연동 테스트를 하기 위해 아래 코드를 추가하고 빌드하니 오류가 발생하였습니다. 위 코드를 적용한 후, 구동하기 위해 'npm run serve'를 터미널 명령어로 치는 순간 아래와 같이 많은 오류가 발생하였습니다. ▶ 터미널 (Terminal) 더보기 ERROR Failed to compile with 25 errors 오후 2:38:20 [eslint] C:\Users\SYP\Git\toyproject\frontend\web-app-admin\src\components\user-web\noti.. 2023. 2. 8. [실습] 뷰(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. 이전 1 2 3 4 5 ··· 8 다음
