Vuex(v4.x)Vuex란?Vuex 어플리케이션의 복잡도가 올라가고 컴포넌트 수가 많아지면 컴포넌트간의 데이터 전달 및 관리가 어려움 Vuex : Vue.js를 위한 상태관리 패턴 + 라이브러리 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 예측 가능한 방식으로 상태 변경 가능 상태 관리 (State Management) 여러 컴포넌트간의 데이터 전
Proxy 사용하기Proxy의 필요성 일반적으로 FE인 Vue 어플리케이션과 BE를 분리해서 개발하고 각각을 별도 포트로 운영 클라이언트와 서버가 별도의 포트를 사용할때 클라이언트가 서버로 HTTP요청을 하게 되면 CORS 문제가 발생한다 해당 문제를 해결하기 위해 Proxy 서버 사용 Proxy 서버프록시 서버 클라이언트가 자신을 통해 다른 네트워크
컴포지션 APIComposition API?기존의 Vue의 문제 : 프로젝트 규모가 커질수록 관리가 힘들다 또한 대규모 어플리케이션일수록 코드 공유와 재사용이 특히 중요 mixin을 통해 코드를 재사용하면 오버라이딩 문제, 다중 mixin인 경우 코드 관리가 어려움 data, computed, watch, methods등 규모가 커질수록, 컴포넌트의 계층
컴포넌트 심화컴포넌트 in 컴포넌트부모와 자식컴포넌트에서 다른 컴포넌트 사용하는 방법 사용할 컴포넌트를 import한다 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록한다 지역등록 형태예시123456789import ComponentA from './ComponentA'import ComponentC from './Component
Related POSTVue 서버 데이터 바인딩1. API 호출 메서드 만들기 팀 프로젝트라면 API 호출 메서드는 팀 개발 리더가 작성할 활율이 높다프론트 개발리더가 보통 공통 메서드를 구현해서 팀원들이 사용하게끔 제공한다 AxiosAxios란? 서버와 데이터 송수신할 수 있는 HTTP 비동기 통신 라이브러리 vue.js 개발시 서버와의 통신을 위해 가
Related POST컴포넌트 Basic컴포넌트 이름이 있는 재사용 가능한 인스턴스 다른 컴포넌트에 import 해서 사용 가능 UI이일 수도 있고, 페이지 내의 특정 기능 요소 일 수도 있음 컴포넌트 관리 Vue CLI로 최초 프로젝트 생성시 src 밑에 components 폴더 생성 vue-router 추가시 src 밑에 views 폴더 생성 실제
Vue Router 설정라우팅 특정 웹사이트 접속시 url 주소마다 다른 페이지 라우팅 : Client에서 url주소에 따라 다른 리소스 다른 페이지 전환 Vue같은 SPA의 경우 페이지 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신 Vue 프로젝트 내부에 미리 ur
JetBrain에서의 vue 프로젝트 시작은 왜 2.x?vue프로젝트로 웹스톰을 사용하다 겪는 문제인데..막 작성하다가 뭐가 안되서 보면 vue 프로젝트가 2.x로 되어있음 웹스톰의 리액트 프로젝트 시작시 다음과 같이 되어 있음 알다시피 @Vue/Cli에서 vue create로 시작시 디폴트 프리셋이 2개가 나와서선택이 가능하다 이를 어떻게 하면 가