vuejs52 [실습] 뷰(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. [실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 웹(WEB)에 투두 리스트 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두리스트(Todo List) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 지난 게시글에서 다룬 웹 어플리케이션에 투두 리스트를 올리는 과정입니다. 투두 리스트 (Todo List) 구현하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5) 혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다... 2022. 12. 26. [실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 최상위 컴포넌트 기능 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List)의 최상위 컴포넌트 기능을 구현하는 과정입니다. 투두 리스트(Todo List) 구현하기 사전 준비 아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 투두 리스트 레이아웃(Todo List Layout) 구현하기: https://logs-jejustone.tistory.com/37 혹시라도 위에서 언급한 개념이 잘 기억나지.. 2022. 12. 23. [실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 하위 컴포넌트 기능 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List)의 하위 컴포넌트 기능을 구현하는 과정입니다. 투두 리스트(Todo List) 구현하기 사전 준비 아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 투두 리스트 레이아웃(Todo List Layout) 구현하기: https://logs-jejustone.tistory.com/37 혹시라도 위에서 언급한 개념이 잘 기억나지 .. 2022. 12. 22. 이전 1 2 3 4 5 6 7 8 다음
