본문 바로가기

visualstudiocode31

[실습] 뷰(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)로 웹 어플리케이션의 메뉴/사이드바 라우팅 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 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.