Vue51 [실습] 뷰(Vue)로 웹 어플리케이션 레이아웃(Web layout) 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전 목표를 잡아두는 것이 중요합니다. 오늘의 목표는 "기본적인 웹 어플리케이션 구조(Web aApplication Layout)을 만들어보기!" 입니다. 웹 어플리케이션 구조/레이아웃(Web Layout) 구현하기 웹 어플리케이션 레이아웃이 정말 다양한 종류가 있지만 일반적으로 관리자가 사용하는 웹 홈페이지 레이아웃으로 만들어보려고 합니다. 사전 준비 Vue 프로젝트가 생성되어 있어야 합니다. 혹시라도 뷰 프로젝트가 생성되어 있지 않으신 분들은 아래 링크를 참조해서 뷰 프로젝트를 생성하시면 됩니다! .. 2022. 12. 12. 뷰(Vue) 프로젝트 기본 파일(main.js / index.html / App.vue) 구조 및 동작 흐름도 (Workflow) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js 프로젝트에 대한 기본 구조를 공부하고 정리한 내용입니다. Vue.js의 기본 구조를 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 프로젝트 기본 파일 뷰 프로젝트 생성시 기본적으로 생성되는 파일이며, 구동시 필요한 가장 최소한의 파일은 main.js / index.html / App.vue로 총 3가지가 있습니다. 파일 호출 흐름도 ( 아래 과정은 main.js가 먼저라는 얘기도 있고 index.html이 먼저라는 얘기도 있어서 확실하지는 않습니다만, 제가 이해한 방향대로.. 2022. 12. 8. 뷰 라우터(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. Vue.js 프로젝트에 뷰 라우터 (Vue Router) 설치하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하는 도중, 웹 어플리케이션 개발시 가장 기본적인 기능 중 하나인 '라우팅 기능'을 이용하고 싶더라구요. 뷰에서 라우팅 기능은 '뷰 라우터'로 공식적으로 지원하는 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다. 뷰 라우터 (Vue Router) 뷰 라우터란 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 뷰 라우터는 총 3가지로 구분할 수 있으며, 자세한 사항은 각각 아래의 링크를 참조해주세요. 기본 라우터: https://log.. 2022. 12. 6. 뷰 디렉티브 (Vue Directive) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 디렉티브 (Vue Directive) HTML 태그 안에 'v-'를 접두사로 가지는 모든 속성을 의미합니다. 뷰 디렉티브는 화면 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 동적인 웹을 구현할 수 있습니다. v-if / v-else-if / v-else 목적 지정한 뷰 데이터의 값(참, 거짓)에 따라 해당 HTML 태그를 화면에 표시하거나 하지 .. 2022. 12. 1. 뷰 라우터 (Vue Router) - 네임드 뷰(Named View) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 네임드 뷰에 대해서 정리하였습니다. 네임드 뷰 (Named View) 한 화면에 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식 네스티드 라우터와의 .. 2022. 11. 29. 뷰 라우터 (Vue Router) - 기본 라우터 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 기본 라우터에 대해서 정리하였습니다. 기본 라우터 한 화면에 하나의 컴포넌트만 표시하는 경우 사용하기 적합한 라우터 사용 태그 뷰 기본 라우터 구현시 .. 2022. 11. 25. 이전 1 ··· 3 4 5 6 7 8 다음
