frontend14 [실습] 뷰(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.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. 웹 스토리지(Web Storage) - 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js를 이용하여 Todo List를 개발하면서 기본적인 이론을 공부하고 정리한 내용입니다. 웹 스토리지란? HTML5에서 새로 공개된 방식의 데이터 저장소로 클라이언트에 데이터를 저장하는 공간을 의미합니다. 웹 스토리지에는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다. 웹 스토리지는 Key와 Value의 쌍(Pair) 형태로 데이터가 저장되며, Window 객체의 프로퍼티로 존재합니다. 웹 스토리지와 쿠키 쿠키(Cookie)와 웹 스토리지는 기능 자체만 본다면 .. 2023. 1. 10. [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - UI, 레이아웃(Layout) 구성/구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "웹 어플리케이션 (Web Application) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 관리자/직원 전용 웹 어플리케이션 Layout을 구현하는 과정입니다. 웹 어플리케이션(Web Application) 구현하기 - 레이아웃(Layout) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45 프로그램 .. 2022. 12. 30. [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 프론트엔드(Font-end) 환경 구축하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 본 게시글에서는 관리자/직원 전용 웹 어플리케이션을 구현하기에 앞서 프론트엔드(Front-end) 환경을 구축하는 과정을 기록합니다. 프론트엔드(Front-end) 환경 구축하기 스펙 Framework: Vue 2 Plugin: router | vuetify Tool: VSCode (Visual Studio Code) 구축 과정 1. 'VSCode로 뷰(Vue.js) 개발 환경 구축하기'를 참조하여 아래 사항에 대해서 모두 설치합니다. [ 설치 목록 ] VSCode (Visual Studio Code) [Optional].. 2022. 12. 28. 이전 1 2 다음
