Vue/Basic4 Vue 컴포넌트 기본구조 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. Vue 컴포넌트가 갖는 기본 형태 컴포넌트를 화면에서 보려면 라우터에 추가해야 합니다. // html 코드는 여기에 2. Vue가 가지고 있는 가장 기본적인 스크립트 구조 name 이 컴포넌트의 이름 지정 가능 (선택 사항) components 특정 컴포넌트를 다른 컴포넌트에 import 해서 재사용 가능 data 데이터 바인딩 setup() 향후 수정할 예정입니다. created() 이 컴포넌트가 실행되는 순간에 자동으로 created() 안에 정의된 코드가 바로 실행이 됩니다. mounted() template 태그 안에 지정된 html DOM이 실제 화면에 로딩(mount)이 되는 순간 mounted에 정의된 코드가 바.. 2021. 9. 18. Routing 사용 방법 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. 라우팅이란? Vue같은 SPA에서는 페이지를 이동할 때 마다 서버에 요청해서 페이지를 갱신하는 게 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 됩니다. 즉, Vue에서 라우팅이라는 건 클라이언트에서 URL 주소에 따라 페이지가 전환되는 것을 의미합니다. Vue 프로젝트 내부에서는 미리 URL 주소를 정의하고 각 주소마다 Vue 페이지를 미리 연결시켜놓습니다. 그리고 해당 주소로 사용자의 요청이 들어왔을 때, 미리 정의된 URL 주소에 해당하는 뷰 페이지로 화면을 전환시켜줍니다. 뷰에서 라우터는 path마다 해당하는 컴포넌트에 어떤 컴포넌트를 연결시켜줄지 정의합니다. 2. Vue 라우팅 사.. 2021. 9. 18. 기본 라이프 싸이클 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. Intro Vue가 실행되고 우리가 화면을 보는데까지 관여하는 컴포넌트들에 대해 알아보겠습니다. index.html main.js App.vue 1. index.html 실제 화면을 그리는 html로 중요한 건 아래 한 줄 입니다. div id="app" 2. main.js Vue 프로젝트를 실행하면 가장 먼저 실행됩니다. 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할을 담당합니다. 결국은 index.html을 통해 우리가 만든 뷰 컴포넌트들이 사용자들에게 제공이 됩니다. 실제 index.html 내 div id="app" 이 부분으로 우리가 개발한 뷰 컴포넌트들이 실행이 됩니다. mount('.. 2021. 9. 18. Project basic package 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. Intro Vue(3버전 기준) 프로젝트를 기본으로 생성하면 아래 패키지들이 기본으로 생성됩니다. 2. Vue project basic package node_modules npm으로 설치된 패키지 파일들이 모여있는 디렉토리 public 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여있는 디렉토리 src/assets 이미지, css, 폰트 등을 관리하는 디렉토리 src/components Vue 컴포넌트 파일이 모여있는 디렉토리 App.vue 최상위(Root) 컴포넌트 App.vue 안으로 우리가 개발한 컴포넌트들이 들어갑니다. main.js Vue 프로젝트를 실행하면 가장 먼저 실행됩니다. 가장 먼저 실행되는.. 2021. 9. 18. 이전 1 다음
