데이터의 흐름을 쉽게 하기 위해 vuex라는 외부라이브러리가 있고, 메소드들을 서로 호출할 수 있도록 도와주는 eventBus라는 방법이 있다. 이중 eventBus의 사용방법에 대해 알아보자. 이벤트를 사용하는 이유 일반적으로 메소드, 변수를 정의할 때 한오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재위치에 포함된 메소드/변수를 호출하여 사용할 수 있다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까? 이럴 때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것이다. 이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하..
👉Mutation Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다. 우선 mutation이라는 것을 왜 사용하는 걸까? 이것은 예를들어 state에서 만들어진 함수를 getters에서 사용할 때 계속해서 반복되는 함수가 있다. 이것이 getters에서 여러개의 component에서 사용될 시에 각각의 component에서 따로 지정해주는 방식으로 진행되는데 이러한 귀찮음을 줄여주기위해 사용하는 것이 바로 mutation이라고 볼 수 있다. 즉, 같은 기능을 하는 함수를 mutation에 만들어놓고 그 mutation은 각각 필요한 component에서 실행시켜 state값을 변화시키는 방식으로 진행한다. 이때, 이 실행시키는 과정을 commit이라고 한다. 이렇게 되면 같은 기능..
📌Vue.js에서 Repository pattern적용방법 간단히 순서 설명후 따라해보자 Repository 폴더 생성 Clients 폴더 만들기 xxxClient.js 클래스/인터페이스 만들기 개별 리포지토리 클래스 만들기 파일 "저장소.js"만들기 모델, 컨트롤러 또는 Vuex내에서 사용하기 👉1. Repository 폴더 생성 해당 src폴더에 repository 폴더 만든다. 👉2. Clients 폴더 생성 새로 만든 'repositories'폴더 안에 'clients'폴더를 만들자. 기본적으로 이 폴더 안에 파일들을 넣을예정이다. 예를들어 HTTP클라이언트,Axios 등등.. 👉3. xxxClient.js 클래스/인터페이스 만들기 여기에는 CRUD 메서드를 포함한 모든 클라이언트 API구성이 포..
프로젝트를 진행함에 있어 API연동을 해야하는 순간이 왔다.. 바로 배우고 적용시켜보자 (1)편 : Repository pattern이란 뭔지에 대해 간단히 알아보기 (2)편 : Vue.js에서 Repository pattern적용방법 📌Repository Pattern이란? Repository(리포지토리) 패턴은 디자인 패턴 중 하나로, 데이터가 있는 여러 저장소(Local, Remote)를 추상화하여 중앙 집중처리 방식을 구성하고, 데이터를 사용하는 로직을 분리시키기 위한 디자인 패턴이다. ViewModel은 필요한 데이터를 Repository에 요청하고 Repository는 적절한 저장소에서 요청받은 데이터를 가져온다. Repository가 추상화되어 있기 때문에 ViewModel은 언제나 같은 인..
vue 프로젝트를 진행 하다보니 데이터를 따로 저장하는게 깔끔한 코드를 짤 수 있지 않을까 해서 따로 데이터를 저장하는 폴더를 만드려고 한다. 이때 저장 방식은 두가지가 있는데 하나는 store.js를 통해 저장하는 것과 하나는 더미데이터를 통해 저장하는 방식이다. 두가지의 가장 큰 차이점은 사용 목적에 있는데 아래에서 store에 대해 알아보자. 1. store store파일은 기본적으로 vuex를 사용해서 데이터를 가져오는 것인데 이것은 컴포넌트 간의 데이터를 자유롭게 주고받기 위한 목적으로 사용한다. 따라서 미리 필요한 데이터 셋팅을 할 때 스토어에 저장하여 공통된 데이터를 공유한다는 개념이면 store를 사용하는 것이 맞다. 📌Vuex? vuex는 vue.js의 상태관리 라이브러리로 애플리케이션의..
- Total
- Today
- Yesterday
- 빅오표기법
- JWT토큰
- 웹훅
- reactnative
- Repository pattern
- store.js
- 항해플러스후기
- vue3
- http
- React18v
- 이벤트버스
- focus와blur
- Vuex
- 항해플러스프론트엔드
- event종류
- loadbalancer
- Http통신
- 항해솔직후기
- 알고리즘
- 디바운싱
- 레포지토리패턴
- react
- 더미데이터
- Vue.js
- useState
- 이벤트리스너
- 로그인 인증
- vue.js3
- eventListner
- props
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |