vscode37 [실습] 뷰(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. [실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 투두 리스트를 만들기에 앞서 레이아웃과 기능에 대해서 간단하게라도 기획/설계하는 과정이 필요합니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List) 중에서도 기능 구현하기 위해 기획/설계하는 과정입니다. 투두 리스트 (Todo List) 기획/설계하기 다양한 종류의 투두 리스트가 있으나 가장 기본적인 항목 추가, 수정, 삭제, 전체 삭제 기능을 위주로 기획하였습니다. UI/UX 기능 Todo를 구성하는 각 요소에 대한 설.. 2022. 12. 19. 뷰(Vue)로 웹 어플리케이션의 메뉴/사이드바 라우팅 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "웹 어플리케이션 구조(Web aApplication)의 사이드바/메뉴 기능 만들어보기!" 입니다. 사이드바/메뉴 기능을 구현하기 위해서 라우팅 개념을 필수적으로 공부하고 구현해야합니다. 웹 애플리케이션 사이드바/메뉴 구현하기 사전 준비 아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5) Vue Router 설치 (참고: https://log.. 2022. 12. 13. [실습] 뷰(Vue)로 웹 어플리케이션 레이아웃(Web layout) 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전 목표를 잡아두는 것이 중요합니다. 오늘의 목표는 "기본적인 웹 어플리케이션 구조(Web aApplication Layout)을 만들어보기!" 입니다. 웹 어플리케이션 구조/레이아웃(Web Layout) 구현하기 웹 어플리케이션 레이아웃이 정말 다양한 종류가 있지만 일반적으로 관리자가 사용하는 웹 홈페이지 레이아웃으로 만들어보려고 합니다. 사전 준비 Vue 프로젝트가 생성되어 있어야 합니다. 혹시라도 뷰 프로젝트가 생성되어 있지 않으신 분들은 아래 링크를 참조해서 뷰 프로젝트를 생성하시면 됩니다! .. 2022. 12. 12. VSCode에서 Git 계정 연동/설정하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 개발자라면 꼭 사용해야하는 버전관리 시스템(VCS), 그 중에서도 가장 보편적으로 사용하는 Git에 대해서 설치 및 계정을 연동하는 과정에 대해서 소개합니다. Github 계정 및 Github 내 Clone할 Repository가 있다는 가정하에 작성된 글입니다. VSCode에서 Github 계정 정보 설정하기 1. VSCode에서 터미널(Terminal) 창을 엽니다. 방법: 키보드: Ctrl + Shift + ` 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭 2. Terminal로 Git 계정이 연동 정보가 있는지 확인합니다. Git.. 2022. 12. 9. 뷰 라우터(Vue Router) 설치 후, "1(#) critical severity vulnerability" 오류 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 뷰 라우터(Vue Router) 설치 후 발생하는 오류 상황 VSCode로 Vue.js 개발을 진행하는 중에 뷰 라우터(Vue Router) 기능을 이용해보고자 뷰 라우터를 설치하고자 했습니다. 뷰 라우터는 npm을 통해 설치할 수 있다고 하여 아래와 같이 npm 명령어를 이용하여 뷰 라우터를 설치하였습니다. 명령어: npm i --save vue-router 설치가 완료된 후, 아래와 같이 "critical" 메세지가 표시되더라구요. 위 사진에서 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. "1 criti.. 2022. 12. 7. 이전 1 2 3 4 5 6 다음
