본문 바로가기

전체 글118

[실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - Backend(REST API) 연결하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 화면에서 Backend로 연동하기 위해 REST API 연결하는 과정입니다. 회원/사용자 화면 구현하기 - REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 [실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - REST API 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면과 API Server가 연동된 결과를 확인하실 수 있습니다. ▶ 초기 상태 DB (MySQL) 화면 ▶ REGI.. 2023. 2. 20.
[실습] 뷰(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.
[실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - REST API 테스트하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 기능의 Backend 단인 API 구현 결과물을 테스트하는 과정입니다. 회원 관리 구현하기 - API Test 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 스프링부트(Spring Boot)로 관리자/직원 전용 Web Application 개발하기 - 백엔드(Back-end) 환경 구축하기 [실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - REST API 구현하기 테스트 테스트는 Postman으로 Controller에 구현한 REST API를 호출하여 해당 로직이 정상적으로 결과를 도출하는지를 확인합니다. 테.. 2023. 2. 15.
[실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - REST API 구현하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 기능의 Backend 단인 API를 구현하는 과정입니다. 회원 관리 구현하기 - API (Contoller, Service, Repository, Domain) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 스프링부트(Spring Boot)로 관리자/직원 전용 Web Application 개발하기 - 백엔드(Back-end) 환경 구축하기 혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다. 스프링부트(Spring Boot) 프로젝트(폴더, 디렉터리) 구조 파일 구조 테이블을 생성하고 CRUD 기능을 .. 2023. 2. 14.
[실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - DB, API 기획/설계하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 기능을 구현하기 위해 DB(Tables), API를 기획/설계하는 과정입니다. 회원 관리 구현하기 - 기획/설계 DB - Schema: web-app - Table Name: admin_user_info - Table Objectives: 관리자포털 사용자/직원의 기본 정보가 저장되는 공간 NAME NAME_KOR TYPE NOT NULL NOTES employee_no 직원번호 VARCHAR(6) V * PK register_employee_no register_date_time update_employee_no update_date_time 등록직원번호 등록일시 수정직원번호 수정일시 VARCHAR(6).. 2023. 2. 13.
[실습] 뷰(Vue)로 공지사항/게시판 구현하기 - Axios 이용하여 REST API 호출/연동하기 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 이벤트와 API Server를 연동하기 위해 Axios를 이용하여 구현하는 과정입니다. 공지사항/게시판 구현하기 - Axios로 REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - Root/상위 컴포넌트 화면 기능 개발 [실습] 스프링부트(Spring Boot)로 공지사항/게시판 구현하기 - REST API(Controller, Service) 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 화면.. 2023. 2. 10.