Programming/Vue60 [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 UI, 레이아웃(Layout) 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(리스트/테이블) 화면 Layout을 구현하는 과정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 - 레이아웃(Layout) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45 프로그램 설치 프로젝트 구축 프로.. 2023. 1. 4. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 중에서도 기능 구현하기 위해 기획/설계하는 과정입니다. 공지사항/게시판 구현하기 - 기획/설계 가장 기본적인 게시글 등록, 수정, 삭제 기능을 위주로 기획하였습니다. UI/UX 최종 화면 - 웹 세부 화면 - 공지사항 리스트 세부 화면 - 공지사항 조작 화면 ▶ 등록, 수정 ▶ 삭제, 상세보기 Layout 기능 공지사항 리스트 영역 등록: 공지할 게시글을 추가하는 기능의 버튼입니다. 클릭시 상세 화면의 입.. 2023. 1. 3. [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 메뉴(Side Bar, Navigation Bar) 구성/구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "웹 어플리케이션 (Web Application) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 관리자/직원 전용 웹 어플리케이션의 메뉴, 네비게이션/사이드 바 영역을 구현하는 과정입니다. 웹 어플리케이션(Web Application) 구현하기 - 메뉴(SideBar, Navigation Bar) 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-je.. 2023. 1. 2. [실습] 뷰(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)로 관리자/직원 전용 Web Application 개발하기 - 프론트엔드(Font-end) 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 본 게시글에서는 관리자/직원 전용 웹 어플리케이션을 구현하기에 앞서 UI/UX, Layout을 기획/설계하는 과정을 기록합니다. 웹 어플리케이션 기획/설계하기 - 프론트엔드(Font-end) 관리자/직원 전용 웹 어플리케이션을 구축하기 위해 사이드바가 있는 구성의 웹 어플리케이션을 기획하였습니다. UI/UX 기능 Web Application을 구성하는 각 요소에 대한 설명은 위 UI/UX에서 위에서 아래로, 좌에서 우의 방향으로 작성하였습니다. Header: Web Application의 상단부에 위치한 고정 영역 관리자.. 2022. 12. 29. [실습] 뷰(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. "Module not found: Error: Can't resolve '@popperjs/core' in" 오류 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Bootstrap 설치 및 적용 후 빌드시 발생한 오류 상황 VSCode에 개발 환경이 모두 구축되고 난 후, Bootstrap 추가 설치 및 코드 적용시 Module을 찾을 수 없다는 오류가 발생하는 경우가 있습니다. 저의 경우, 잘 사용하고 있다가 Vuetify 설치 시도 후 취소하니 발생한 오류였습니다. 사용했던 명령어: vue add vuetify 위 사진에 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. Module not found: Error: Can't resolve '@popperjs/core' in '경로' 해결 방법 다양한 해결 방법이 있겠지.. 2022. 12. 27. 이전 1 2 3 4 5 6 7 ··· 9 다음
