본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그

전체 글71

Router push, replace, go 라우터에서는 를 통해 a 태그를 사용한 페이지 전환이 가능한데이외에도 $router 객체의 push, replace, go 메소드를 통해 페이지 전환이 가능하다 push, replace go의 차이는 다음과 같다PUSHmethods: { gotoHome() { this.$router.push('/home'); }, gotoAbout() { this.$router.push('/about'); }} push는 해당 url로 이동하는 메소드인데이전 경로를 히스토리 스택에 저장하기 때문에 이동 후 뒤로가기 버튼을 통해 원래 페이지로 돌아올 수 있다.REPLACEmethods: { replaceHome() { this.$router.replace('/home'); .. 2024. 5. 8.
Vuex로 중앙에서 상태 관리하기 Vuex의 정의Vuex란 Vue.js에서의 상태 관리 라이브러리Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할React의 Redux같은것Vuex의 특징Single Source of Truth하나의 어플리케이션은 하나의 store만 가진다하나의 객체가 어플리케이션 전체 state를 포함단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅 편리 State is Reactive상태가 변경되면 이 상태를 공유하는 다른 곳에서도 상태가 업데이트 됨  State management pattern + LibraryVuex는 상태관리 패턴이자 라이브러리여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 Vu.. 2024. 5. 7.
Vue 프로젝트 경로의 @ import store from '@/src/main.js' 이런식으로 경로에 @ 가 들어가있는 경우를 볼수있는데 이는 Vue 프로젝트에서 쓰이는 alias다. 프로젝트의 루트를 가르킨다. 즉 위의 경로는 프로젝트의 루트에 있는 src파일 하위의 main.js를 가르키는것 2024. 5. 7.
import 시 index.js 생략 예를들어 현재 파일과같은 위치에 있는 main 폴더 아래에 index.js 파일이 있다고 가정하면 import '~/main/index.js'; 일반적으로 이렇게 추가하는데 index.js 파일의 경우 파일명이 생략 가능하다import '~/main'; 이런식으로 index.js 파일은 노드 모듈 시스템 및 대부분의 모듈 번들러에서 기본적으로 가져오는 파일명이라 그렇다고 한다. 2024. 5. 7.
emit으로 자식 -> 부모 데이터 전달 Vue에서 emit은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법이다 예시 자식컴포넌트 자식 컴포넌트 메시지 전송  부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }}  자식컴포넌트에서 this.$emit("이름", 데이터); 으로 데이터를 넘기면 부모 컴포넌트에서  로 받는 방식 다음은 한번에 여러개의 데이터를 옮기는 방법이다 자식 컴포넌트 자식 컴포넌트 데이터 전송  부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }} 부모 컴포넌트에서 받은 숫자: {{ numberFromChild }} 2024. 5. 3.
Vue 프로젝트 동작 순서 1. package.json설정파일이다Spring의 pom.xml과 유사하다2. index.html기본적인 html파일App.vue가 들어갈 장소를 명시해놓는 뼈대보통 수정x  이부분이 App.vue가 들어가는 장소3. main.jsApp.vue의 템플릿 내의 을 마운트 한다.여기서 import한 파일들은 나머지 뷰에서 잘 동작한다.import Vue from 'vue'import App from '~/App'import router from '~/router';import axios from 'axios';import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';import 'bootstrap/dist/css/bootstrap.css';i.. 2024. 5. 2.

티스토리툴바