본문 바로가기

Programming116

[실습] 뷰(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.
"Access to XMLHttpRequest at ... has been blocked by CORS policy" 오류 해결 방법 Axios로 API Server에 접근했을 때 발생하는 오류 상황 Frontend 프로젝트인 Vue 프로젝트와 Backend 프로젝트인 Spring Boot 프로젝트를 연동한 후, 화면에서 정상 동작 여부를 확인하는 중에 발생한 오류입니다. 실제로 다수 발생하는 상황인지 구글링해보니 많은 해결책이 있었습니다. 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. Access to XMLHttpRequest at '경로경로~~' from origin '경로경로~~' has been blocked by CORS policy 원인 기본적으로 브라우저에서는 보안상의 이유로 CORS를 제한하고 있어 발생하는 오류입니다. * CORS란? Cross-Origin Resource Sharing (교차 출처 리소스.. 2023. 2. 9.
"'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.

티스토리툴바