Programming116 [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - UI 및 기능 개발 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능을 구현하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 - UI 및 기능 개발 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\admin-web\users\AdminUsersMain.vue 관리자 포털의 사용자 관리 화면의 주요 기능이 담겨있는 컴포넌트 파일입니다. 전체 코드를 확인하실 분들은 아.. 2023. 3. 8. [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - 기획/설계 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능을 구현하기 위해 기획/설계하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 - 기획/설계 UI/UX 우측 상단의 사용자 조작 버튼 그룹에 '임시 비밀번호 발급' 버튼 추가 Before After 기능 임시 비밀번호 관리자 포털 사용자 관리 페이지에서 선택한 사용자의 임시 비밀번호를 발급 팝업창으로 임시 비밀번호 오클릭을 방지하기 위해 팝업창 프로세스 추가 난수 생성을 통해 임시 비밀번호를 발급 발급된 임시 비밀번호는 7일간만 사용 가능, 그 기간 안에 변경해야 함 발급된 임시 비밀번호는 사용자에게 따로 공지해야함 (현재) 관리자에게 팝업으로 알려주면, 직접 사용자에게 가이드하는 형.. 2023. 3. 7. [실습] 스프링부트(Spring Boot)로 임시 비밀번호 발급 기능 구현하기 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능을 구현하기 위해 DB(Tables), API를 설계부터 개발, 테스트하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 기획/설계 DB 임시 비밀번호와 관련하여 사용되는 테이블은 총 2개로 기존에 구현한 테이블입니다. (1) 관리자 포털 사용자 비밀번호 이력 상세 사항을 확인하고 싶으신 분들은 '[실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - DB, API 기획/설계하기'를 참고해주세요. - Schema: web-app - Table Name: admin_user_pw_history - Table Objectives: 관리자포털 사용자/직원의 비밀번호 정.. 2023. 3. 6. [실습] 뷰(Vue)로 설정 화면 구현하기 - Backend(REST API) 연결하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면에서 Backend로 연동하기 위해 REST API 연결하는 과정입니다. 설정 화면 구현하기 - REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 [실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - REST API 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면과 API Server가 연동된 결과를 확인하실 수 있습니다. ▶ 초기 상태 DB (MySQL) [TABLE] admin_user_infor.. 2023. 3. 3. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면의 UI/Layout을 구현하는 과정입니다. 설정 화면 구현하기 - UI/Layout 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - Backend(REST API) 연결하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\admin-web\users\AdminUsersDetail.vue 관리자 포탈 사용자를 등록, .. 2023. 3. 2. [실습] 뷰(Vue)로 설정 화면 구현하기 - 기획/설계하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면을 구현하기 위해 기획/설계하는 과정입니다. 설정 화면 구현하기 - 기획/설계 UI/UX Layout BaseAdminSettings: 라우터와 연결된 뷰 파일이자 하위 컴포넌트를 연결하는 최상위 컴포넌트 AdminUsersDetail: 로그인한 사용자의 개인 정보가 표시 및 수정 컴포넌트 관리자 포털 사용자 추가/수정 컴포넌트 재사용 UserPassword: 로그인한 사용자의 비밀번호 컴포넌트 기능 개인 정보 로그인한 사용자가 개인 정보를 직접 변경하는 영역 관리자 포털 사용자 추가/수정 팝업창에서 사용한 컴포넌트를 재사용 기존 컴포넌트의 일부 필드에 대해서는 Disable 혹은 Hide 하도록 수정 Disab.. 2023. 3. 1. [실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - REST API 테스트하기 오늘의 실습 목표는 "비밀번호 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 비밀번호 관리 기능의 Backend 단인 API를 구현 결과물을 테스트하는 과정입니다. 비밀번호 관리 구현하기 - API Test 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 스프링부트(Spring Boot)로 관리자/직원 전용 Web Application 개발하기 - 백엔드(Back-end) 환경 구축하기 [실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - REST API 구현하기 테스트 테스트는 Postman으로 Controller에 구현한 REST API를 호출하여 해당 로직이 정상적으로 결과를 도출하는지를.. 2023. 2. 28. 이전 1 2 3 4 5 6 7 8 ··· 17 다음
